What Are Google Chrome Developer Tools? (Updated 2026)

Most modern web browsers today include a suite of built-in developer tools which allow the user to carry out various page-related tasks directly within the browser window. While they all do very similar things, in this article we will look specifically at the developer tools that come bundled with Google Chrome.

Known as Chrome DevTools for short, these tools do a range of things, from inspecting rendered HTML, CSS and JavaScript to debugging pages, analysing performance and identifying security or accessibility issues. You can also see how your pages look across different devices and screen sizes, from a low-end Android device on a slow connection right up to full-width on a desktop monitor.

One of the best things about Chrome DevTools is that you don’t need to be a highly skilled web developer to use them… and they’re free. Even if Chrome isn’t your preferred browser, they’re well worth a look.

How Do I Access the Tools?

There are a few ways you can access Chrome Developer Tools.

For those of you who love a keyboard shortcut, you can press:

• CTRL + SHIFT + I or F12 (Windows / Linux)

• CMD + SHIFT + I (macOS)

This will usually take you straight to the Elements tab, which is probably the most-used section of the developer tools and one we’ll come back to shortly.

Another way to open Chrome DevTools is to right-click anywhere on the page and choose Inspect.

Alternatively, you can take the scenic route by clicking the three-dot kebab menu (yes, it’s really called that) in the top-right corner of the browser window, selecting More tools, and then Developer tools.

The Developer Tools Window Is Open…Now What?

Depending on whether you have the developer tools docked to the right-hand side of the screen, along the bottom, or open in a separate window, you’ll see either all available tools or just the first few (with the rest accessible via the » menu).

The main developer tools available in Chrome in 2026 are:

• Elements

• Console

• Sources

• Network

• Performance

• Performance Insights

• Memory

• Application (Storage)

• Security

• Lighthouse

• Recorder

• Issues

Let’s take a brief look at each one below. We’ll go into more depth on individual tools in future articles, so be sure to keep checking back.

The Developer Tools

Elements Panel

At its most basic level, the Elements panel shows you the rendered HTML and any CSS styles that apply to the web page. You can highlight and edit different elements on the page and instantly see how changes affect the structure and styling in real time, directly in the browser window.

HTML is shown in the top half of the panel, with CSS styles displayed below. You can also inspect layout features such as Flexbox and CSS Grid, making it much easier to debug spacing and alignment issues.

Don’t panic though — you’re not changing the underlying source code, just the version that’s currently being rendered in your browser. Refresh the page and everything resets.

As mentioned earlier, right-clicking on any element and choosing Inspect will not only open DevTools, but will also highlight the exact HTML associated with that element.

Console Panel

The Console panel is where you can view JavaScript output, warnings and errors generated by the page. It’s commonly used to debug interactive elements and to test small pieces of JavaScript that interact with the page you’re viewing.

Any changes made here only apply to the current browser session and do not affect the site’s source code.

The Console is also where log messages written by developers appear. These are often used to confirm that code is running in the correct order or to check the value of variables at specific moments in time.

Sources Panel

Within the developer tools, the Sources panel has several very useful features that make debugging and development much easier.

From here you can:

• View all resources loaded by the page, including HTML, CSS, JavaScript, images, fonts and media files

• See how those files are organised by origin and directory

• Preview files directly within the browser

• Set breakpoints and step through JavaScript line by line

You can also create, save and run Snippets — small pieces of reusable JavaScript that run in the context of the current page. These are particularly useful for repeatedly testing code that isn’t tied to a single site.

Another powerful feature is Workspaces, which allow you to map local project files to DevTools. This lets you save changes made in the browser directly back to your files, effectively turning the browser into a lightweight code editor.

Network Panel

The Network panel is where things start to get more technical. This tool helps identify network and loading issues so you can optimise where needed.

To use it properly, you need to have the Network panel open before loading the page (or refresh the page once it’s open). You’ll then see every single request made by the page, along with details such as:

• When each resource was requested

• How long it took to load

• HTTP status codes

• File sizes and caching behaviour

It’s an excellent place to spot bottlenecks and works best when used alongside the Performance and Lighthouse panels.

Performance Panel

The Performance panel collects detailed runtime data, but only once you click the Record button. It shows how the browser handles JavaScript execution, rendering, painting and layout during real user interactions.

It’s generally recommended to run performance tests in Incognito Mode, as browser extensions can interfere with results. By default, Incognito Mode disables extensions.

Performance Insights Panel

The Performance Insights panel provides a more guided view of performance problems. Rather than raw timelines, it highlights key issues such as long tasks and rendering delays, helping you focus on the areas that will have the biggest impact on user experience.

Memory Panel

When performance issues aren’t caused by slow network requests, memory usage can often be the culprit. The Memory panel helps identify problems such as memory leaks, memory bloat and excessive garbage collection.

A memory leak occurs when a page continues to consume more and more memory over time, often causing performance to degrade the longer the page is open. Memory bloat happens when a page uses more memory than necessary, while frequent garbage collection can cause noticeable pauses during use.

Application (Storage) Panel

The Application panel (often referred to as the Storage panel) displays everything a site stores in the browser. This includes:

• Cookies

• Local storage

• Session storage

• IndexedDB

• Cache storage

• Service workers

• Web app manifests

It’s especially useful when working with Progressive Web Apps (PWAs) or debugging login and state-related issues.

Security Panel

Designed primarily for site owners and administrators, the Security panel shows connection-specific information that helps explain why a site may or may not be considered secure.

Connections are grouped into:

• Main origin

• Secure origins

• Non-secure origins

• Unknown or cancelled requests

Green indicators denote secure connections, making it easier to spot potential problems at a glance.

Lighthouse Panel

Lighthouse analyses a page using a series of automated audits and provides scores and recommendations for improvement. The audits are grouped into:

• Performance

• Accessibility

• Best Practices

• SEO

• Progressive Web Apps

One of the biggest advantages of Lighthouse is that it’s solution-focused. It doesn’t just highlight problems — it also explains why they matter and suggests ways to fix them.

Recorder Panel

The Recorder panel allows you to record a user journey through a website and replay it to measure performance. You can emulate different devices and network conditions, replay interactions, and generate detailed performance traces.

Originally introduced as an experimental feature, Recorder is now a core part of the DevTools toolkit.

Issues Panel

The Issues panel pulls together problems detected across DevTools into one place. These might include security warnings, deprecated APIs, cookie issues or performance concerns, making it easier to spot and address problems without digging through individual panels.

Final Thoughts

Having a powerful set of tools built directly into your browser is vital for anyone working on the web. Chrome DevTools include everything you need to inspect, debug and optimise your site, all without leaving the browser.

There’s far more to this toolkit than we’ve been able to cover here, so treat this article as a primer and a gateway to deeper understanding. We’ll be adding further articles with tips, tricks and deeper dives into individual tools in the future, so keep checking back.

If there’s anything you think we’ve missed, let us know.