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:
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
cellpadding etc… These are helpfully highlighted in red to remind you that these things
should be done using CSS ;-)
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.
Get a quick preview of a CSS change without editing needing to edit any files.
In Opera 8 the steps are pretty much the same, except for where you find the options. Go to Tools > Preferences… > Advanced > Content.
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==
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.
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)
From this dialog box you can use the Add, Edit and Remove options to choose which sites/pages the script should be run on.
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:
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]
# Posted by Ray on 6th June 2006.
It seems to be a known greasemonkey problem - Does this help?
I have a problem in Firefox 18.104.22.168. I can't move the blocks around like before !!!
# Posted by Salim on 7th August 2006.
Sorry, comments for this item are currently closed.