Debugging with Chrome DevTools

Rate this content
Bookmark

Jecelyn will share some tips and tricks to help you debug your web app effectively with Chrome DevTools.

Jecelyn Yeen
Jecelyn Yeen
11 min
11 Jun, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Here are some tips for better utilizing DevTools, including using the run command, customizing keyboard shortcuts, and emulating the focus effect. Learn how to inspect memory, use the network panel for more control over network requests, and take advantage of console utilities. Save frequently used code as snippets and use local overrides for easy editing. Optimize images by using a more optimized format like AVIF and track changes in the network panel to see the reduced data size.

Available in Español

1. Tips for Better Utilizing DevTools

Short description:

I'm Jasleen Yin, the developer advocate for Chrome DevTools at Google. Here are some tips to better utilize DevTools for debugging: use the run command to quickly access panels and features, customize your own keyboard shortcuts, and emulate the focus effect to debug dropdowns. Stay tuned for the next feature.

Hi all, I'm Jasleen Yin. I work at Google. I'm the developer advocate for Chrome DevTools. As a web developer, I use Chrome DevTools every day to debug my web applications.

Let me share with you some tips that might help you better utilize DevTools for debugging. First tip is about getting to the panel or feature you need quicker with run command. For example, if I want to debug my video, I can go to run command, type media and click enter to open the media panel. Or if I want to capture a page screenshot, I can run command with the command shift P keyboard shortcut and type capture. Here you can see a list of screenshot options. Scroll through the list. You will be surprised that there are many commands that you can run. Run command helps save my brain memory because sometimes I just don't remember which panel to open to emulate the CSS stuff theme, for example.

Next there are a bunch of keyboard shortcuts in DevTools, but we as humans have limited memory. Instead of memorizing the shortcuts DevTools predefined, you can now customize your own shortcuts. Go to settings, shortcuts. I can customize the run command shortcut. I can either replace the current command shift P shortcut or add another shortcut, say option C to the same command. If you are using Visual Studio Code as code editor, you can map the shortcuts to that as well.

Next, there are times I want to debug my search dropdown. However, when I right click inspect on the search box, the dropdown is gone. This is annoying. I mean, I just want to debug the dropdown. Please help. Okay, cool down. Let's pull out the run command and type focus. Select the emulate a focus page option. Problem solved. The reason being is the dropdown is triggered when the user focuses on the input. So use DevTools to emulate the focus effect and you are good to go.

Next, a new feature.

2. Memory Inspection, Network Panel, and Console

Short description:

For memory inspection, use the memory inspector to inspect array buffers and WASM memory. In the network panel, find initiators and dependencies of network requests, change the user agent, and use filters for more control. In the console, use live expressions to track values in real time and take advantage of console utilities.

For folks who deal with memory a lot, you can now use the memory inspector to inspect the JavaScript array buffer and WASM memory. For example, I have an array buffer here. Let's set a breakpoint and refresh the page. Notice the new icon next to the buffer value. Click on it to reveal the memory inspector. Then you can navigate around and resume the script executions to inspect the memory changes in real time. Learn more about the memory inspector with this documentation.

Next, let's look at the network panel. There are times we want to find out the initiators or dependencies of a particular network request. Hold the shift key and hover the mouse over to the request in the request table. DevTools colors initiators green and dependencies in red. Next, you can change the user agent in the network conditions tab. For example, you would like to make sure your page works for search engine optimization because some servers or CDN configurations might block crawlers by default. You can debug such behavior by clicking on the network conditions icon, choose Google Bot from the dropdown, and refresh the page to see if any errors occur. You can also set a custom user agent if none is found on the list. Next, some tips on the network filter. You can filter the list by the size. Here, I use the larger than keyword to find out requests that are larger than 15 KB. What if I want to find all the requests smaller than 15 KB? I can use the negative sign to negate this filter result. For example, you can exclude all requests with status 200 with the filter negative status code 200.

Next, let's move on to the console. If you find yourself typing the same JavaScript expression again and again during debugging, consider using the live expressions. This way, you type an expression once and then pin it on the top of your console. The value of the expressions updates in near real time. I would like to keep track of the dotted images in this page. Click on the create live expressions icon and type document.querySelectorOrImg.length. Right click and duplicate the image element now. See, the number is updated automatically. Nice right? There are also a few handy console utilities that can save your typing time. Right now, we use document.querySelectorOr to get the dotted images of the page.

3. Console Utilities, Snippets, and Local Overrides

Short description:

We can use the $$ command to print the image element currently selected and combine it with copy to copy the element to the clipboard. Save frequently used code as snippets in the sources panel. Use local overrides in the sources panel to make changes across page loads, allowing for easy editing without deployments.

We can use the $$ command to do the same. Also, if I want to print the image element that I have currently selected, I can use $0 to do so instead of typing console.log. I can combine the $ command with copy to copy the element to the clipboard. There are actually more console utilities. Refer to the documentations for commands like monitorEvents, queryObjects, and profile.

Next, if you have code that you frequently use, you can save them as snippets. Go to the sources panel, open the snippets pane. Create a new snippet, say the copy command we wrote previously. Save it. Now, go to the elements panel, select an element. We can run a snippet to copy it. Use command P to pull out the command menu. Then type an exclamation mark followed by the snippet name. The exclamation mark here means execute it now. There you go. Go ahead and save all your frequent use commands as snippets.

Next, an undermentioned feature. Use the local overrides to keep changes across page loads. For example, my friend Jack is asking for suggestions to revamp his website about diving photos. We can edit that locally without any deployments. Go to the sources panel, select the overrides pane, then select a folder for overrides. Click allow to grant DevTools access to the folder. Now we can edit the page. Let's add his name to the title. Try to refresh the page now. Oops, please remember that the changes do not proceed if you edit in the elements panel. The editing should happen in the sources panel. Let's do that again. Save the changes and refresh the page. Nice, the changes are persisted now.

4. Optimizing Images and Tracking Changes

Short description:

Jack likes maroon color. Let's change the title to maroon color as well. Let's look at the images now. Jack can use a more optimized image format like AVIF to improve page performance. Go to the network panel, filter by image to see the current data download size. It's about 450 KB. Improve the code by using the picture element. Select all image tags, add the AVIF format, and remove image names. Save and refresh the page. Check the network panel to see the reduced data size.

Jack likes maroon color. Let's change the title to maroon color as well. Nice. Let's look at the images now. I think Jack can use a more optimized image format like AVIF to improve the page performance. Go to the network panel, filter by image to see how much data we download for the image currently. It's about 450 KB. Let's improve the code by using the picture element. Use command D to select all the image tag occurrence and add in the AVIF image format. Delete the image names and close the picture tag as well. Done. Save all the changes and refresh the page. Let's go to the network panel to see how much data is loaded now. Nice, we cut nearly half the data here.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Modern Web Debugging
JSNation 2023JSNation 2023
29 min
Modern Web Debugging
Top Content
Few developers enjoy debugging, and debugging can be complex for modern web apps because of the multiple frameworks, languages, and libraries used. But, developer tools have come a long way in making the process easier. In this talk, Jecelyn will dig into the modern state of debugging, improvements in DevTools, and how you can use them to reliably debug your apps.
The Future of Performance Tooling
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Top Content
Our understanding of performance & user-experience has heavily evolved over the years. Web Developer Tooling needs to similarly evolve to make sure it is user-centric, actionable and contextual where modern experiences are concerned. In this talk, Addy will walk you through Chrome and others have been thinking about this problem and what updates they've been making to performance tools to lower the friction for building great experiences on the web.
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
pnpm – a Fast, Disk Space Efficient Package Manager for JavaScript
DevOps.js Conf 2022DevOps.js Conf 2022
31 min
pnpm – a Fast, Disk Space Efficient Package Manager for JavaScript
You will learn about one of the most popular package managers for JavaScript and its advantages over npm and Yarn.A brief history of JavaScript package managersThe isolated node_modules structure created pnpmWhat makes pnpm so fastWhat makes pnpm disk space efficientMonorepo supportManaging Node.js versions with pnpm
Beyond Virtual Lists: How to Render 100K Items with 100s of Updates/sec in React
React Advanced Conference 2021React Advanced Conference 2021
27 min
Beyond Virtual Lists: How to Render 100K Items with 100s of Updates/sec in React
Top Content
There is generally a good understanding on how to render large (say, 100K items) datasets using virtual lists, …if they remain largely static. But what if new entries are being added or updated at a rate of hundreds per second? And what if the user should be able to filter and sort them freely? How can we stay responsive in such scenarios? In this talk we discuss how Flipper introduced map-reduce inspired FSRW transformations to handle such scenarios gracefully. By applying the techniques introduced in this talk Flipper frame rates increased at least 10-fold and we hope to open-source this approach soon.
High-Speed Web Applications: Beyond the Basics
JSNation 2022JSNation 2022
30 min
High-Speed Web Applications: Beyond the Basics
Knowing how to run performance tests on your web application properly is one thing, and putting those metrics to good use is another. And both these aspects are crucial to the overall success of your performance optimization efforts. However, it can be quite an endeavor at times for it means you need to have a precise understanding of all the ins and outs of both performance data and performance tooling. This talk will shed light on how to overcome this challenge and walk you through the pitfalls and tricks of the trade of Chrome DevTools, providing you with a complete roadmap for performance analysis and optimization.

Workshops on related topic

React Performance Debugging Masterclass
React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React, TypeScript, and TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Performance Debugging
React Advanced Conference 2023React Advanced Conference 2023
148 min
React Performance Debugging
Workshop
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
The Clinic.js Workshop
JSNation 2022JSNation 2022
71 min
The Clinic.js Workshop
Workshop
Rafael Gonzaga
Rafael Gonzaga
Learn the ways of the clinic suite of tools, which help you detect performance issues in your Node.js applications. This workshop walks you through a number of examples, and the knowledge required to do benchmarking and debug I/O and Event Loop issues.
Solve 100% Of Your Errors: How to Root Cause Issues Faster With Session Replay
JSNation 2023JSNation 2023
44 min
Solve 100% Of Your Errors: How to Root Cause Issues Faster With Session Replay
WorkshopFree
Ryan Albrecht
Ryan Albrecht
You know that annoying bug? The one that doesn’t show up locally? And no matter how many times you try to recreate the environment you can’t reproduce it? You’ve gone through the breadcrumbs, read through the stack trace, and are now playing detective to piece together support tickets to make sure it’s real.
Join Sentry developer Ryan Albrecht in this talk to learn how developers can use Session Replay - a tool that provides video-like reproductions of user interactions - to identify, reproduce, and resolve errors and performance issues faster (without rolling your head on your keyboard).