What are browser developer tools?

What are devtools?

Your browser's devtools show you the current state of the code rendered in your browser to create the webpage you can see. This may differ from the source code you wrote; the browser will correct malformed HTML, run JavaScript that may alter the markup or CSS, etc.

The devtools' functionality goes beyond viewing code, however — you can edit HTML and CSS to see how the UI is changed, run JavaScript against the live page to see the result, debug JavaScript (including viewing error messages), inspect network requests, emulate different viewport sizes, view accessibility information, and much more.

This article provides basic information on the most commonly used devtools functionality. For more information, consult the browser's dedicated resources:

• Firefox DevTools User Docs
• Chrome DevTools (Opera and Edge's inspector is the same)
• Safari Web Inspector

How to open the devtools in your browser

The devtools live inside your browser in a subwindow that looks like the following. It will differ depending on what browser you are using:

You can access the devtools in three main ways:

• Keyboard:

  • Windows and Linux: Ctrl + Shift + I or F12
  • macOS: ⌘ + ⌥ + I

• Menu bar:

  • Firefox: Menu (☰) ➤ More tools ➤ Web Developer Tools

  • Chrome and Edge: More tools ➤ Developer tools

  • Opera: Developer ➤ Developer tools

  • Safari: Develop ➤ Show Web Inspector

    Note: The Safari developer tools are not enabled by default. To enable them, go to Safari ➤ Settings ➤ Advanced, and check the Show features for web developers checkbox.

• Context menu: right-click an item on a webpage (Ctrl-click on the Mac), and choose Inspect Element/Inspect from the context menu that appears. (A bonus: this method immediately highlights the code of the element you choose to inspect.)

The Inspector: DOM explorer and CSS editor

The developer tools usually open by default to the inspector, which looks like so:

This tool shows what the HTML on your page looks like at runtime, as well as what CSS is applied to each element on the page. It also allows you to instantly modify the HTML and CSS and see the results of your changes reflected live in the browser.

If you don't see the inspector:

• Firefox: Select the Inspector tab.
• Other browsers: Select the Elements tab.

Exploring the DOM inspector

For a start, right-click (Ctrl-click) an HTML element in the DOM inspector and look at the context menu.

The available menu options vary among browsers, but the important ones are mostly the same:

• Delete Node (sometimes Delete Element): Deletes the current element.
• Edit as HTML (sometimes Add attribute/Edit text): Lets you change the HTML and see the results on the fly. Very useful for debugging and testing.
• :hover/:active/:focus: Forces element states to be toggled on, so you can see what their styling would look like.
• Copy/Copy as HTML: Copy the currently selected HTML.
• Some browsers also have Copy CSS Path and Copy XPath available, to allow you to copy the CSS selector or XPath expression that would select the current HTML element.

Try editing some of your DOM now. Double-click an element, or right-click it and choose Edit as HTML from the context menu. You can make any changes you want, but you cannot save your changes.

Exploring the CSS editor

By default, the CSS editor displays the CSS rules applied to the inspected element. This is in its own panel in some browsers, and inside a Styles tab in others.

Note the following features:

• The rules applied to the current element are shown in order of most-to-least-specific.
• Click the checkboxes next to each declaration to see what would happen if you removed the declaration.
• Click the little arrow next to each shorthand property to show the property's longhand equivalents.
• Click a property name or value to bring up a text box, where you can key in a new value to get a live preview of a style change.
• Next to each rule is the file name and line number the rule is defined in. Clicking that rule causes the devtools to show it in its own view, where it can generally be edited and saved.
• Click the closing curly brace of any rule to bring up a new line where you can add a new declaration to the rule, which will be applied to the page.

You'll notice several other clickable tabs in the CSS editor, such as:

• Computed: This shows the computed styles for the currently selected element (the final, normalized values that the browser applies).
• Layout: This shows the details of layout modes such as CSS grid and flexbox applied to the inspected element, if any.
• Fonts: In Firefox and Safari, the Fonts tab shows the fonts applied to the current element.

The box model view visually represents the current element's box model, so you can see at a glance what padding, border, and margin are applied to it, and how big its content is. In Firefox, this is located in the Layout tab; in other browsers, it is in the Computed tab.

In some browsers, the JavaScript details of the selected element can also be viewed in this panel. In Safari, these are unified under the Node tab; they are in separate tabs in Chrome, Opera, and Edge.

• Properties: The properties of the element object.
• Event Listeners: The events associated with the element.

Find out more

Find out more about the Inspector in different browsers:

• Firefox Page Inspector
• Chrome DOM inspector (Opera and Edge's inspector is the same)
• Safari Elements tab

The JavaScript debugger

The JavaScript debugger allows you to watch variable values and set breakpoints: places in your code where you want to pause execution and identify any problems preventing your code from executing properly.

To get to the debugger:

• Firefox: Open the Developer tools and select the Debugger tab.
• Other browsers: Open the Developer tools and select the Sources tab.

Exploring the debugger

Each browser's JavaScript debugger is divided into three panes. The layout of these differs across browsers; this guide uses Firefox as a reference.

File list

The first pane on the left contains the list of files associated with the page you are debugging. Select the file you want to work with from this list. Click a file to select it and view its contents in the Debugger's center pane.

Source code

Set breakpoints where you want to pause execution. In the following image, the highlight on line 18 shows that it has a breakpoint set.

Watch expressions and breakpoints

The right-hand pane shows a list of the watch expressions you have added and breakpoints you have set.

• The first section, Watch expressions, shows that the listItems variable has been added. You can expand the list to view the array values.
• The next section, Breakpoints, lists the breakpoints set on the page. In example.js, a breakpoint has been set on the statement listItems.push(inputNewItem.value);.
• The final two sections only appear when the code is running.
  • The Call stack section shows you what code was executed to get to the current line. You can see that the code is in the function that handles a mouse click and that it is currently paused at the breakpoint.
  • The final section, Scopes, shows what values are visible from various points within your code. For example, in the image, you can see the objects available to the code in the addItemClick function.

Find out more

Find out more about the JavaScript debugger in different browsers:

• Firefox JavaScript Debugger
• Chrome Debug JavaScript (Opera and Edge's debugger is the same)
• Safari Sources tab

The JavaScript console

The JavaScript console allows you to run lines of JavaScript against the page currently loaded in the browser and reports errors encountered as the browser tries to execute your code.

To access the console in any browser, open the developer tools and select the Console tab. This will give you a window like the following:

To see what happens, try entering the following snippets of code into the console one by one (and then pressing Enter):

alert("hello!");

document.querySelector("html").style.backgroundColor = "purple";

const loginImage = document.createElement("img");
loginImage.setAttribute(
  "src",
  "https://mdn.github.io/shared-assets/images/examples/login-button.png",
);
document.querySelector("h1").appendChild(loginImage);

Now try entering the following incorrect code snippets and see what you get.

alert("hello!);

document.cheeseSelector("html").style.backgroundColor = "purple";

const loginImage = document.createElement("img");
banana.setAttribute(
  "src",
  "https://mdn.github.io/shared-assets/images/examples/login-button.png",
);
document.querySelector("h1").appendChild(loginImage);

You'll start to see the kind of errors that the browser returns. Sometimes, these errors are fairly cryptic, but they will start to become more familiar as you get more experience.

Find out more

Find out more about the JavaScript console in different browsers:

• Firefox Web Console
• Chrome Console (Opera and Edge's console is the same)
• Safari Console Object API and Console Command Line API

The Network inspector

The Network inspector allows you to examine the network requests and responses involved in fetching all the HTML documents, images, CSS, JavaScript, and other resources that go together to render a website in your browser.

To access it, open the developer tools and select the Network tab. This will give you a window like the following:

There's a lot of information here, but at a basic level, it is useful to see what files your site requests and whether they load successfully.

As an example, if you see a 200 status code, a resource has been delivered successfully, but if the code shows as 404, it means the resource couldn't be found; you might have an incorrect file path or filename to fix, or maybe you forgot to upload it to the server.

HTTP statuses

Servers respond with a status message whenever they receive a request. Here are the most common statuses:

200: OK

The resource you asked for was delivered.

301: Moved permanently

The resource has moved to a new location. You won't see this much in your browser, but it's good to know about "301" since search engines use this information a lot to update their indexes.

304: Not modified

The file has not changed since the last time you asked for it, so your browser can display the version from its cache, resulting in faster response times and more efficient use of bandwidth.

403: Forbidden

You aren't allowed to display the resource. Usually this indicates a configuration mistake (e.g., your hosting provider forgot to give you access rights to a directory).

404: Not found

Self-explanatory: The requested resource could not be found at the specified location.

500: Internal server error

Something went wrong on the server. For instance, the server-side language (PHP, .Net, etc.) stopped working, or the web server itself has a configuration problem. Report such problems to your hosting provider's support team.

503: Service unavailable

Usually resulting from a short-term server overload. Try again in a little while.

Find out more

Find out more about the Network Inspector in different browsers:

• Firefox Network Monitor
• Chrome Network panel (Opera and Edge's network panel is the same)
• Safari Network Tab

See also

• Debugging HTML
• Debugging CSS