A Dive into Chrome DevTools That Developers Can’t Live Without

Chrome DevTools is undoubtedly one of the permanent fixtures of any developer’s arsenal of developer tools. With dozens of tools categorized under over 20 panels, it allows developers to debug web pages and test code changes on the browser itself. From modifying the DOM and debugging Javascript to inspecting network activity, knowing when and how to use these tools correctly is a major advantage for a developer to save time and increase their efficiency.

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.

Overview of Chrome DevTools Main Panels

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

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 panel

The Console panel provides a Javascript REPL, where you can interactively run Javascript code on the browser. With it, you can dynamically access and manipulate page elements through standard Javascript functions. It’s also where all console messages like console.log and console.error are logged in.

Sources panel

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.

Application panel

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.

Network panel

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.

How to Open Chrome DevTools

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.

Elements Panel

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.

Working with the DOM

Inspect a node

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 also allows you to copy a node’s Javascript path. To achieve this, right-click on the markup and go to Copy -> Copy JS Path.

Edit a node attribute, type, or content

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.

Force node state

When testing a web page, you’d often want to force a node to stay in a particular state, like, :hover, :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.

Hide a node

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.

Delete a node

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.

Reorder nodes

The Elements panel allows you to drag nodes onto different positions to change their ordering.

Break on node modification

If you want to break the page’s Javascript code execution when it tries to modify a certain node, the Elements panel provides you with the right tools to achieve this. After right-clicking on a node markup, it shows you three options under the “Break on” selection. They are:

• 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.

Working with CSS

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.

Add or edit a CSS declaration to a node.

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.

Add or remove a class.

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.

Add a new ruleset

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.

Inspect and modify the dimensions of an element

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.

Pick colors of your choice.

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.

Console Panel

The Console panel in Chrome DevTools works as a Javascript REPL. Let’s see how you can use its tools for your benefit during development.

View logged messages

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.

Run Javascript

You can use the REPL provided by the Console panel to run Javascript and interact with the content on the web page. DevTools gives the Console full access to the page’s window object so that you can modify any element without an issue.

In addition to the standard Javascript expressions, the Console panel comes with a few unique functions to simplify the page inspection and debugging process. It includes several easy-to-use selectors and functions that we’ll discuss in the next section.

Console panel selectors

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 $0 - $4 work as references to the last five nodes inspected in the Elements panel or the last five Javascript heap objects selected in the Profiles panel.

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 $$(css_selector) instead.

clear()

This function clears the Console history.

getEventListeners()

Calling getEventListeners(object) returns a list of event listeners registered on the passed object.

monitorEvents()

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 mousedown, keyup, touchstart, and scroll are examples of events that you can monitor with this function.

To stop event monitoring on the object, call unmonitorEvents(object, [, events]).

Sources Panel

Chrome DevTools Sources panel supports several features commonly seen in IDEs, including:

• Viewing source files
• Editing source files (only CSS and Javascript)
• Debugging Javascript

In addition, it also provides features that cater primarily to web developers, such as:

• Creating and saving Javascript snippets to run across pages
• Setting up a Workspace to let you persist the changes made using DevTools

Viewing source files

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.

Editing source files

The Sources panel allows you to edit CSS and Javascript source files once they are opened in the Editor view. The changes immediately appear on the page in real-time for CSS files. Modifications to Javascript files, though, only appear after you save them using either Control + S or Command + S (Mac) keys. However, saving a Javascript file does not prompt the panel to rerun its code, so only the changes in dynamically called function code will affect the page’s behavior.

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.

Debugging Javascript

With the help of Chrome DevTools, you can now debug Javascript on the browser itself to discover the source of problems in your code. It allows you to add breakpoints, step through the code line by line once you reach a breakpoint during execution, and inspect objects and their properties, much like any other debugging experience in an IDE.

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.

Creating and saving Javascript snippets

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.

Setting up Workspaces

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.

Now, if you make changes to source CSS and Javascript files from the device’s code editor or Chrome DevTools, they will immediately come into effect in the other location as well.

Network Panel

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.

Simulate a poor network connection

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.

Filter resources

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.

Block requests

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.

Application Panel

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.

Access local storage and session storage

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.

Accessing the cache

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.

Debug background services

Chrome uses a set of Javascript APIs to allow websites to operate in the background even when it is not opened in the browser. These types of operations are collectively called Background Services. Examples of background services include background fetch, background sync, notifications, and push messages.

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.

Takeaway

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!