WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

JavaScript Debugging



When writing JavaScript, it can be a pain without a debugging tool.


JavaScript debugging

It is difficult to write JavaScript programs without debugging tools.

Your code may contain syntax errors, logic errors, and these errors are more difficult to find without debugging tools.

Usually, if there is an error in JavaScript, there is no prompt message, so you can't find the location of the code error.

Note Usually, you will make an error when writing a new JavaScript code.

JavaScript debugging tools

Finding errors in program code is called code debugging.

Debugging is difficult, but fortunately, many browsers have built-in debugging tools.

The built-in debugging tool can be started or closed, and serious error messages will be sent to the user.

With the debugging tool, we can set breakpoints (where the code stops executing) and detect variables while the code is executing.

In general, to enable the debugging tool in the browser, press the F12 key and select "Console" in the debugging menu.


The console.log() Method

If your browser supports debugging, you can use the console.log () method to print JavaScript values on the debug window:/p>

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 »

Set a breakpoint

In the debug window, you can set breakpoints for JavaScript code.

At each breakpoint, JavaScript code execution stops for us to check The value of a JavaScript variable.

After checking, you can re-execute the code (such as the play button).


debugger keyword

debugger keyword is used to stop JavaScript execution and call a debug function.

This keyword has the same effect as setting a breakpoint in the debugging tool.

The debugger statement will not work without debugging available.

Enable debugger, the code stops executing before the third line.

Example

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

Major Browsers' Debugging Tools

Usually, to enable the debugging tool in a browser, press the F12 key and select "Console" in the debugging menu.

The steps for each browser are as follows:

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".