Debugging Javascripts with Chrome DevTools

Open DevTools

Once Chrome is loaded, you can open DevTools by pressing Ctrl+Shift+C (Windows) or Command+Option+C (Mac). Alternatively, you can Right Click > Inspect or Goto Chrome Menu > More Tools > Developer Tools.

How to use console object in Javascript: Mastering Javascript console methods

Search specific element in DOM tree

Navigate to Elements tab by opening command panel (Ctrl+Shift+P) > Show Elements and press Ctrl + F to open search box.

Eg: To find Div tag with class=”header-desktop”

div[class="header-desktop"]

Similarly, you can use inspect() method in console to navigate specific DOM element.

inspect(document.querySelector("div[class='header-desktop']"));

More Info: https://developers.google.com/web/tools/chrome-devtools/dom

Add DOM change breakpoints

DOM change breakpoint pauses the code when it changes a DOM node or its children.

1. Click the Elements tab (Ctrl+Shift+P > Show Elements).
2. Go to the element that you want to set the breakpoint on.
3. Right-click on the element.
4. Break on > Subtree modifications, Attribute modifications, or Node removal.

• Subtree modifications. Triggered when a child of the currently-selected node is removed or added, or the contents of a child are changed. Not triggered on child node attribute changes, or on any changes to the currently-selected node.
• Attributes modifications: Triggered when an attribute is added or removed on the currently-selected node, or when an attribute value changes.
• Node Removal: Triggered when the currently-selected node is removed.

Add line-of-code breakpoints in DevTools

1. Go to Sources tab.
2. Open the file containing the line of code you want to break on.
3. Go the line of code.
4. Click on the line number needs a breakpoint. A blue/green icon appears on on the line number column and will list on Breakpoints pane in the console. Click again on the line number to remove the breakpoint or use Brakepoints pane.
   

Alternatively, you can set breakpoint to activate only when specific condition is met.

To set a conditional line-of-code breakpoint:

1. Navigate to Sources tab.
2. Open the file containing the line of code you want to break on.
3. Go the line of code.
4. Right click on the line number.
5. Select Add conditional breakpoint.
6. Enter your condition in the popup.
7. Press Enter to activate the breakpoint. An orange icon appears on top of the line number column.
   

Add line-of-code breakpoints in source code

When there is debugger; statement in the code, Chrome will automatically pause execution at the line in the code.

debugger;

If you don’t want execution to be paused on specific debugger statement,

1. Open the  Sources tab.
2. Open the file containing the debugger.
3. Go the line of code.
4. To the left of the line of code is the line number column. Right-click it.
5. Select Never pause here.

Add event listener breakpoints

Use event listener breakpoints when you want to pause on the event listener code that runs after an event is fired.

1. Click on the Sources tab.
2. Expand the Event Listener Breakpoints pane. DevTools shows a list of event categories.
3. Check one of these categories to pause whenever any event from that category is fired, or expand the category and check a specific event.

Navigate through breakpoints

Once execution is paused, If it is not the line of code you looking for, press Step over line of code (F10) then it will execute next line of code without going inside the function.

For an example, following code will pause at line 2. If you press F10 (step over line of code), it will goto line 3 which calls funcB. If you need to go inside the funcB method, press Step into next function call (F11) then it will goto line 7. Else, press F10 again to execute line 4 without debugging inside funcB method. When you inside the method, if you need to come out press Step out of current function (F12).

function funcA() {
  debugger;
  var f1 = funcB();
  alert('test');
}
function funcB() {
  var x = 10;
  return x;
}
funcA();

While paused on a line of code, Call Stack pane shows the order of functions being called to reach the breakpoint.

Scope pane shows variables defined in Local and Global scope with values which can be edited by double clicking.

More Info: https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints

Add Logpoints

Use Logpoints to log messages to the Console without cluttering up your code with console.log() calls.

To add a logpoint:

1. Right-click the line number where you want to add the Logpoint.
2. Select Add logpoint. The Breakpoint Editor pops up.
3. In the Breakpoint Editor, enter the expression that you want to log to the Console.
4. Press Enter or click outside of the Breakpoint Editor to save. 
5. The next time that the line executes, DevTools logs the result of the Logpoint expression to the Console.

Watch expression values

1. Go to Sources tab.
2. Click Add Expression  to create a new watch expression.
3. Click Refresh to refresh the values of all existing expressions. Values automatically refresh while stepping through code.
4. Hover over an expression and click Delete Expression to delete it.
   
   

Create Live Expressions

Live expressions let you monitor expression values (eg: Variable) in near-realtime.

1. Click Create Live Expression . The Live Expression text box appears.
2. Type Control+Enter or Command+Enter (Mac) to save the expression, or click outside of the Live Expression text box.
   

Enable Code folding

Code folding makes it easy to navigate through large functions in Javascript. To enable,

1. Press F1 to open Settings.
2. Under Settings > Preferences > Sources enable Code folding.

Unminify code

1. Click the Sources tab.
2. Click Format icon to make code more readable.
   

Ignore unwanted scripts

If you found an irrelevant script which is breaking or displaying unwanted console output, you can ignore it by using Blackboxing.

To blackbox a script from the Editor pane:

1. Open the file.
2. Right-click anywhere.
3. Select Blackbox script.

To blackbox a single script or pattern of scripts from Settings:

1. Open Settings.
2. Go to the Blackboxing tab.
3. Click Add pattern.
4. Enter the script name or a regex pattern of script names to blackbox.
5. Click Add.