[How To] Use The Browser Developer Tools (F12 DevTools)

It is often the case that solving problems in browsers involves using the Browser Developer Tools, or “DevTools” for short.

How to start DevTools

With the browser open in front of you, press the F12 key. You’ll see a set of panels appear, either at the bottom or at the side of the main browser window:

NOTE: I’m using Firefox, but IE/Edge and Chrome DevTools look much the same.

Note: The image shows the Firefox devTools attached to the browser window. You may prefer to “float” the DevTools in a separate window so that they are detached from the main browser window (in Firefox, this option resides under the […] menu visible on the right of the image).

For testing purposes (and to aid people trying to help you) you should become familiar with just three tabs and their associated panels:

  1. The Inspector
  2. The Console
  3. And sometimes but rarely, the Network.

Now let’s look at these in turn:

The Inspector

The Inspector allows you to inspect the HTML that makes up the page:

Actually, that’s not strictly true. The Inspector shows a representation of the current state of the dom, which is not necessarily the HTML as it was originally authored. How close are the two? That varies. And it my vary during the lifetime of the page. Regardless, for our purposes, it’s exactly what we need.

The image shows I have selected the <body> element (because it is highlighted in blue in the Inspector panel).

Hint: in the ‘inspector’ tab, right click on a given element. You will be amazed to find options like copy CSS or copy xpath (@bionel)

The two panels to the right are worth pointing out:

This is where you can inspect the CSS rules applied to the element you selected in the Inspector (the body element in the image).

The Console

The Console tab is used to output information (including errors and warnings) issued by the browser itself and by the webpage author (using JavaScript console.log messages).

Notice the cursor sitting on the blank line at the bottom of the panel? Among other things, you can test your selectors here.

Try it now. Bring up the forum main page in a new tab window, hit F12 and type this CSS selector in the browser console:

document.querySelector("body").style.backgroundColor = "pink"

You should see something like this:

You can also test other selectors, like XPaths. Try typing this into the console:


The Network

The Network tab shows all network traffic generated by the HTML page while it was loading and during its lifetime. This can be useful to inspect HTTP messages between the browser and the server and verify your WS calls are doing what you think they are doing.

  The Network tab showing network traffic on forum.katalon.com

  Inspecting the HTTP headers of a network request

Other Tips for using DevTools:

How to Watch Page Rendering, Step-by-Step

Editors: @Russ_Thomas @Brandon_Hein


Wow, very nice work :clap:

This is absolutely must-have knowledge for anyone trying to learn test automation.

1 Like

hint: in the ‘inspector’ tab don’t be shy and right click on a given element. you will be amazed to find out options like ‘copy CSS’ or ‘copy xpath’ … just saying

1 Like

Hi - useful tip of you’re trying to identify an element whilst JavaScript is running or just want to see a static page:

  1. Open the Sources panel in Developer Tools ( Ctrl+Shift+I ).
  2. Click the Pause button to Pause script execution .
    Also note the shortcut keys: F8 and *Ctrl+*

Thanks Dan. That’s a good tip.

I won’t be updating the head topic with that info - I feel it will deviate sharply from a basic introduction to the DevTools. Interfering with the page operation at that level can be extremely useful (as you no doubt are aware) but also problematic if one isn’t aware of the ramifications of stopping XHR/Fetch type calls in their tracks.

If you want to start another tip topic “How to stop Ajax in DevTools” or similar, please, be my guest.