Awesome Article Sharing — 5 Cool Chrome DevTools Features You Might Not Know

“5 Cool Chrome DevTools Features Most Developers Don’t Know About” outlines five useful Chrome DevTools features. After reading, I realized I only knew one out of the five, and the other four are quite handy…

The four features are:

1. Live Expression

   This allows you to monitor the change of a value in real-time, such as the screen width, a specific element, or a JavaScript variable.

2. Logpoints

   You can insert console.log() without modifying the JavaScript code. It works similarly to breakpoints, triggering when a specific line is reached. However, Logpoints won’t pause execution; instead, they execute console.log(your set variable) before proceeding.

3. Conditional Breakpoints

   This allows you to set conditions for a breakpoint, triggering only when the condition is met.

4. DOM Breakpoints

   You can set breakpoints in the DOM to trigger when a subtree is modified, or an attribute changes, or a node is removed. Once triggered, the JavaScript code execution pauses, helping pinpoint the exact line of code causing the behavior.

While writing this article, I discovered that Google Chrome’s official site has an article titled “Pause your code with breakpoints,” which lists additional breakpoints beyond Logpoints, Conditional Breakpoints, and DOM Breakpoints, such as:

• XHR
• Event listener
• Exception
• Function
• Trusted Type

It seems worthwhile to spend some time learning these features, as they can be quite useful when developing web crawlers!

Additional Resources #

Watch JavaScript values in real time with Live Expressions | Chrome DevTools | Chrome for Developers

DevTools Tips: Breakpoints and logpoints | Blog | Chrome for Developers

Set a breakpoint based on a certain condition | Blog | Chrome for Developers

Pause your code with breakpoints | Chrome DevTools | Chrome for Developers