Google Chrome Developer Tools >

Google Chrome Developer Tools Breakpoints Tutorial

This tutorial covers debugging JavaScript using regular breakpoints set on JavaScript code and breakpoints targeted at UI and network aspects of an application.

Table of Contents

Before You Start

If you are a Web Developer and want to get the latest version of Developer Tools, you should use the Google Chrome release from the Developer Channel. You'll need Google Chrome 9.0.587.0 or later to work through all examples in this tutorial.

How to Access the Developer Tools

To access the Developer Tools select the Wrench menu at the top-right of your browser window, then select Tools -> Developer tools, or use the Control-Shift-I shortcut.

How to Use Scripts Panel

To access the Scripts panel select Scripts icon on the Developer Tools window.




The Scripts panel allows you to see all the scripts that are part of the inspected page. History buttons, a drop-down list, and standard controls to pause, resume, and step through code are provided below the panel selection icons. A button to force a pause at exceptions is located at the bottom of the window.

Regular JavaScript Breakpoints

  1. Open the Developer Tools by hitting the Control-Shift-I shortcut
  2. Open Scripts panel and select "script.js" from scripts drop-down
  3. Set breakpoint on line 19 by clicking the line gutter (you can use the Control-G shortcut to reveal a line in a large file)
  4. Move your mouse over this page
  5. You should stop on the breakpoint
  6. Hover over the source code to inspect local and global variables, function arguments etc.
  7. Delete the breakpoint by clicking the blue tag breakpoint indicator
  8. Click Continue button or hit F8 in Developer Tools window to resume



All the breakpoints you have set appear under Breakpoints in the right-hand sidebar. Clicking on the entry jumps to the highlighted line in the source file. Once you have a breakpoint set, right click on the blue tag breakpoint indicator to set a conditional statement for that breakpoint. Type an expression and the breakpoint will only pause only if the condition is true.

Breakpoints in Dynamic JavaScript

  1. On Scripts panel select "dynamicScript.js" from scripts drop-down and set breakpoint on line 2
  2. You should stop on the breakpoint
  3. Click Continue button or hit F8 in Developer Tools window to resume



Notice the "//@ sourceURL=dynamicScript.js" line at the end of dynamicScript.js file, it gives a name to a script created with eval.
Breakpoints can be set in dynamic JavaScript only if it has user supplied filename.

Pause on Next JavaScript Statement

  1. Click Pause button
  2. Move your mouse over this page
  3. You should stop in onMouseOver function
  4. Click Continue button or hit F8 in Developer Tools window to resume



Pause on Exceptions

  1. Click Pause on exceptions button at the bottom of the window to switch to Pause on all exceptions mode
  2. You should stop in raiseAndCatchException function
  3. Click Continue button or hit F8 in Developer Tools window to resume



Pause on Uncaught Exceptions

  1. Click Pause on exceptions button again to switch to Pause on uncaught exceptions mode
  2. You should not stop in raiseAndCatchException function since exception is caught
  3. You should stop in raiseException function
  4. Click Continue button or hit F8 in Developer Tools window to resume



Breakpoints on DOM Mutation Events

  1. Right click on "Parent Element" below and select Inspect Element from context menu
    Parent Element
  2. Right click on Elements' panel <div id="parent" ...> element and select Break on Subtree Modifications
  3. You should stop on appendChild function call
  4. Click Continue button or hit F8 in Developer Tools window to resume



Breakpoints on XHR

  1. Click Add button on XHR Breakpoints sidebar pane on the right side of Scripts panel
  2. Type "data.txt" in text input and hit enter
  3. You should stop on send function call
  4. Right-click on newly created breakpoint and select Remove Breakpoint context menu item
  5. Click Continue button or hit F8 in Developer Tools window to resume



To edit URL filter, double click on XHR breakpoint entry in XHR Breakpoints sidebar pane. XHR breakpoint with empty URL filter will match any XHR.

Breakpoints on JavaScript Event Listeners

  1. Expand Event Listener Breakpoints sidebar pane on the right side of Scripts panel
  2. Expand Mouse entry
  3. Set a mouseout Event Listener breakpoint by clicking on the checkbox near the mouseout entry



  4. Move your mouse across the box below:
  5. Hover me!
  6. You should stop on mouseout event handler
  7. Click Continue button or hit F8 in Developer Tools window to resume



List of Supported Events

  1. Keyboard: keydown, keypress, keyup, textInput
  2. Mouse: click, dblclick, mousedown, mouseup, mouseover, mousemove, mouseout, mousewheel
  3. Control: resize, scroll, zoom, focus, blur, select, change, submit, reset
  4. Clipboard: copy, cut, paste, beforecopy, beforecut, beforepaste
  5. Load: load, unload, abort, error
  6. DOM Mutation: DOMActivate, DOMFocusIn, DOMFocusOut, DOMAttrModified, DOMCharacterDataModified, DOMNodeInserted, DOMNodeInsertedIntoDocument, DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMSubtreeModified, DOMContentLoaded
  7. Device: deviceorientation, devicemotion

More Information

For more information, follow the links below: