What is the best way to debug JavaScript and CSS?

Question

There are many tools for debugging JavaScript and CSS. Firebug, "Alert", Script Debugger, MSE7.exe

I was wondering if anyone could listen to which one is the best and easiest tool for debugging JavaScript and CSS issues?

thanks

Answer 1

In terms of CSS, Firebug has the Style and Compute tabs. Just select an item and check these tabs. I can not come up with any CSS problem that cannot be solved with them.

Answer 2

Firebug and Chrome Dev tools are pretty much the gold standard client side.

Chrome docs:

http://code.google.com/chrome/devtools/docs/overview.html

Firebug docs:

http://getfirebug.com/wiki/index.php/Main_Page

Answer 3

For me, it is best to use Firebug (especially in Firefox).

Instead of using Alert messages, did you try console.log ("your message")? This will allow you to click warning windows and display messages in the firebug console.

Answer 4

My personal choice is Chrome with developer tools. Inspect the item for css debugging and the Scripts tab for debugging javascript source code. You can also use js logging console

But in fact, the website should also support debugging. In production versions, as a rule, css and js files are minimized and combined, which is difficult to debug.

Answer 5

Firefox: Firebug
IE: F12 and alert

Answer 6

I am a greedy Firebug user, but another think you should think that this is linting (check the rules and best practices). This will not only help you learn some of the best practices, but also help you identify coding problems before you get to your browser.

Here is the js lint web tool where you have to paste your code. Another alternative would be to find a plugin or extension for your IDE. For example, if you were eclipse , you can install the jslint plugin and check your code when writing it.

Answer 7

IE F12 is too slow to debug. With heavy web applications, the browser will depend on for centuries.