Software to debug HTML

August 11, 2004 2:04 PM

It would be nice if there was some favelet, firefox extension, or web-based app that would 1) scrape an html page for all the spans and ids on the page 2) compare this list to the stylesheet and 3) point out the elements that aren't in use any longer.

I haven't found anything like this, and I'm wondering if anyone else has.
posted by jragon to computers & internet (7 comments total)

Python + BeautifulSoup.
posted by five fresh fish at 2:35 PM on August 11, 2004

It'd be pretty easy to do in Perl too, especially with the help of some CPAN modules.
posted by thebabelfish at 3:08 PM on August 11, 2004

Not sure what you mean by having it scrape the spans and ids...presumably you mean the classes and ids. And by elements, I assume you mean unused selectors in the CSS file. (I'm not trying to be difficult, but, in the off-chance someone would want to write such a bookmark, it'd be good for them to know exactly what was needed.)

If that's what you meant then, I agree, that'd be a great little tool to have. Seems like Dreamweaver, or some other code editor, would do well to incorporate such a feature.
posted by davebug at 3:19 PM on August 11, 2004

presumably you mean the classes and ids
...
by elements, I assume you mean unused selectors in the CSS file

Right, that :)

Yes, I could write something like this in perl or python, but I'd rather it be done as a firefox extension. By someone else ;)
posted by jragon at 9:56 PM on August 11, 2004

Oooh ooh ooh, I want one too, as a Firefox or Dreamweaver extension. Was just wishing for that yesterday..
posted by Pericles at 1:46 AM on August 12, 2004

BeautifulSoup really ought to make it dead easy. I wrote a screen scraper for house listings that automagically goes through several pages looking for new listings. Took all of a couple hours to go from zero to hero, and about thirty lines. Not bad for someone who seems to be a Really Bad Programmer.
posted by five fresh fish at 11:09 AM on August 12, 2004

O_O Talk about coincidences!

I'm in the middle of writing something like this in PHP right this moment (prototyped in Python, but without anything like BeautifulSoup--I should look into that). I'm over the main text-parsing hump (stylesheet-wise, anyway, but not for HTML yet) and am starting the process of making it actually useable.

Eventually I hope to use it to take in an entire HTML project + CSS stylesheet and link everything together as much as possible--e.g. you can look at the markup of one of the pages, select an individual tag, and see all the different styles which affect it (along with anything else you can possibly imagine). The original use was exactly as jragon imagined, to check for unused CSS selectors in a stylesheet (My Python script got this far, actually, and it seemed to work pretty well :D).

Once it was far enough along I was going to start showing it to people, so if anyone is interested, drop me a line :)

Caveat: while I wrote the parser for CSS myself, I know there are HTML (and apparently JavaScript has this built-in to some degree) parsers for Python and probably PHP as well, and intend to make use of that for the latter part of this project instead of reinventing the wheel (again?).
posted by cyrusdogstar at 1:22 PM on August 12, 2004