JavaScript debugger

JavaScript debugger statement allows you to inspect every step. JavaScript debugger statement has not effect until the developer panel has not open in browser.

JavaScript debugger statement not only use for finding bugs, but also you can learn how to execute JavaScript statement. Also you can also modify states that can help to trace the bugs.

You can add the debugger statement anywhere in the program. Execution pause, when comes to debugger statement. Now you can able to trace program, you can step move to continue, step in, step out, step over and deactivate the debugger.

You may also figure out what the perception of the problem in a program they have written and have small bugs, called "errors".

Syntax

debugger;

Example

<script>
    var a = 10, b = 15;
    document.writeln("a: " + a +" \nb: " + b);
    
    document.writeln("Next to debugger statement");
    debugger;

    document.writeln("In console panel modify state");
    document.writeln("a: " + a);
    document.writeln("b: " + b);
</script>

Run it...   »

JavaScript debugger Statement

How to change states,

1. F12 - Open Developer Panel.
2. You need to reload the page, because debugger not effect until the developer panel has not open in browser.
3. In Developer Panel » Source Tab - See the highlight line, that line having a debugger keyword. That indicates your program execute pause on this line.
4. F10 - Move execution to next line.
   Optionally, If current line having JavaScript function and you want to trace that function press F11 and Shift+F11 to move execution step in and step out of current function.
5. Navigate to console tab, enter a and b one by one to return assigned variable value, here you can also reassign existing variables values. example. a = 15, b =15
6. JavaScript is runtime game changer, you can modify existing state and execute rest of the program using modified values.

How to Open Developer Tools (debugger JavaScript)

Google Chrome

1. Chrome open Customize and control main menu select More Tools » Developer tools, developer panel will appear on browser window.
2. Keyboard shortcuts in F12 to open developer tools.
3. Right-click of the page, select Inspect element from the context menu.

Mozilla Firefox

1. Firefox open Menu » Developer select Debugger, debugger panel will appear on browser window.
2. Keyboard shortcuts in Ctrl + Shift + S to open debugger panel.
3. Right-click of the page, Select Inspect element (Q) from the context menu.

Internet Explorer

1. IE open Tools (Alt+X) select F12 Developer Tools, developer panel will appear on browser window.
2. Keyboard shortcuts in F12 to open developer tools.
3. Right-click of the page, select Inspect element from the context menu.

Safari

1. Enabling Web inspector development tools
   1. Safari open "Preferences" select "Advanced" tab, checked "Show Develop menu in menu bar".
2. Open Web Inspector
   1. Safari open Develop menu, select Show Web Inspector, web inspector will appear on browser window.
   2. Keyboard shortcuts in Option + Command + I to open inspector tools.
   3. Right-click (or Control-click) of the page, Select Web Inspector from the context menu.
3. Dock into Toolbar menu
   1. Safari open View menu, select Customize Toolbar, drag the Web Inspector to your Toolbar.

Opera (open Opera Dragonfly)

1. Opera main Menu, select View choose Developer Tools » Opera Dragonfly.
2. Keyboard shortcuts in Ctrl + Shift + I on Windows and Linux, or Command + Option + I on Mac to open Opera Dragonfly.
3. Right-click (or Control-click) an element of the page, Select Inspect element from the context menu.

• « Previous
• Next »