[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).

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

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:

$x("//body")

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

8 Likes
How to get html with source code using getPageSource (was Cómo obtener html con código fuente usando getPageSource)
How to Watch Page Rendering, Step-by-Step
WebUiCommonHelper / executeJavaScript: script not running
Can click button at one point, but not at the other
Issue with Asset upload
Upload file button
Object with hyperlink and checkbox
Unable to find element (table)
Delay in fill fields Katalon Studio 7.0.0 RC2
Get text of React field/element
CAPCHA Regression Katalon Studio and Katalon recorder version 7.0
Problem clicking the button that needs scripting
How can I find and click elements in my calendar?
How to deal with duplicate fields
Unable to Select a Button within Email Body
Type first 2 characters then forced to pick from dropdown list
Issue clicking web element in salesforce lightning
Handling salesforce dynamic iframe using katalon
[How To] Groovy(JavaScript(CSS)) - Using CSS Selectors In JavaScript In Groovy In Test Cases
Please support identifying the Xpath for click in circles
Unable to click on object trash bin icon
How to enter value in iframe
Selecting information from a dynamic dropdown
Xpath on pop-up doesn't seem to exist
[TIP] How To Help Us Help You!
Unable to click on a button
JSON parse error: Unexpected character ('n' (code 110)): was expecting comma to separate Object entries
Not able to select list item in a drop down field by text
Tests run from the console (KRE) do not find items after inserting the information bar at the bottom of the page
Tests run from the console (KRE) do not find items after inserting the information bar at the bottom of the page
verifyElementHasAttribute should return boolean but instead forces ERROR
Click with react modal styled component not working

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+*
    https://stackoverflow.com/questions/13134723/how-to-terminate-script-execution-when-debugging-in-google-chrome
3 Likes

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.

2 Likes