Ads 468x60px

freak2code is the blog about latest geek news,software reviews ,trends in technology and more informative stuff......

Wednesday, 15 August 2012

Guide to: Installing Firebug in Major Browsers and iOS Devices


Guide to: Installing Firebug in Major Browsers and iOS Devices

Firebug is a Firefox add-on with cool tools to inspect web page element, debug and develop web pages. There is however no way you can have these tools on other web browsers apart from Firefox.
Firebug
Development of a similar tool for other browsers may take hard work, but it will be of great help if you could get Firebug to work on other browsers too, considering that everyone has their preferred browsers.
Well, here is where Firebug Lite comes in to solve your needs. Firebug Lite is a simpler version of Firebug but it can be used on IE, Opera, Chrome, Safari, iPad and iPhone while retaining similar options and features.
Recommended Reading: 40 Useful IPad Apps For Web Designers

Installing Firebug Lite on Opera, Safari & Chrome

With Firebug Lite, there isn’t any installation necessary. Written in Java Script, you can bookmark a Firebug Lite link and it will be ready for page inspection. So what you need to do is to simply bookmark the link below (you can also drag the link to your browser’s bookmark bar).
Firebug Lite
If you are using Chrome browser, the bookmark should appear as below, if your bookmark bar is visible.
Firebug Bookmark
That’s it, your Firebug Lite should now work when you need to use it.

Using Firebug Lite on Opera, Safari & Chrome

Now you can use Firebug Lite to inspect practically any web page. For this example, we will use Wikipedia.org.
When the web page is loaded, click on the Firebug Lite bookmark you saved earlier and you will see a consol box appear at the bottom of the web page.
Firebug Consol
If we close up, this is what you will see on the bottom left of the page.
Firebug Consol Closeup
Now you can see the (+) and the (-) at the starting point of many lines. The (+) means there are more lines closed under the one-liner of html, and if you highlight the line, you will see which part of the page it represents.
Highlighted lines
But if you want to make it easier to spot the lines represented by any text, photo, link or any other elements on the web page itself, click on the ‘Inspect’ button.
Inspect
Now you can hover your mouse cursor to any part of the elements available on the web page, and you will see the html line highlighted. This makes it easier for you to do some inspection.
Inspect Highlighted

Installing Firebug Lite on iPad & iPhone

Bookmarklets doesn’t really go well with iPad and iPhone. To have Firebug Lite installed on iPad and iPhone, here’s how:
  1. Bookmark this page on your iPad or iPhone.
    Firebug Bookmark iPad
  2. Rename the bookmark to "Firebug".
    Firebug Bookmark Rename
  3. Select and copy all the script below.
    javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');
  4. Go to bookmark option and press "Edit". Then select "Firebug" bookmark.
    Firebug Bookmark Edit
  5. Remove the original URL and paste the bookmarklet.
    Firebug Bookmark Paste
  6. Choose “Done” on your keyboard.
Now, try to open any website and select "Firebug" bookmark and you’ll see a functioning Firebug at the bottom of your iPad screen.
Firebug Bookmark Paste

0 comments:

Post a Comment

Recent Posts