Subscribe to RSS Feed

FirebugLite is lightweight version of Firebug (the Firefox extension) that does implement only a subset of features (mainly missing the Script and Net panel).

It's implemented as pure web application and running in all major browser.

Using Firebug lite is quick since it doesn't have to be installed (it's a web app) and it can also be injected into an existing page using a bookmarklet.

The next set of screenshots shows how Firebug Lite looks like in various browsers.

 

 

 

Let's see how you can run Firebug Lite within a web page. This post covers four scenarios:

  • Include using <script> element
  • Run through Bookmarklet
  • Firebug Lite on iPad
  • Run as Chrome Extension

Include using <script> element

Firebug Lite is pure JS application and so you can include it in your page just like any other JavaScript code. See an example:

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <script src="https://getfirebug.com/firebug-lite.js"
          type="text/javascript">
</script>
</head>
<body>
  <div style="color:green">Hello</div>
</body>
</html>

This approach is recommended in cases when you often inspect the same page and you want to have Firebug Lite UI always ready after page load (refresh). You can also download firebug-lite.js file and run it locally from your web server as follows:

<script type="text/javascript" src="/local/path/to/firebug-lite.js"></script>

Read more.

Run through Bookmarklet

You an also inject Firebug Lite into an existing page using the following bookmarklet.

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');

Just drag this Firebug Lite Link into your Bookmarks toolbar. You can also click the link immediately to test Firebug Lite on this page.

This approach is recommended in cases when you use Firebug Lite for inspecting random pages.

Firebug Lite on iPad

One of the most interesting use cases is running Firebug Lite on mobile devices, especially tablets since they have bigger screen (Firebug Lite is not yet optimized for small screens).

Inspecting pages on mobile devices can be faster with Firebug Lite since you don't have to deal with remote debugging settings, setup connection with the PC, etc. All you need is to click a bookmarklet.

Read a post about how to create Firebug Lite Bookmarklet for iPad.

Run as Chrome Extension

Finally, you can install Firebug Lite as an extension into Google Chrome browser.

There are benefits over Firebug Lite bookmarlet:

  • Browser toolbar integration
  • Able to activate Firebug Lite for a particular domain
  • Firebug Lite will be loaded before all other scripts, allowing it to capture all console calls, and all XHR requests for that page
  • It is faster to load, because all code and images will be store in the extension's directory in your machine
  • Will be able to read external resources in the next version

Read more about Firebug Lite on Chrome.

Resources

If you are interested to contribute to the project you can start with reading Gal's post explaining what you can do. Gal Steinitz is the current Firebug Lite maintainer, so shoot any questions about what's coming up in his direction!

You might also be interested in what the future holds for Firebug Lite.

 

Rss Commenti

3 Comments

  1. Nice info, i like firebug on firefox... 🙂

    #1 Backids99
  2. i like firebug, it is best inspect element tools

    #2 RyanDwi
  3. Thank you very much, i was looking something like this 🙂

    #3 Ariel

Sorry, the comment form is closed at this time.