CSS Inspector (again)

25th March 2006

Since I last posted about it my CSS Inspector User JavaScript/Greasemonkey script has undergone a few little tweaks and changes.

I wrote this script to provide a simple way to debug stylesheets. To use it you shift click on a section of the page, the script then climbs the document showing you all the tag names, class names and ids of the elements under the point that was clicked on. It also allows you to view computed styles for these elements and set style values.

Since I originally released this script it has had a few small revisions. I thought it was probably about time I mentioned some of the new features:

Exciting New Features!

Highlight Presentational Attributes

As well as the tag names, class names and ids of the elements the script can now also display selected presentational HTML attributes, such as width, height, cellpadding etc… These are helpfully highlighted in red to remind you that these things should be done using CSS ;-)

The CSS Inspector showing the structure of a section of the moodle homepage.

Easy access to element computed styles

As well and being able to type in a property name to view the computed style of the selected element (as in the original script) there is now a drop down list containing related groups of CSS properties to view.

See changes live on the page

Get a quick preview of a CSS change without editing needing to edit any files.

Installation Instructions

Opera

In Opera you need to first create a folder to contain your User JavaScript files. Mine is at C:\andy\userjs. Download the CSS Inspector file and save it to this directory. Once this is done you need to tell Opera to use the User JavaScript and also where it should look for the files.

For Opera 9 these settings can be found in opera:config, Opera 9 TP 2 allows you to skip directly to the User JavaScript settings using opera:config#UserPrefs|UserJavaScript.

In opera:config you can use the search field to find the User JavaScript options

Check the User JavaScript option and fill in the path to your directory in the User JavaScript File field. Then hit OK to save your changes.

In Opera 8 the steps are pretty much the same, except for where you find the options. Go to Tools > Preferences… > Advanced > Content.

In Opera 8 the User JavaScript directory can be set through the preferences dialog

Click the JavaScript options button and fill in the path to your User JavaScript directory in the My JavaScript Files field.

By default the script will only be included on pages found on localhost, you’ll possibly (probably?) want to change this. So to choose which pages you would like the script to run on you can edit comment block at the top of the file, for example:

// ==UserScript==
// @include http://www.moddular.org*
// ==/UserScript==

Would include the file on all pages found on www.moddular.org. Opera’s tutorial Utilizing User JavaScript has more details on how you can control where to run your User scripts.

Firefox/Greasemonkey

For Firefox you need to install the Greasemonkey extension, at the time of writing the recommended version is 0.6.4 for Firefox 1.5. After this has been installed and Firefox has been restarted you should see some new options in your tools menu.

Greasemonkey adds additional options to your Tools menu to work with user scripts. For the time being the Install This User Script option is unavailable.

With Greasemonkey new installed browse over to CSS Inspector file, if you select the Tools menu you should now see that the Install This User Script… option which had previously been greyed out is available. Select this and Greasemonkey should tell you that the script has been installed successfully.

Now you can setup where you want the script to be run. Go to Tools > Manage User Scripts… where you can manage all your installed scripts including the CSS Inspector (which is listed as Inspector)

By default the script will be setup to run on pages served from localhost

From this dialog box you can use the Add, Edit and Remove options to choose which sites/pages the script should be run on.

Permalink. Posted on 25th March 2006 in CSS, JavaScript, Moodle, Projects.

Comments

  1. Hi Andy,

    I'm having trouble getting CSSI installed. I've reinstalled the latest version of Greasemonkey and am using FF 1.5.04. When I try to install the scripts from your page I get this message:

    Alert

    Error installing user script:
    [Exception… "Component returned failure code: 0x80520012 (NS_ERROR_FILE_NOT_FOUND)
    [nsIChannel.open]" nsresult: "0x80520012 (NS_ERROR_FILE_NOT_FOUND)" location: "JS frame ::
    chrome://greasemonkey/content/utils.js :: getContents :: line 167" data: no]

    Any ideas?

    Regards

    Ray

    # Posted by Ray on 6th June 2006.

  2. Hi Ray,

    It seems to be a known greasemonkey problem - Does this help?

    # Posted by Andy on 12th June 2006.

  3. Hi,

    I have a problem in Firefox 1.5.0.6. I can't move the blocks around like before !!!

    # Posted by Salim on 7th August 2006.

Sorry, comments for this item are currently closed.

Of Interest

Hangouts

Listening