The DevTools pause page is a game-changer for web developers, allowing them to inspect and analyze the execution of JavaScript code in real-time.
This feature is particularly useful for debugging and troubleshooting issues in complex web applications.
The pause page offers a range of features that make it an essential tool for developers, including the ability to pause and resume execution of JavaScript code, inspect variables and properties, and step through code line by line.
With the DevTools pause page, developers can gain a deeper understanding of how their code is executing and identify issues more efficiently.
Browser Debugging
Browser Debugging is a crucial part of the development process, and having the right tools at your disposal can make all the difference. You can track changes in your code across multiple files without manually collecting them, thanks to features like "Local Modifications" in Chrome and "Changes" pane in Firefox.
To track changes in Chrome, toggle the "Local Modifications" command when editing the source file. This will highlight the changed properties and what exactly has changed, allowing you to copy-paste modifications right away. Just be sure to run your local server to avoid issues with line breaks and spaces.
Debugging janky animations is another common issue that can be solved with the right tools. The FPS meter from the performance panel in Chrome can reveal if you're running frames smoothly, and the "Layers" tab can help you explore rendering issues.
Some issues can be easily detected by tracking which elements are missing a will-change property or using a disproportionate amount of memory. This can help you identify and fix problems like a large component that's hidden off the screen, causing a couple of MB of memory usage.
If you need to pause script execution, you can use DOM change breakpoints in DevTools. Right-clicking on the three ominous dots next to an element's name allows you to pick "Break on" subtree modifications, attribute modifications, or node removal. This can be especially useful when testing critical CSS or debugging JavaScript.
To freeze the page by pausing JavaScript execution, you can press F8 in DevTools while keeping focus on the element you want to inspect. Alternatively, you can use a conditional line-of-code breakpoint or logpoints to output a value in a code snippet without writing console.log over and over again.
Here are some methods to pause JavaScript execution:
- Press F8 in DevTools while keeping focus on the element you want to inspect
- Use a conditional line-of-code breakpoint
- Use logpoints to output a value in a code snippet
- Add the debugger statement directly in your source code, at the right place
- Add a breakpoint on the right line in the Sources tool (or Debugger in Firefox)
Debugging JavaScript
Debugging JavaScript is a crucial skill for any developer. Breakpoints are a powerful debugging feature that pause code execution, allowing you to inspect line by line and choose to resume once you're ready.
To add a breakpoint, right-click the desired line in the gutter and select 'Add Breakpoint'. This will pause the code execution at that specific line.
Here's a step-by-step guide to adding a breakpoint:
- Open DevTools and switch to the Sources panel.
- Select the .js file in which you want to add the breakpoint.
- Run the function to pause at the breakpoint.
- Once you confirm everything is in order, click the resume button to continue script execution.
Debugging JavaScript
Debugging JavaScript can be a daunting task, but with the right tools and techniques, you can pinpoint even the most elusive bugs.
To start, you'll want to add breakpoints to your code to pause execution and inspect line by line. Breakpoints are a powerful debugging feature because they pause code execution, allowing you to inspect line by line and choose to resume once you're ready.
You can add a breakpoint by right-clicking the desired line in the gutter and selecting 'Add Breakpoint'. This is especially useful for large source code bases or when it's hard to pinpoint the source of the bug.
Once you've added a breakpoint, you can run the function and inspect the code execution. In the Sources panel, select the .js file where you want to add the breakpoint, and the file source code will appear in the middle code editor panel.
To confirm that everything is in order, click the resume button to continue script execution.
Here are the steps to add a breakpoint in detail:
- Open DevTools and switch to the Sources panel.
- In the Page window, select the .js file in which you want to add the breakpoint.
- Run the function now.
- Once you confirm that everything is in order, click the resume button to continue script execution.
Debugging Janky Animations with Layers
Debugging Janky Animations with Layers can be a game-changer for web developers. You just need to check the FPS meter from the performance panel in Chrome to see if you're running frames smoothly.
Some issues can be easily detected by tracking which elements are missing the will-change property.
The "Layers" tab is where you can explore rendering issues, and it's a great place to start when debugging animations.
A disproportionate amount of memory usage can be a big problem, so keep an eye out for elements that are using a lot of memory.
For example, a large component that's hidden off the screen with relative positioning of -1000px off the screen can cause a couple of MB of memory usage.
Safari has a special tool for debugging canvas issues, called the Canvas Memory Usage debugger.
Page Inspection
To freeze a page and inspect an element, you can pause the JavaScript execution in DevTools. This is especially useful when the element you want to inspect is controlled by JavaScript.
Press F8 in DevTools while keeping focus there to pause JavaScript execution, and the element should stay visible. This method works if the element appears on hover events.
If the element appears on focus events, you can use a different approach. Enter `setTimeout(() => {debugger}, 3000)` in the Console tool and press Enter. Within 3 seconds, focus the element you want to inspect in the webpage. After the timeout, JavaScript execution will pause, and the element that appears on focus should stay visible.
To achieve this, you can also add the `debugger` statement directly in your source code at the right place, or by adding a breakpoint on the right line in the Sources tool.
Snapshotting the Page
You can easily capture the entire HTML and computed CSS of a page by running a simple JavaScript code. This approach is very simple and robust.
The code can be run from a Snippet in Chrome/Edge DevTools or directly from the Console in any browser. Once you've run the code, focus the webpage and get it into the desired state.
The resulting snapshot freezes the entire page in its current state, and nothing can change anymore. You can then inspect the page as you wish.
The snapshot approach produces very large amounts of HTML and CSS, which can be a drawback. However, it's a great way to preserve the page's state for later reference.
Here are the pros and cons of snapshotting the page:
- Easy to implement
- Freezes the entire page in its current state
- Produces very large amounts of HTML and CSS
- Loses the CSS rules and replaces all styles with inline styles instead
To create the snapshot, press F immediately after running the code and focusing the webpage. This will capture the entire state of the page and replace the current page with the snapshot.
View, Edit Properties
You can view and edit local, closure, and global properties while the app is paused.
This is super useful when you're trying to track down a bug. For example, let's say a variable isn't returning the correct value. By adding a breakpoint, you can expand the 'Scope' panel in the dev tools and see the variable's value.
To test the function with different values, simply double-click on the variables to edit them.
Network and Media
Debugging media queries can be a nightmare, but Chrome and Edge have a hidden gem to help you out. Toggle the device toolbar with Cmd/Ctrl + Shift + M and choose "Show media queries" to see horizontal bars representing the scope of each media query.
These bars can be a bit confusing at first, but they're actually quite helpful. The way they're aligned represents screen width, and is replicated on the left and on the right side of the viewport.
You can track which media queries are being overwritten by hovering over the bars, and even jump to a specific media query range to inspect layout issues in detail.
Check Network Panel Initiators
You can quickly check which assets a particular resource has requested in the Network panel. This is especially useful in cases where you might have a couple of third-party scripts that might be calling fourth-party-scripts.
Hold Shift while hovering over an element in the Network panel, and the pink background color will indicate resources that this element has prompted to download.
The green background color will indicate the initiator that actually prompted the request.
Media Queries Debugging
Media Queries Debugging can be a real challenge, especially when dealing with dozens of queries in flight for a given page.
You can find the media query debugger hidden behind the "Settings" cog in the device toolbar, but it's actually quite helpful when it's available by default.
Toggle the device toolbar with Cmd/Ctrl + Shift + M and choose the three dots in the right upper corner to access it.
The media query debugger displays horizontal bars representing the scope of each media query, which might appear confusing at first.
The bars are aligned to represent screen width, and are replicated on the left and right side of the viewport.
Bars closer to the center of the screen are overwritten by the ones further away from the center.
A blue bar on the top indicates max-width media queries, a green one min-width and max-width media queries, and an orange one stands for only min-width media queries.
You can track which media queries each bar contains by hovering over them.
You can jump to a specific media query range and inspect layout issues in detail with the Styles panel open.
By clicking on any position on a bar, you can trigger specific breakpoints.
Right-clicking on a bar reveals its position in the source code, and you can quickly jump back and forth between media queries.
You can also specify custom emulated devices instead of the pre-defined ones, and use the "Sensors" pane to control specific device sensors if needed.
Frequently Asked Questions
How do you pause a page in Chrome DevTools?
To pause a page in Chrome DevTools, press the hotkey Ctrl+Shift+S. This will temporarily halt script execution, allowing you to inspect and debug your code.
Sources
- https://javascript.info/debugging-chrome
- https://www.smashingmagazine.com/2021/02/useful-chrome-firefox-devtools-tips-shortcuts/
- https://buddy.works/tutorials/debugging-javascript-efficiently-with-chrome-devtools
- https://www.analyticsmania.com/post/how-to-pause-javascript-and-inspect-an-element-that-quickly-disappears/
- https://patrickbrosset.com/articles/2023-11-22-freezing-a-page-in-devtools/
Featured Images: pexels.com