Conditional Logpoint in Chrome Devtools

Question

If there a way to do a conditional logpoint in Chrome Devtools?

• I KNOW how to add a logpoint or a conditional breakpoint;
• I DON'T KNOW if is there a way to add a conditional logpoint (a logpoint logging only when a specific condition is meet).

Answer 1

There's no way to add a conditional logpoint in Chrome Devtools.

The workaround is to add a non-breaking conditional breakpoint with console.log:

foo.bar===123 && console.log('foo!', foo)

The result of this expression is always falsy: either false (for the condition) or undefined (for console.log) so the breakpoint doesn't trigger and only prints the message on condition.

Answer 2

What I have been doing is creating a log message that throws an error given a specified condition. Any code in the logpoint that throws prevents the log from making it to the console but will not have an effect the original, running code. You can abuse this to make what is effectively a conditional logpoint with a format such as:

<condition> ? <message to log> : <expression that throws>

For example:

this.enabled ? `Enabled sproket's name is ${this.name}` : null.x

This will only log "Enabled sproket's name is ..." if the enabled property is true. If not, the logpoint will evaluate null.x which throws, preventing anything from getting logged at all.