WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

JavaScript Debugging


You will before long get lost, composing JavaScript code without a debugger.


JavaScript Debugging

It is hard to compose JavaScript code without a debugger.

Your code may contain grammar mistakes, or sensible blunders, that are troublesome to diagnose.

Often, when JavaScript code contains mistakes, nothing will occur. There are no mistake messages, and you will get no signs where to scan for errors.


JavaScript Debuggers

Searching for mistakes in programming code is called code debugging.

Debugging isn't simple. In any case, luckily, all advanced programs have an implicit debugger.

Built-in debuggers can be turned on and off, constraining blunders to be accounted for to the user.

With a debugger, you can likewise set breakpoints (places where code execution can be halted), and analyze factors while the code is executing.

Normally, generally pursue the means at the base of this page, you enact investigating in your program with the F12 key, and select "Console" in the debugger menu.


The console.log() Method

If your program underpins investigating, you can utilize console.log() to show JavaScript values in the debugger window:

Example

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>
Try it Yourself »

Setting Breakpoints

In the debugger window, you can set breakpoints in the JavaScript code.

At each breakpoint, JavaScript will quit executing, and let you inspect JavaScript values.

After looking at qualities, you can continue the execution of code (normally with a play button).


The debugger Keyword

The debugger watchword stops the execution of JavaScript, furthermore, calls (if accessible) the troubleshooting function.

This has indistinguishable capacity from setting a breakpoint in the debugger.

If no troubleshooting is accessible, the debugger articulation has no effect.

With the debugger turned on, this code will quit executing before it executes the third line.

Example

var x = 15 * 5;
debugger;
document.getElementbyId("demo").innerHTML = x;
Try it Yourself »

Major Browsers' Debugging Tools

Normally, you initiate investigating in your program with F12, and select "Console" in the debugger menu.

Otherwise pursue these steps:

Chrome

  • Open the browser.
  • From the menu, select tools.
  • From instruments, pick engineer tools.
  • Finally, select Console.

Firefox Firebug

  • Open the browser.
  • Go to the web page:
    http://www.getfirebug.com
  • Follow the guidelines how to:
    install Firebug

Internet Explorer

  • Open the browser.
  • From the menu, select tools.
  • From instruments, pick engineer tools.
  • Finally, select Console.

Opera

  • Open the browser.
  • Go to the webpage:
    http://dev.opera.com
  • Follow the guidelines how to:
    add a Developer Console catch to your toolbar.

Safari Firebug

  • Open the browser.
  • Go to the webpage:
    http://extensions.apple.com
  • Follow the guidelines how to:
    install Firebug Lite.

Safari Develop Menu

  • Go to Safari, Preferences, Advanced in the principle menu.
  • Check "Enable Show Develop menu in menu bar".
  • When the new choice "Develop" shows up in the menu:
    Choose "Show Error Console".