Today I Learned

6 posts about #chrome

Debug prod app with logpoints & conditional breakpoints

Recently we were able only to use breakpoints to inspect code execution in the production application. But if the code in which we put breakpoint is triggered multiple times we have to resume the execution. To prevent that, we can use conditional breakpoints https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints#conditional-loc

In cases when we do not want to break the execution of the code but just log some value we can use logpoints. https://developers.google.com/web/updates/2019/01/devtools#logpoints

Trigger debugger with key combination

Whenever you need to freeze your website and check its state, you can trigger debugger at any given point.

Let’s say you want to check which classes are passed when element is hovered - move your mouse over it and trigger debugger. The page will freeze and you can browse the dom tree freely.

According to Google Chrome’s DevTools documentation:

Pause script execution (if currently running) or resume (if currently paused)

You need to have your DevTools opened

MacOs: F8 or Command+\

Windows/Linux: F8 or Control+\