Skip to main content

Tools for debugging html/css/javascript

Posted by survivant on November 10, 2008 at 10:34 AM PST

There are so many browsers and version of theses browsers that I became harder to create HTML that will run on all the possibles combinations. You need the appropriate tools to help you to debug.

There are few application and plugins you need to try :

- Firebug for Firefox (https://addons.mozilla.org/fr/firefox/addon/1843) : to debug everything : html, css, javascript, ajax ...

- Markup Validation Service (http://validator.w3.org/) : to validate your (x)html page.

- Internet Explorer Developer Toolbar (http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en) : Microsoft Firebug alternative : to debug html, css ...

- Install multiple versions of IE on your PC (http://tredosoft.com/Multiple_IE) : Install more than one version of IE on your PC.

- CSS Formatter and Optimiser (http://floele.flyspray.org/csstidy//css_optimiser.php?lang=en) : a nice CSS formatter and optimiser.

Theses are the tools that I'm using to debug the main page of Glassfish. Even with that.. it's hard :)

Related Topics >>

Comments

thanks. It will be useful. The thing that I didn't find was a real CSS editor that can found error in my CSS. Not syntax error, something more advanced. What I'm looking for is a tool that will display the rendered page and will allow me to fix error like position: relative for absolute.. a tool that will be able to detect that and propose me a quick fix. Like Eclipse have. The tools that I found were able to give me the options available for the CSS and give me a preview (useless because I could simply use a browser).

I also recommend trying IETester (http://www.my-debugbar.com/wiki/IETester/HomePage) which allows you to open browser tabs with individual IE engines. I like this even a little bit better than MultipleIE, which is a very cool package but caused me some problems while IETester just ran out of the box.

Yes, google for NetBeans and CSS or start reading http://www.netbeans.org/features/web/web-app.html

Look very promising. Will NB will support CSS editing too ? The main problem that I have with the Glassfish main page, is the hover that doesn't work the same way between FF and IEx. I didn't find a tool that will help me to generate complaint CSS.

Did you also try the NetBeans 6.5 (still RC) JavaScript Debugger? Read http://wiki.netbeans.org/JavaScriptDebuggerNetBeans6.5M1UserGuide