Run Firebug on iPad or iPhone

Dec 2, 2011 - 11 Comments

Firebug on iPad

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.

.

Related articles:

Posted by: Paul Horowitz in iPad, iPhone, Tips & Tricks

11 Comments

» Comments RSS Feed

  1. Trua says:

    Hello, is there a way to use this on chrome without out the firebug extension?

  2. Javeed Shaik says:

    It opens the firebug in ipad or iphone, but able to inspect the each elements properly.

  3. anonymous says:

    ahem…it says it can’t be opened because it is a local file

  4. Dave says:

    Thank you, it just works perfectly!

  5. […] 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. […]

  6. […] 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 […]

  7. joshua says:

    Koder app has a built in firebug lite support.
    http://itunes.apple.com/us/app/koder/id439271237?mt=8&ls=1

    • Franco Musso says:

      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!

  8. iPad One Owner says:

    Doesn’t seem to be working on iPad 1, 3G, 32 GB, iOS 5.0.1; is there some other pre-requesite?

Leave a Reply

 

Shop on Amazon.com and help support OSXDaily!

Subscribe to OSXDaily

Subscribe to RSS Subscribe to Twitter Feed Follow on Facebook Subscribe to eMail Updates

Tips & Tricks

News

iPhone / iPad

Mac

Troubleshooting

Shop on Amazon to help support this site