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:
- The Inspector
- The Console
- And sometimes but rarely, the Network.
Now let’s look at these in turn:
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).
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 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