5

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.

jsuissa
  • 1,754
  • 6
  • 30
  • 64
  • 4
    And how such a tool would guess that `#fron` is a typo and not a new style rule for element with id `fron`? – dfsq Feb 10 '13 at 13:32
  • I remember seeing somewhere there was a program that would report CSS classes not used in your page. The program was geared towards optimization of load times and the goal would be to delete those lines of code and therefore make your file size smaller. However, something like this may be useful for your goal as well. – Raphael Rafatpanah Feb 10 '13 at 13:38
  • 1
    Perhaps this helps: http://stackoverflow.com/questions/3152045/what-tool-can-analyze-my-site-and-report-on-unused-unneeded-css – Raphael Rafatpanah Feb 10 '13 at 13:39
  • 1
    Yes, this extension for Firebug: [CSS Usage](https://addons.mozilla.org/en-US/firefox/addon/css-usage/) certainly is a good start. – jsuissa Feb 10 '13 at 13:46
  • 1
    And, if you don't already have it, Firebug https://getfirebug.com/ is a great resource too. Great question btw, because this will help me out as well! – Raphael Rafatpanah Feb 10 '13 at 13:51
  • Not to mention that you have to have Firebug installed for CSS Usage to work. – Raphael Rafatpanah Feb 10 '13 at 13:53
  • Yes. Firebug is great. Outside of having a second set of eyes and being more vigilant I was wondering if there was anything that really targeted at naming related typos because those seem to be the hardest to eliminate -- especially when they happen to also be legitimate proper names. – jsuissa Feb 10 '13 at 13:58
  • As far as copying your classes/ids from html to css/js (or any other way around) correctly is concerned, dblclick ctrl+c ctrl+v usually works for me. – Fabrício Matté Feb 10 '13 at 14:07

2 Answers2

2

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.

Michael Benin
  • 4,317
  • 2
  • 23
  • 15
1

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?

Community
  • 1
  • 1
ftairs
  • 54
  • 3