Sometimes you want to view a value in your code but you don't want to pause execution. Rather than sprinkle
console.log() statements throughout your code, you can use a new type of breakpoint added in Firefox 67, the logpoint. Logpoints print a message to the Console panel instead of pausing code execution.
The logpoint is especially useful in cases where breaking the execution breaks testing procedures such as when you are debugging popup windows, or executing focus-related logic.
To create a logpoint:
- Right click on a line number in the Debugger panel and pick Add log action from the context menu.
- Create an expression inline. The result will be logged in the console panel every time the logpoint hits. You can use any variable or function available in the current scope.
Working with logpoints
When you set a logpoint, the indicator is purple, rather than the blue of an unconditional breakpoint or the orange of a conditional breakpoint.
You can view the list of logpoints in the Breakpoints side panel.
When your code hits a logpoint, the message you have defined will be logged to the console. You can make it easier to see the message by opening a split console under the debugger. (Either press Esc or select the elipsis menu (...) and then click Show Split Console.)
When should you use logpoints?
- When you want to know that specific line in your code has executed, but you don’t want to break code execution, set a logpoint.
- Logpoints are useful to log the value of a variable at a specific point in the code. It’s faster than changing the underlying source code itself to add calls to the
- If you need to execute additional logic related to the source code and you can’t change the source code itself, you can use a logpoint.