
Right-click an entry to remove that breakpoint. Select the checkbox next to an entry to disable that breakpoint. Use the Breakpoints pane to disable or remove line-of-code breakpoints from a single location. A red diamond (or more recently, an orange icon) appears on top of the line number column: A dialog is displayed underneath the line of code. To the left of the line of code is the line number column. Open the file that contains the line of code you want to break on. To set a conditional line-of-code breakpoint: Use a conditional line-of-code breakpoint when you know the exact region of code that you need to investigate, but you want to pause only when some other condition is true. This is equivalent to a line-of-code breakpoint, except that the breakpoint is set in your code, not in the DevTools UI. Run the debugger method from your code to pause on that line.

A red icon (or more recently, a blue rectangle arrow) appears next to the line number column: Open the file that contains the line of code that you want to break on. To set a line-of-code breakpoint in DevTools: DevTools always pauses before this line of code is run. Use a line-of-code breakpoint when you know the exact region of code that you need to investigate. Whenever a specific command, function, or method is run.Ī variant that does not "break" into the debugger but instead logs a message to the console.

On the line of code that is throwing a caught or uncaught exception.

On the code that runs after an event, such as click, runs. When an XHR URL contains a string pattern. On the code that changes or removes a specific DOM node, or the children. On an exact region of code, but only when some other condition is true. You can save yourself time when debugging by knowing how and when to use the other types of breakpoints. But line-of-code breakpoints may be inefficient to set, especially if you don't know exactly where to look, or if you are working with a large codebase. The most well-known type of breakpoint is line-of-code.

Overview of when to use each breakpoint type This article explains each type of breakpoint available in DevTools, as well as when to use and how to set each type.įor an introductory tutorial using an existing webpage, see Get started debugging JavaScript. Use breakpoints to pause your JavaScript code.
