Run Firebug on iPad or iPhone

Dec 2, 2011 - 10 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.

Enjoy this tip? Subscribe to the OSXDaily newsletter to get more of our great Apple tips, tricks, and important news delivered to your inbox! Enter your email address below:

Related articles:

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

10 Comments

» Comments RSS Feed

  1. 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?

  2. 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!

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

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

  5. Dave says:

    Thank you, it just works perfectly!

  6. anonymous says:

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

  7. Javeed Shaik says:

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

Leave a Reply

 

Shop for Apple & Mac Deals on Amazon.com

Subscribe to OSXDaily

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