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.
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).
If you are using Chrome browser, the bookmark should appear as below, if your bookmark bar is visible.
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.
If we close up, this is what you will see on the bottom left of the page.
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.
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.
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.
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:
-
Bookmark this page on your iPad or iPhone.
-
Rename the bookmark to "Firebug".
-
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');
-
Go to bookmark option and press "Edit". Then select "Firebug" bookmark.
-
Remove the original URL and paste the bookmarklet.
- 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.
Conclusion
Firebug Lite is by far good enough to do quick page inspection. You can view html, css and any script used to build the webpage. Although Chrome has its own Web Developer extension, Firebug Lite does not disappoint by a mile.
Related posts:
- How to Fix Home Button Delays on iOS Devices [Quicktip]
- 20 Awesome “Battle of the Browsers” Artworks
- Free Mobile Devices Prototyping Templates – Best Of
- A look into: Designing for Mobile Devices
via hongkiat.com http://www.hongkiat.com/blog/installing-firebug-browsers-ios/