First, lets add the console to our sidebar:
- Click on the Bookmarks menu and select Manage Bookmarks…
- Click the New Bookmark toolbar button
- Enter chrome://global/content/console.xul as the location
- Check the Load this bookmark in the sidebar checkbox
- 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.
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.