Preventative tools for typos in class and id names [closed]

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

Want to improve this question? Update the question so it's on-topic for Stack Overflow.

Closed 8 years ago.

Improve this question

Are there any basic debugging tools for HTML/CSS/JavaScript that would help to identify typos?

For times when "#fron" should be "#from". I'm not talking about the code itself, but for things like class names and ids.

I know there are robust IDEs, but just wondering if there are some fairly basic tools or extensions that I'm simply unaware of.

Before I post a question here, I try to review the code thoroughly, but I'm my own worst proofreader.

Answer 1

Two things I have found to be useful is this: http://blog.whatwg.org/vnu-parser-1-4

I use deadweight for the css: https://github.com/aanand/deadweight

Or ucss https://github.com/operasoftware/ucss

And for my client side rendering, i grab the page contents with phantomjs, then run it by vnu and deadweight/ucss.

Answer 2

I would say check this out as well. Ran the first two examples through firebug's console and got exactly what your looking for. Problem is the first(ilia choly's) shows only classes, although it's in an alert. The second example (MisterGreen's) is a lot cleaner, gives you both classes and ids but spits them into the console and gives you unnecessary results. Try it, pick one. No need to code it into your page. Worst part could be manually going through them all. How to get list of Css class use in the HTML file?