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:
- Click on the Bookmarks menu and select Manage Bookmarks…
- Click the New Bookmark toolbar button
- Enter JavaScript Console as the name
- 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.
.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.
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!
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;}
My web Firefox is missing JavaScript Console.Please help my done to donwload.Thank for help
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.
Hi
Please can any one help me to manage a stick up footer on the website for IE 5.0 +. I Think its with CSS or Javascript r both.
As you can see 1 on http://www.bmw.co.uk
Any kind of help will be appericiated
thanks
Imran Hashmi
http://www.visionstudio.co.uk
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?
I ran into some problems getting ChromeEdit installed when using FireFox 1.5.0.1. Here is some information on how to get ChromeEdit to work on this version of FireFox: http://forums.mozillazine.org/viewtopic.php?t=376000&postdays=0&postorder=asc&postsperpage=15&start=15
[...] I recently learned from a comment by Justin on decafbad how to easily remove the size restrictions on your Firefox sidebar. This can be very useful if you open up your JavaScript Console in the Sidebar or edit a website’s CSS in real-time right in your browser using Chris Pederick’s indespensible Web Developer Extension. [...]
I’m love this great website. Many thanks guy
Nice tip!
[...] I mentioned it to a couple coworkers and showed them a demo of it working on my machine. Instructions can be found here. Published Wednesday, January 31, 2007 2:03 AM by kelly Filed under: Web [...]
Thanks.
http://www.muzika.dk
Cudos: Terrific solution!
The following may help Firefox newbies like me. Things are different with Firefox 2.0.0.6 (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!
they only wanna do you dir. Zaid Bethanie.