MarkUs Blog

MarkUs Developers Blog About Their Project

Using Firebug

without comments

Firebug (Found here) is an add-on for Firefox that allows users to view, modify and debug the HTML, CSS, and JavaScript of pages as you see them. I imagine that most of the Markus developers know how it works already, but in this blog post I am going to talk about how I have been using it, and what neat features and tricks that I’ve learned.

Firebug takes the form of a layover that sits over your page. In the screenshot, the HTML tab is selected, so we see the source HTML and CSS for the page.

Working with HTML

The first thing that I learned with firebug is how to view and edit HTML effectively. This turns out to be handy, since it isn’t always obvious what kind of HTML the rails code will make. I certainly spent a lot of time playing with various rails commands and seeing what results they have in HTML.

Handy Features

  • The inspect button
    This is the button at the top left of the toolbar (next the the firebug, the one with a mouse arrow above a box). If you click on that button and start moving the mouse around the page, firebug will show the HTML source and CSS of whatever is under your mouse. This makes it super easy to find the HTML source of whatever feature you are working on.
  • Editing HTML
    There is an edit button near the top left of the toolbar (in the second row). Clicking it will allow you to edit the HTML of whatever line you have selected, and will show you the results immediately on the page. This lets you try all sorts of experimenting and testing. I found it useful for adding and taking away CSS classes and seeing the results. Note that you can also make changes to the CSS directly in the window on the right and see the results right away too (You can also do this from the CSS tab).

Working with JavaScript

JavaScript is used all over the place in Markus, and if you’ve never used it before, it can be quite a handful. It can be hard to tell if the code you write is even executing or causing errors, because the page won’t necessarily tell you. Fortunately, Firebug helps here too. Clicking on the scripts tab will show you all the JavaScript that is working on the current page. The console tab ends up being super useful here too.

Handy Features

  • Setting breakpoints
    Clicking on the line number of any line will set a breakpoint there. Whenever that line of code is being executed, the execution will pause and let you take a look. You can then step forward one line at a time, or jump to your next breakpoint. This is handy for seeing what code is being executed in what order.
  • Printing debug messages
    If you want to print debug messages in your JavaScript, try console.log("Log Message"). This is print your log messages to the firebug console (On the console tab). Again, this is really handy to make sure specific lines of code are being executed in a particular order.
  • Seeing error messages
    If your JavaScript is incorrect, it will often fail silently, leaving you confused as to if your code is working or not. But the firebug console will actually print useful error messages to the console and give you specific line numbers. This is awesome if you are not very familiar with JavaScript.
  • Testing JavaScript at runtime
    Again, this one uses the firebug console. At the bottom of the console, there is a command prompt that has starts with “>>>”. You can type any JavaScript here, and it will be executed on your page immediately. This is handy for checking out the results of function calls, or just to experiment a little.

Other Miscellaneous Features

  • Viewing HTTP requests
    Is there anything the console can’t do? The console will show you any HTTP requests that your page is making. It shows the type (GET, POST, etc), and to what URL. It also tells you if the request was successful, and gives you the error responses if they weren’t. This is pretty handy since it isn’t always obvious what rails routing will do.
  • Firebug in another window
    Firebug doesn’t have to cover the bottom quarter of the screen! Pressing Ctrl + F12 will open firebug in a new window. This is particularly awesome if you have 2 monitors.

Hopefully this post has been useful to some people. I’m sure there are still tonnes of features that I missed, but these are just the ones that I found most helpful and used most often. Feel free to add your own favorite firebug features to this post.

Written by Erik

November 30th, 2011 at 11:10 am

Leave a Reply