Dust-Me Selectors Version 2.0

By James Edwards | November 26, 2007 | JavaScript

After many months of toiling in our secret underground laboratories, Dust-Me Selectors Version 2.0 is finally here!

If you’re one of the many people who made suggestions or commented on the original version, you’ll be pleased to know that the new version incorporates everything you asked for and more.

It was quite a challenge to bring all this together, particularly since Mozilla’s documentation is so … er … erratic (in fact for some functionality I had to look in Firefox’s source code just to figure out how it’s done!) But there’s nothing like a challenge to exercise the mind, and I think you’ll agree that the final result is well worth the gritty struggle.

To summarise the new features:

New spidering capability — it can spider either a Sitemap XML file, or an HTML sitemap (ie. it will spider one link deep from any page).
Shows which selectors have been used, as well as unused.
Data storage has been taken out of the preferences system and into the filesystem — data is stored in JSON files in a user-selectable
folder.
Better support for Conditional Comments — it can now recognise any number of stylesheets within a single comment.
Extended automation so it can re-parse a page automatically whenever the DOM changes programatically.
Comprehensive user preferences.
Support for Flock.
A spiffy new icon, courtesy of Alex Walker

For more information, documentation and to install the new version, check out Dust-Me Selectors on sitepoint.com

James Edwards

James Edwards (aka brothercake) is a freelance web-developer based in the UK, specialising in JavaScript application development and building accessible websites. With more than a decade's professional experience, he is a published author, a frequent blogger and speaker, and an outspoken advocate of standards-based development.

More Posts - Website - Twitter

{ 29 comments }

Bob February 2, 2009 at 12:21 pm

It’s keep crashing on portable firefox 3 :(

brothercake June 24, 2008 at 3:16 pm

There’s a new version out today with FF3 support :)

Please report any continuing issues to that blog post — http://www.sitepoint.com/blogs/2008/06/24/dust-me-selectors-version-21/

dont June 21, 2008 at 2:04 am

I use this all the time.. its killin me not being able to use it with FF 3.0. Im about to create a portable FF2 just to accommodate.

I have subscribed to the RSS feed and will keep an eye on the download page

EoN604 June 19, 2008 at 1:01 pm

Hi guys,

Only just learned about this Dust-Me Selectors today from a friend who recommended it. Sounds like a fantastic idea, but doesn’t work in FF3! Any chance you could mod this to work? As I understand, it’s usually a very easy process to make a FF2 extension compatible for FF3. I look forward to using it!

Thanks,
Adam

Elpie June 18, 2008 at 3:49 pm

This extension is the only thing preventing me from using Firefox 3. I find it invaluable for site design and just had to add my voice to the calls for an upgrade :)

inSay June 3, 2008 at 11:09 pm

I love this tool, but I can’t declare function Block(){}, because you used it in the global namespace. Please, use own namespace for this objects.

xfinx May 28, 2008 at 7:46 pm

I noticed that the tool can not handle url’s which do not begin with http:// but with //
All browsers support the //

Cheers and thanks for the great tool!

Alex Y May 22, 2008 at 10:01 pm

strange but it doesn’t eat mine google-generated xml sitemap..
It’d be helpfull if you provide xml sample some place here.

PS HTML with links works fine.

Dimitri April 18, 2008 at 7:29 am

Fantastic tool! Works like a dream.
I’d love it more if it could delete unused selectors for sites I’m designing and want to clean up the css – either through a preview of files on my computer (before uploading) or through ftp access (especially for php or asp sites)

Marco Luthe April 5, 2008 at 5:55 am

[Update]
Root directory wouldn’t work either… only a few posts / pages have been spidered… what a pity.

OK, as I can’t subscribe to comments here, can anyone upfate me via http://www.saphod.net/contact/ if anything important happens? As I said: I love the idea of this plugin.

Marco Luthe April 5, 2008 at 5:49 am

Unfortunately, it’s not working with my Wordpress blog…

Tried the spider function. I have a sitemap which is generated with the Google Sitemap Generator plugin by Arne Brachhold. Pointing to that file (www.saphod.net/sitemap.xml) did not work and took ages without anything happening.

Then I just tried “www.saphod.net”… but as I was still logged into my WP account, dust-me tried to analyze even the WP admin folder.

So I logged out and tried the root directory again… seemed to work, I mean it finished… well, I’ll have to take a good look at the results now if they are any good.

I’m sorry, but I have to share Wolf_22′s opinion:
It still needs some work… sorry.

But a great idea, nonetheless!

Wolf_22 March 29, 2008 at 12:40 pm

…This plugin needs some work.

dmkash March 23, 2008 at 2:44 am

I can’t wait for a version that works with Firefox 3! Will there be an announcement when this is updated? Thanks!

Jan March 12, 2008 at 7:10 pm

I cannot install Dust-Me Selectors – I only get an error message from the add-on installer (-207) that it is not a valid installation file. I’m using Firefox 2.0.0.12 under MacOS 10.4.11

brothercake February 12, 2008 at 9:05 pm

Thanks for the heads-up, that was a permissions problem that’s fixed now.

AlexW February 12, 2008 at 8:51 pm

Hi James, I would LOVE to test your plugin, but http://www.sitepoint.com/dustmeselectors/ is offline :/?

Weird, Tom. We’ll look into that first thing tomorrow (AU time).

Tom February 12, 2008 at 6:51 pm

Hi James, I would LOVE to test your plugin, but http://www.sitepoint.com/dustmeselectors/ is offline :/?

Bogeyman February 1, 2008 at 3:24 am

Simply Superb

brothercake January 29, 2008 at 12:57 pm

Thanks for the info on these various issues – I shall investigate.

Matthew January 29, 2008 at 12:24 pm

Trying it this way to see if the code paste works better. The comment is for the delete line around line 277:


if(typeof used[current_key][current_index] != 'undefined')
						{
							//delete used[current_key][current_index];
						}

Matthew January 29, 2008 at 12:21 pm

I found this extension didn’t work at all as I navigated my site. It only seemed to be able to capture everything on a single page.

I write Firefox extensions as well and decided to look through the code.

To get the extension to aggregate unused items properly, I had to comment out this line in dustmeselectors.js:
if(typeof used[current_key][current_index] != 'undefined') { //delete used[current_key][current_index]; }

It seems that it was deleting the key from the used tab without readding it. So redundancy meant kill both of them.

Anyway, with that change it worked great for my site. Thanks much.

Michael M. January 20, 2008 at 7:06 am

Hi,

Great tool, but it didn’t quite do what I had in mind.

I’m merging/copying/moving/cleaning a whole bunch of style sheets, and I need a way to find all the cases on a page where the code calls for a class=”fubar”, but fubar is not efined in the current style sheet.

I realize that CSS is intended to not fail because a style is not defined, but it’s a pain to cross reference.

Any suggestions? or hope for a mod to Duster?

mm.

internet4u December 2, 2007 at 9:08 pm