DEV Community

AdelabuAderonke
AdelabuAderonke

Posted on

What you need to know about Javascript Debugger.

The process of finding and removing errors in a computer program is referred to as "Debugging". If you have written one or more codes you will definitely be familiar with Code debugging(finding and fixing errors in a computer program).
All modern browsers have a built-in Javascript Debugger. Built-in debuggers can be turned "ON" and "OFF" which ensure error is being reported to the user.
Code can be debugged in javascript by:
Setting Breakpoint: Use Chrome’s developer tools or Firebug to locate the line of JavaScript, then set the breakpoint with the mouse.
To do it in Chrome, first, open the developer tools
Select the Scripts tab.
Click the little folder icon on the far left.
Navigate to the source file where you want to set the breakpoint.
Find the line in question, then click the line number to set the breakpoint (a little highlighted triangle will appear).
When the breakpoint is fired, you get access to the watches section where you can run arbitrary expressions, see all the variables in scope, and the call stack.
Using Debugger keyword:
var x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;
You activate debugging in your browser by pressing F12 then select console in the debugger menu
You can also follow these steps:
Chrome
Open the browser.
From the menu, select "More tools".
From tools, choose "Developer tools".
Finally, select Console.
Firefox
Open the browser.
From the menu, select "Web Developer".
Finally, select "Web Console".
Edge
Open the browser.
From the menu, select "Developer Tools".
Finally, select "Console".
Opera
Open the browser.
From the menu, select "Developer".
From "Developer", select "Developer tools".
Finally, select "Console".
Safari
Go to Safari, Preferences, Advanced in the main menu.
Check "Enable Show Develop menu in menu bar".
When the new option "Develop" appears in the menu:
Choose "Show Error Console".

Top comments (0)