Changing the JavaScript Debugger's Display

There are two things you can style: the source code display, and the interactive view.

Source Code

First, create a CSS file setting what you want - for example, you can make the text smaller.

Second, tell JSD to use this "motif" (file that controls how it looks). You use the preference "services.source.css" for this, so you would save the above CSS file, or write your own, and open it up in the browser so you have a file: URL. Then enter (into the interactive view):

/pref services.source.css

followed by the file: URL from the browser. You can use the CSS sample above, if you like, by doing:

/pref services.source.css http://james-ross.co.uk/mozilla/venkman/code-smaller.css

Unfortunately existing source views won't update, but the setting is saved so you only need to do it once.

Interactive View

Again we start by making a CSS file, and again the sample motif changes it to be smaller text, and using a particular font.

This time the preference is "sessionView.currentCSS", which can be set using:

/pref sessionView.currentCSS

As before, you need to append a file: URL to change the setting, and the sample here can again be used:

/pref sessionView.currentCSS http://james-ross.co.uk/mozilla/venkman/input-smaller.css

This will need JSD to be restarted, and the preference is saved, then it next start it'll use the new motif.