Updated: Open Firefox JavaScript Console in a Sidebar

by Tom Mullaly on April 7, 2005

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.

Be Sociable, Share!