Use breakpoints to pause your JavaScript code. This guide explains each type of breakpoint that's available in DevTools, as well as when to use and how to set each type. For an interactive tutorial of the debugging process, see Get Started with Debugging JavaScript in Chrome DevTools.
Overview of when to use each breakpoint type
The most well-known type of breakpoint is line-of-code. But line-of-code breakpoints can be inefficient to set, especially if you don't know exactly where to look, or if you are working with a large codebase. You can save yourself time when debugging by knowing how and when to use the other types of breakpoints.
| Breakpoint Type | Use this when you want to ... |
|---|---|
| Line-of-code | Pause on an exact region of code. |
| Conditional line-of-code | Pause on an exact region of code, but only when some other condition is true. |
| Logpoint | Log a message to the Console without pausing the execution. |
| DOM | Pause on the code that changes or removes a specific DOM node, or its children. |
| XHR | Pause when an XHR URL contains a string pattern. |
| Event listener | Pause on the code that runs after an event, such as click, is fired. |
| Exception | Pause on the line of code that is throwing a caught or uncaught exception. |
| Function | Pause whenever a specific function is called. |
| Trusted Type | Pause on Trusted Type violations. |
Line-of-code breakpoints
Use a line-of-code breakpoint when you know the exact region of code that you need to investigate. DevTools always pauses before this line of code is executed.
To set a line-of-code breakpoint in DevTools:
- Click the Sources panel.
- Open the file containing the line of code you want to break on.
- Go to the line of code.
- To the left of the line of code is the line number column. Click it. A blue icon appears on top of the line number column.