Debugging with Chrome DevTools

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.

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.

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.

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.