Updated: Open Firefox JavaScript Console in a Sidebar

Yesterday I posted a tip on how to add the Firefox JavaScript Console to the sidebar panel. The one problem with the method, is that you can only expand the panel to a certain width, and even at that width, important debugging information – like the line number of the error and the page of the error, is cut off. There is a solution and it involves adding two CSS declarations to your userContent.css file. With that being said, here are the updated instructions to placing the JS Console in your sidebar.

First, lets add the console to our sidebar:

  1. Click on the Bookmarks menu and select Manage Bookmarks…
  2. Click the New Bookmark toolbar button
  3. Enter JavaScript Console as the name
  4. Enter chrome://global/content/console.xul as the location
  5. Check the Load this bookmark in the sidebar checkbox
  6. Click OK

Now let’s modify the console display so that it does not cut off the important debugging information.

This is done by using CSS and the Firefox configuration file named userContent.css . Before we start modifying our userContent.css file, I would recommend that you install an extension named ChromeEdit that simplifies the process of modifying your Firefox configuration files. So before you enter the CSS code listed below, go and install this extension (note: you’ll need to restart your browser after installation, so you may want to bookmark this page).

Now that you have CromeEdit installed, click on the Firefox Tools menu and then click on the menu item labeled Edit User Files. A new window will appear that has five tabs across the top. Click on the tab that is labeled userContent.css. Next copy the CSS code below and paste it into the userContent.css file, then click the Save button.

.console-row-msg {max-width: 300px !important; display: -moz-box !important; -moz-box-orient: vertical !important}

.console-row-file {max-width: 300px !important; display: -moz-box!important; -moz-box-orient: vertical !important}

Now, restart your browser and click on the bookmark to open the JS Console!

The above rules make use of the *!important* property value to override any rules that may already exist within the page that is being loaded. In the first rule, the console has an element with an class of console-row-msg and we are setting the width of that element to 300 pixels. Next, we are telling that element to have a box orientation of vertical. This stacks all the elements contained within element one on top of the other. The same rule is applied to the next element that has a class of console-row-file.

11 thoughts on “Updated: Open Firefox JavaScript Console in a Sidebar

  1. this is the freshest stuff since coke in cans! could you maybe order the search results by date? a little improvement to this otherwise so great site!

  2. Thanks for the great tip. You need to add semi-colons to the end of your css declarations. I also found it beneficial to significantly reduce the font-size so it didn’t take up as much space. Here is what I am using:

    .console-row-msg {max-width: 300px !important; display: -moz-box !important; -moz-box-orient: vertical !important; font-size: xx-small;}

    .console-row-file {max-width: 300px !important; display: -moz-box!important; -moz-box-orient: vertical !important; font-size: xx-small;}

  3. Thanks, this has been very useful! I suggest adding something like this to userChrome.css so you have more flexibility in sizing the sidebar:

    /* Set the sidebar size constraints */
    #sidebar {
    max-width: 75% !important;
    width: 150px !important;
    min-width: 150px !important;

    Tweak the settings according to your prefs.

  4. Thanks for the suggestions. I am trying to use this with Mozilla 1.7.x, along with a number of other extensions for web development. Things look OK, but there is no option that I can see to load the bookmark for the JAVA console to the sidebar. Is there a way to do this without the check box in the Bookmarks property?

  5. Cudos: Terrific solution!

    The following may help Firefox newbies like me. Things are different with Firefox (for Win XP at least).
    a) “Manage Bookmarks …” now called “Organize Bookmarks …”
    b) Don’t be surprised if “ChromeEdit” can’t be downloaded. The message I got when I tried says it currently only works the Firefox 1.x. So used EditPlus2, opened C:\Program Files\Mozilla Firefox\defaults\profile\chrome\userChrome-example.css and saved it as userCrome.css. Then edited it as suggested above.

    Works beautifully. I no longer have to struggle with a floating console.

    However, Caldwell’s suggestion does not seem to work in Firefox 2.x. Thanks, anyway!

Comments are closed.