[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:

$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

10 Likes
How to Watch Page Rendering, Step-by-Step
Can click button at one point, but not at the other
Xpath on pop-up doesn't seem to exist
WebUiCommonHelper / executeJavaScript: script not running
How can I get total count of objects in a page?
Upload file button
Issue with Asset upload
verifyElementHasAttribute should return boolean but instead forces ERROR
Tests run from the console (KRE) do not find items after inserting the information bar at the bottom of the page
JSON parse error: Unexpected character ('n' (code 110)): was expecting comma to separate Object entries
Insert data into another property of the object
What is the meaning of the word "visible" in the "given web element is visible within timeout." in Katalon?
Failure: Element could not be scrolled into view
JavaScript to click element with class but no ID
How to make Katalon Test Case listen to Javascript console.log() from Chrome
Automation problem
How to get the default value of input field
Stop page load forcefully
Unable to upload image file by using 'Upload File' method in Katalon Studio
Support for Frameworks with dynamic Html Element Id and Name Generation (Blazor)
How can I clear the value value of the input box? I try to use cleartext, but the original value is still there after saving
Add a bunch of data to a URL data entry loacation
Element not found but test passed
Unable to select a string in dropdown
Mouse Over not working
Learn CSS Selectors - with examples
Selecting information from a dynamic dropdown
Clicking on a hint in game doesn't activate the hint
Password field visibility
Unable to click on a button
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
How to deal with duplicate fields
Problem clicking the button that needs scripting
How to get html with source code using getPageSource (was Cómo obtener html con código fuente usando getPageSource)
[How To] Groovy(JavaScript(CSS)) - Using CSS Selectors In JavaScript In Groovy In Test Cases
Unable to Select a Button within Email Body
Element should have been select but was span
Testing AIO Reports in Jira Dashboards
[TIP] How To Help Us Help You!
Click with react modal styled component not working
Table dynamic Search
How to save a string coming from a HTML response
How to Drop and Drag files from windows explorer
See XHR in console
How to get the CSSValue for Background-position of an element when hovered
Cannot target input element
WebUI - unable to upload file which is scanned for viruses
Can't get value from field
How does one Click on the latest option in a table grid?
Best Practices for Using the Web Recorder in Katalon
How to select values in empty rows only
Locating objects via id?
Dynamic Objects How to Make
Unable to verify text of object because is stored as variable even though UI is text
Getting toast-type error
How to remove the WebelementNotFoundException by using options given under either Xpath or Attributes
I want to extract sentences after"~"
Differentiating between two buttons that look the same
Internet Explorer is unable to select value in dropdown list
Type first 2 characters then forced to pick from dropdown list
I am getting error when click on an element that appear after sometime
Clicking on a hint in game doesn't activate the hint
How to enter value in iframe
Advice on Katalon failure on valid Locator
Katalon takes old text even after clearing the field and passing new text to the field
Unable to click on object trash bin icon
Handling salesforce dynamic iframe using katalon
Issue clicking web element in salesforce lightning
How can I find and click elements in my calendar?
CAPCHA Regression Katalon Studio and Katalon recorder version 7.0
Get text of React field/element
Delay in fill fields Katalon Studio 7.0.0 RC2
Unable to find element (table)
Please support identifying the Xpath for click in circles
Object with hyperlink and checkbox

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
4 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