How to Use Chrome Web Developer Tools: Complete DevTools Guide

Modern websites require powerful debugging tools, and Chrome’s built-in web developer tools (also called developer toolbar or DevTools) provide everything you need. Here’s how to access Chrome developer tools instantly:

Quick access methods:

• Keyboard shortcuts: F12 or Ctrl + Shift + I (Windows/Linux) | Cmd + Option + I (Mac)
• Right-click method: Right-click any webpage element → select “Inspect”
• Chrome menu: Three-dot menu → More tools → Developer tools

Now let’s explore what these powerful browser developer tools can do for your web development workflow.

What is Chrome Developer Tools?

Chrome Developer Tools is an extensive set of built-in utilities that allow developers to:

• Inspect and edit HTML and CSS in real time
• Debug JavaScript code
• Analyze website performance
• View network activity and metadata
• Test responsive designs

In short, Chrome DevTools is essential for anyone working on front-end development, optimization, or troubleshooting web applications.

Now that we’ve understood what Chrome Developer Tools is, let’s learn how to debug HTML and CSS using Chrome DevTools.

How to debug HTML and CSS using Chrome DevTools

When laying the foundation for your own web app, it’s common practice to test your code by opening your HTML file in the browser and checking it out for yourself. Your HTML doesn’t need to be hosted on a server to do this! You can just open a new tab in Chrome and hit Cmd + o (Ctrl + o on Windows) or “File” > “Open” to browse your computer for your HTML file. Once your file is up, see if it’s doing what you expected. If something seems off, open the DevTools by following the instructions above and start investigating.

The “Elements” tab contains a real-time, interactive DOM (short for document object model). The DOM is the data structure that stores all of your HTML. Play around with it! You can change anything in the DOM and see results instantly. The only catch is that once you reload the page, your changes will disappear – so don’t refresh without copying any changes you want to hold on to.

The CSS you wrote will be available in the “Elements” tab as its own scrollable section. You can find this on the right side of the DevTools window under “Styles”:

Just like you could with your HTML elements in the DOM, you can change any property or value here and see the results in real-time. Maybe the rule you wrote for image tags is not positioning them the way you expected, or you want to change a background color or font size. Experiment all you want here until you like what you see. But remember, you have to change the source code – the HTML and CSS files you loaded into the browser from your computer – or the changes you make in DevTools will disappear as soon as you reload the page.

We learned how to debug HTML and CSS using Chrome Developer Tools, but what about debugging JavaScript?

How to debug JS using Chrome DevTools

If you’ve written custom JavaScript or jQuery functions to enhance your web app, you have full access to your code inside DevTools. Access your variables and functions or write new ones and watch them change the behavior of your web page within the DevTools console. If your code has syntax errors, or if files necessary to make your JavaScript run can’t be accessed, you’ll see error messages in the console. The error messages will give you concise descriptions about the nature of the problem.

To start using the console, navigate to the rightmost tab, titled “Console.” Test that your JavaScript has loaded by starting to type in the name of one of your functions. If you see a pop-up with a list of functions that includes your function’s name, you know that DevTools is reading your JavaScript file. In the example below, DevTools has found my custom function, saysHello().

Remember, the DevTools console is a full JavaScript interpreter. It can run any valid JavaScript expression you type in it. If you’re linked to a library, like jQuery, it has access to all jQuery’s functions, too.

Console pro tips:

• While writing JavaScript in the console, you may find that the screen fills up pretty quickly with code and error messages. On Macs, Ctrl + K (Ctrl + L on Windows) clears the console so you can start with a fresh screen. Your previous lines of code are not lost. Use the  arrow key to restore cleared lines.
• In the console, the Return (a.k.a, “Enter”) key immediately executes your code. So, if you want to write multi-line functions, like the one below, use Ctrl + return (Shift + Enter on Windows) at the end of the line to jump down to a new one.

The DevTools console is excellent for helping you understand what JavaScript can and can’t do, and giving you instant feedback through error messages and real-time changes to your page. DevTools also has the more advanced V8 debugging tool in the “Sources” tab, which is out of the scope of this article. If it piques your interest, you can learn more about it here.

Lastly, let’s discuss how to view metadata using Chrome Developer Tools.

How to view metadata using Chrome DevTools

The “Network” tab – the second tab over from the left, next to “Elements” – contains valuable data about network operations, which are communications between your web browser and the server providing you the web page. If the tab is blank when you open it, you may have to click reload to fill in network data.

The Network tab looks complicated at first, but it’s worth getting familiar with.

It’s a lot, right? Don’t be overwhelmed. Just focus on the table in the bottom half of the tab. Specifically, we’re just going to look at a few of those headers:

Name: This is the column where you can view the name of every resource, a.k.a, every file, that is needed to create the web page you’re looking at. Scroll through the list and check out the file extensions. Can you figure out what types of files they are? See any .js or .png?

Method: This column might not be listed by default. If you don’t see it, hover your mouse over any header and press Ctrl + Click or Right Click to see a full list of headers. (Please note: this works for Macs only).

Under the Methods column, it just says, “GET, GET, GET, GET, GET …” What does that mean? GET is the most common HTTP method: a request for data. The method literally goes and gets resources from a server and brings them back to your web browser. Other methods you might see in this column are POST or DELETE. The POST method brings new data to the server. You’ll see this one when you hit “submit” to create a new user profile on a web page. DELETE is a method that tells the server to delete information.

Status: Status codes are reports that the server gives to the client (your web browser in this case) about the requested resource. You should see a lot of 200 codes, meaning that the resources for the web page you requested came over “okay” from the server. 404 errors are also particularly important. They’ll be highlighted in red. You can read more about 404 errors and what they mean here.

Type: Here is where you can see what type of file the resource is. Scan the list for .css, .html, .js or file extensions for media files.

Size: This column shows you the file size of a resource in bytes. Which file would you expect to have more bytes: a CSS stylesheet or a video?

Time: This column shows you exactly how long it took each resource to load, from the instant it was requested until the last byte loaded in your browser. If you’re on a new computer and have a strong internet connection, most of the resources you’re looking at will have loaded in a matter of milliseconds. Pretty amazing, right?

Conclusion

In this tutorial, we had a detailed discussion on Chrome Developer Tools. We covered what it is and how it helps developers streamline their workflow. We learned the different ways to access developer tools on Windows, Linux, and macOS. Most importantly, we discussed how to use it to debug HTML, CSS, and JS as well as view the metadata of our web app.

Chrome DevTools provides everything a developer needs to inspect, debug, and optimize websites. From live editing of HTML/CSS to advanced JavaScript debugging and metadata analysis, Chrome Developer Tools is indispensable for building better, faster, and more secure websites.

If you want to enhance your web development skills, check out the Front-End Engineer course on Codecademy.

Frequently asked questions

1. How do I open DevTools in Chrome?

Use F12 or Ctrl + Shift + I on Windows/Linux, or Cmd + Option + I on Mac to open DevTools in Chrome.

2. What is Chrome DevTools used for?

Chrome DevTools is used to inspect, edit, debug, and optimize websites directly within the Chrome browser.

3. Is Chrome DevTools free?

Yes, Chrome DevTools comes built into the Chrome browser at no extra cost.

4. What are the benefits of DevTools?

The biggest benefit of Chrome DevTools is speed and precision in debugging. Instead of blindly editing code and refreshing the page, you can:

• Inspect and edit HTML/CSS live to instantly test changes.
• Debug JavaScript step by step without extra setup.
• Analyze performance bottlenecks (slow scripts, large images, network delays).
• Simulate mobile devices and slow networks without external tools.
• View metadata, SEO tags, and security details in seconds.

5. What is the difference between Selenium and DevTools?

Selenium and DevTools are both powerful, but they serve very different purposes:

• Chrome DevTools is a browser debugging toolkit. It’s interactive, developer-focused, and used to inspect, edit, and troubleshoot code inside Chrome. You use it while building or debugging a site.
• Selenium is an automation framework. It’s designed for running automated tests across browsers. Developers and QA teams use Selenium to simulate user actions (clicks, typing, navigation) and verify site behavior at scale.