A Dive into Chrome DevTools That Developers Can’t Live Without
While you may be already familiar with the more common features of Chrome DevTools, there could still be some that you miss out on simply because there is so much there. That’s why this tutorial will give you an overview of some of the most useful panels in Chrome DevTools to let you fully benefit from this treasure trove already in your hand. If you find a new tool to help you, don’t forget to add it to your developer tool kit for a better development experience next time.
Chrome development tools are divided into over 20 panels in total. However, of these 20, five are essential for every developer. Before exploring these, let’s go through some basics first.
Elements panel, as the name suggests, is used to manipulate elements on a web page. It includes inspecting elements, manipulating the DOM, and altering and adding CSS. It’s perhaps the most commonly used panel in Chrome DevTools.
console.error are logged in.
The behavior of the Sources panel is quite similar to that of a regular IDE. It contains tools to view different files a web page uses, such as its markup, styles, and scripts, and allows you to make changes that instantly reflect on the web page without leaving the browser. It also has tools to support debugging, much like a standard IDE we use for writing code.
The Application panel provides a view into browser storage so that you can inspect and modify content stored in spaces like local storage, IndexedDB, cookies, or cache storage. In addition, if you’re developing a Progressive Web App, this panel gives you all the necessary tools to view, edit, and debug application manifests and tasks related to service workers.
The Network panel lets you view all the network activity happening under the hood when loading a web page and page elements. You can use it to ensure the page sends and receives resources as expected and inspect request content like HTTP headers, body, and size.
Chrome provides several options to open its DevTools. To inspect a specific page element using the Elements panel, right-click on the element and select “Inspect.” Or, use keyboard shortcuts like
Cmd+Option+C (Mac) or
Ctrl+Shift+C (Windows, Linux) to do the same thing. If you want to open the Console panel directly, you should press
Cmd+Option+J (Mac) or
Ctrl+Shift+J (Windows, Linux).
Once you have opened the DevTools tab on the browser, you can navigate between different panels using the interface it provides. Looking for a panel not listed among those shown at the top of the interface? Click on the triple-dotted menu icon, go to “More tools,” and select the panel you want to see.
As previously mentioned, the Elements panel provides a set of tools to work with the DOM and CSS of a web page. Let’s first look at the tasks you can do under the former.
Opening the Elements panel to inspect a node is simple as right-clicking on it and choosing the “Inspect” option or using one of the keyboard shortcuts we mentioned above. It gives a highlighted view of the markup of the selected node, which you can use to carry out the inspection.
Once the Elements tab is open, you can also use the Inspect icon on the top left corner of the panel to select a node for inspection.
The Elements panel also allows you to search for a specific node using its name or any other properties. To open the search box, you only have to press Ctrl+F or Cmd+F (on Mac) and type in the relevant search terms.
If you want to quickly go to a node that’s currently not within the page’s viewport, you can scroll it into the view by right-clicking on that node’s markup and selecting Scroll into View.
The Elements panel allows you to edit a node attribute and view the resulting changes. You can double-click on the attribute and change its name or value as needed. You can also double-click on the node’s name to add a new attribute preceded by a space.
If you want to change the node type itself, simply clear out the old name and enter the new one in that space.
Changing the node content follows a similar pattern to the above two.
When testing a web page, you’d often want to force a node to stay in a particular state, like,
:focus, or :active`, even when the required conditions aren’t met. Luckily, the Elements panel provides a simple way to achieve this: you only have to right-click on a node, go to Force State, and select the preferred state from the available list.
You can toggle the visibility of a node between hidden and visible states by clicking the “H” key. This gives an easy hack to hide a node when you want to work on surrounding nodes without being obstructed by its view.
You can delete a node selected on the panel from the DOM by clicking the Delete button. If you want to undo the deletion, simply use a Ctrl+Z or Cmd+Z (Mac) as usual.
The Elements panel allows you to drag nodes onto different positions to change their ordering.
- Subtree modifications: Adding or removing a child from the currently-selected node or changing the content of one of its children triggers a code break. However, it’s not triggered by any attribute changes in a child or modifications to the selected node.
- Attribute modifications: Adding or removing an attribute from the selected node or changing an attribute value triggers a code break.
- Node removal: Removing the selected node triggers the code break.
When you choose a node for inspection on the Elements panel, it details the styles applied to it on a separate tab that is likely located at the bottom or right side of the interface. You can use this display to inspect the element’s CSS properties, modify them, and experiment with different styling.
A simple click inside a relevant declaration block gives you a new line to add a CSS declaration with its property name and value.
On the other hand, if you want to modify an already existing declaration, you can edit its value or name, in place, after clicking on the relevant field.
You can quickly add a new CSS class to a selected node by choosing the .cls option below the Styles tab name. It opens a new input field to enter the class name. Once added, the new class appears in the element’s markup.
To add a new ruleset to the element’s styling, you should click on the “+” button next to the .cls option and select the stylesheet that you’re going to modify. This gives you space to define the relevant selectors and add the new CSS declarations.
At the bottom of the Styles tab, the Elements Panel shows an interactive Box Model diagram with the dimensions of the selected node, its margins, paddings, and borders. You can use this to inspect how the node is positioned in the given space and change that setting as you like.
The Styles tab has a built-in color picker that allows you to choose among different color palettes and gradually-changing hues and opacities.
It also lets you pick a color already on the page as the preferred color of the selected node. You can also use this feature to identify colors used on other web pages if you want to try something similar for yours.
Use the Console Panel to view all the console messages sent from the page’s scripts. In other words, when you use a code snippet like console.log or console.error in a script, this is where the browser logs those messages during its runtime.
The Console panel selectors share a syntax somewhat similar to JQuery. They start with the
$ sign and follow with specific references to different DOM elements or other objects.
For example, the use of
$_ notation works as a selector for the most recently evaluated expression.
On the other hand, selectors
Another type of selector pattern you can use in the Console panel is
$(css_selector). It returns a reference to the first DOM object that matches the given CSS selector.
If you want to retrieve all the elements that match a given CSS selector, use the format
This function clears the Console history.
getEventListeners(object) returns a list of event listeners registered on the passed object.
monitorEvents(object, [, events]) function logs the Event object on the Console panel when the provided events are triggered by a given object. Mouse, key, touch, and control events like
scroll are examples of events that you can monitor with this function.
To stop event monitoring on the object, call
unmonitorEvents(object, [, events]).
Chrome DevTools Sources panel supports several features commonly seen in IDEs, including:
- Viewing source files
In addition, it also provides features that cater primarily to web developers, such as:
- Setting up a Workspace to let you persist the changes made using DevTools
The Page pane of the Sources panel provides a view of all the resources the web page has loaded. It groups files into sections according to their origins and origin directory structures. You can click on any file here to open it in the Editor view, which you can use to either inspect or modify the code.
Any modification you make to a source file through the Editor view only lasts until the page reloads. However, if you want to persist the changes and permanently write them to your device’s file system, the Sources panel provides a workaround, which we’ll discuss later.
To start the debugging process, open the Source panel’s debugger pane. It shows you different types of breakpoints, such as Event Listener Breakpoints, DOM Breakpoints, Global Breakpoints, and XHR/fetch Breakpoints.
To add a simple line-of-code breakpoint that pauses the execution at a specific line, you have to call the
debugger just after that line in the code.
Or you can add a breakpoint at a line from the Sources panel itself by right-clicking on its line number and selecting “Add breakpoint.”
You can learn more about adding other types of breakpoints by reading the Chrome DevTools official documentation .
The top of the debugger pane shows options to pause the script execution and step into, step over, or step out of function calls when the code pauses at a breakpoint. The pane also allows you to toggle breakpoints and inspect objects as required.
When you’re using DevTools to test a website, there could be certain code snippets that you often run, sometimes even on different pages. In such cases, the Sources panel allows you to save the snippet into your file system and repeatedly run it without having to rewrite the code every time.
To save a new snippet on your device, you only have to go to the Snippets pane on the Sources panel and select the “Add new snippet” option. You can then give it a proper name and add the code through the Editor pane. You can open the Snippets pane by clicking the » sign next to Page and selecting the “Snippets” option if it’s not already shown on your DevTools interface.
Now, if you want to run the saved snippet, it’s only a matter of going to the right snippet and selecting “Run” from the options that show up when you right-click on its name.
With Workspaces, DevTools allows you to permanently save the changes you make to source files on the browser into the file system.
The Filesystem pane on the Sources panel shows an option called “Add folder to workspace.” This option allows you to load the website’s source directory into the DevTools Workspace.
Once the folder is loaded, DevTools creates a mapping between the files in the Workspace and files received via the network. If this mapping is correctly established, you’ll see a green dot next to the icons of the relevant source files.
The Network panel of Chrome DevTools provides a set of tools to inspect the network activity of a web page. It shows a log of network activity carried out since DevTools was opened, with additional information like request status, type, initiator, size, the time it took to complete the request, and a graphical representation of its different stages.
Basically, inspecting logs in the Network panel gives you an idea of whether your web page downloads and uploads resources as expected. If you want to dig deeper into request and response header fields, simply click on the resource name to get a full breakdown of such information.
Other than inspecting logged network activity, the Network panel can also help developers in other situations. Let’s take a quick look at some of them.
The Network panel allows you to simulate different network conditions to test your web page. The throttling dropdown at the top of the panel shows presets to simulate fast 3G, slow 3G, and offline modes. It also allows you to create custom throttling profiles with user-defined download/upload speeds and latencies.
Before testing how your web page faires against the selected network conditions, you must first clear the page cache to prevent it from affecting the load speed, you can quickly achieve this task by holding down the Reload button on Chrome and selecting “Empty cache and hard reload” from the options that pop up.
The Network panel allows you to filter different types of resources for simpler inspection. It provides separate tabs for resource types like XHR, JS, CSS, Img, Media, and Manifest that you can move across as needed.
It also provides a search box that accepts strings, regular expressions, or specific properties of a request as input to filter out the exact resources for your inspection.
When testing a web page, you might want to know how it holds up in circumstances where specific resources are not reachable or unavailable. You can simulate such unavailability in the browser by blocking requests via the Network panel.
The panel accepts patterns for the types of resources you want to block in your simulation. To add a resource pattern to the blocked list, first press Control (or Command) + Shift + P and type “Show network request blocking” in the Command Menu that shows up.
After selecting this option, you can add the text pattern that matches relevant resources. Now, if you reload the page, you’d be able to see how the page works when the blocked resources are unavailable.
The Application panel is mostly known for giving developers access to the browser’s storage components, such as local storage, session storage, and cache storage. In this section, let’s see how you can effectively use this panel for testing your website.
Chrome’s local storage and session storage work as storage spaces for key-value pairs. Accessing these storage spaces through the Application panel to either view or modify data follows more or less a similar pattern.
When you go to one of the two storages and select a domain to view its key-value pairs, you can see a familiar table like the one below with the stored objects. You can click on an object to get a better view of its value.
The Application panel allows you to modify either the key or the value of an object on this table itself.
You can also make other changes to the content stored in the local storage and session storage, like adding or deleting key-value pairs.
Viewing and modifying data stored in two other types of browser storage, IndexedDB and Cookies, work quite similarly to the above two storage spaces.
You can access the list of caches stored under the given web page through the Cache Storage on the Application panel. If you click one of the available caches, it shows all the resources stored under the selected cache. Selecting a resource listed there gives you a detailed view of its headers and a preview of the content it represents.
The Application panel also allows you to refresh a resource stored in the cache. You only have to click on the relevant resource until it’s highlighted in blue and press the refresh button towards the top of the panel.
Other than that, you can delete a resource or an entire cache in the storage following a similar pattern to previous examples.
The application panel is quite helpful if your website utilizes such services under the hood. It provides you with tools to debug background services and identify any existing issues in their performance. These tools are listed under the Background Services section on the panel, where it shows a list of services available for debugging.
DevTools allows you to record the background events triggered by such a service by clicking the record button on the pane’s top left corner. It records background activity for up to three days even when the DevTools interface is not kept open. Once the recording is finished, you can inspect the logs to identify any issues that prevent your website from operating as expected in the background.
You can read more about the debugging process for different background services in the official documentation.
Today, we discussed different tools provided by Chrome DevTools under five panels for testing a website. Even though the extent of its use cases is too large to include in a single article, we hope that you managed to find something new and useful from the applications we covered here.
We also encourage you to look further into more advanced use cases of DevTools, especially relatively new ones, to make your developer experience even simpler.
Thanks for reading!
I’m a software engineering student who loves web development. I also have a habit of automating everyday stuff with code. I’ve discovered I love writing about programming as much as actual programming.
I’m extremely lucky to join the Live Code Stream community as a writer and share my love for programming with others one article at a time.