Run Firebug on iPad or iPhone
Firebug is an extremely popular web development tool that allows a user to inspect and modify page elements in real time, be it HTML, CSS, or JavaScript. It’s most known for being a plugin for the Firefox browser, but thanks to Firebug Lite and a little bookmarklet hack, you can run Firebug Lite directly in Safari on iOS.
Using Firebug in iOS is easy, here’s how, as discovered by Martin Kool:
- Bookmark a web page from Safari in iOS and rename the bookmark to “Firebug”
- Tap the text region below twice and “Select All” then choose “Copy”
- Now edit the Firebug bookmark you made, and remove the URL, replacing it with the javascript you just copied
- Tap on “Done” and then hit the bookmarklet to activate Firebug Lite on the iPad
If you’re having troubles with the code from pastebin, head over to Martin Kool’s tumblr for another way to capture the bookmarklet. For screen real estate purposes, Firebug will look best on the iPad, but it works on the iPhone and iPod touch with Safari too.
You probably won’t be getting tons of serious web development done with this, but it’s a great trick and definitely usable enough to make minor changes and quick adjustments to web elements while using iOS.
Hello, is there a way to use this on chrome without out the firebug extension?
It opens the firebug in ipad or iphone, but able to inspect the each elements properly.
ahem…it says it can’t be opened because it is a local file
Thank you, it just works perfectly!
[…] These bookmarklet tweaks work by editing a bookmark URL and replacing it with a javascript that changes on page behavior, similar custom bookmarklets have allowed us to View Page Source in iOS Safari and even use Firebug on iOS. […]
[…] similar tip utilizes an edited bookmark to let you run Firebug with Mobile Safari on an iPhone or iPad too, which may be a bit more useful for […]
Koder app has a built in firebug lite support.
http://itunes.apple.com/us/app/koder/id439271237?mt=8&ls=1
Thanks so much for sharing this tip. I’ve been using Koder to edit remote theme files for a while (and loving it) but had never noticed the firebug functionality as I hadn’t touched the preview tools… This is awesome!
Doesn’t seem to be working on iPad 1, 3G, 32 GB, iOS 5.0.1; is there some other pre-requesite?
use “http://getfirebug.com/” instead of “https://getfirebug.com/” in bookmarklet
same story, i can see the firebug tab but the website is blank