5 Mind-blowing firebug secrets

I spent my whole workday using Firebug, so discovering these was a huge productivity improvement for my workflow. Enjoy:

The power of Ctrl-Z
If you use Firebug console with the larger command line and you change tabs, the content of what you had typed gets erased. In the smaller command line you get what you previously entered by hitting the up arraw. In the larger command line this doesn’t work, but if you hit Ctrl-Z you’ll be able to go back through the history of what you typed. Pretty Awesome. You can even close the tab or open the console in a new one and it will still remember.
Programmatic Debugger
Being able to place breakpoints using the debugger in the script tab is pretty awesome, but if you need more flexibility (say, stop everytime a loop is run) you can use the debugger keyword inside your JS code and it will break every time it’s called, then you only have to hit play to resume until the next breakpoint
Legibility in the Console
If, for example, you have a long chunk of HTML code that you are appending to a node, it might be easier to indent it, but because it’s wraped in quotes you’ll get an “unterminated string literal” error. A solution to this is using backslashes (“\”) to indicate a line break. Just be sure to not leave any spaces to the right of the backslash.

Remember also, that you can use regular JS comments (“//”, “/**/”) in the console. This can be useful for quick toggling of certain lines


Docking to the Right
There is a great Firefox addon called Widerbug which allows you to dock Firebug to the right of your screen. I know it’s been around for some time, but I only found about it today, so that’s why I’m including it. The only problem I have with it is that once you select the Firefox tab where Widerbug is running it squishes the other tabs to the left, and I find it kind of annoying, but it’s a great way to use your widescreen monitor’s real estate
Messages From Your Code
Do yourself a favor and stop using the alert() call to debug your app, if you still are. A much more legible way is using console.info(). There are other varieties like console.log(), console.error(), etc., but I like the blue “i” this one shows.

Also, remember you can insert as many things as you want in a single message, so instead of doing this

console.info("My array has " + arr.length + " items")//notice the spaces

You should be doing this:

console.info("My array has", arr.length, "items", "look:", arr)


Happy coding, and tell me if you’ve found these useful.

Note: As of this writing I’m using Firebug 1.3.0b7

Bonus tip: Install the Monaco font, it’s so much nicer and Courier New.


3 responses to “5 Mind-blowing firebug secrets

  1. Thanks for the tips, really handy…

  2. thanks!
    every time I think I got firebug covered, I get a little more goodness popping up somewhere 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s