How To Debug Javascript Code Or Functions?

I have some Javascript code. I want to trace errors and debug it. how to do it ?

Solution 1:

It used to be that debugging in javascript was quite limited. You could post alerts to indicate variable states or print information to the web page. In the case of syntax error, it would simply not execute all the code (meaning you had to place alerts prior to the error to know where it was).

Thankfully, browsers have caught up. Firebug is very useful as well as Chrome's developer tools which both use breakpoints, expression evaluation, as well as a series of other useful tools for debugging in-browser. I would suggest you look into these. I believe also internet explorer has a developer tools section, but I've found that it isn't to my liking, however you're free to use whatever you need/require.

Solution 2:

It depends on the browser:

• Firefox: Download the Firebug Extension

• Opera: User the built-in Opera Dragonfly

• Webkit-based (Chrome, Safari, Rockmelt...): Press F12 to open the built-in Webkit debugger

• Internet Explorer 9+: Press F12 to open the built-in Developer Tools

• IE <=8: Install DebugBar

Most of these tools are accessible via these keyboard shortcuts:

• CTRL+SHIFT+I
• F12

Look for the "Console" Tab. There the browser prints various errors like JavaScript errors, resource not loaded errors etc. To manually write to the console, most browsers offer the console object which hosts functions for the console. Most commonly used is console.log('text').

Solution 3:

Google Chrome

F12 -> console.

in code use: console.log(variables);