What are dev tools?
Dev Tools is a free tool built into the browser. It’s very popular in the developers world, but testers can also benefit from it. Facilitating the work of yourself and the creator, e.g. by detailed bug reporting with the help of information found in developer tools.
How do I start the dev tools?
There is nothing easier, just open the browser and the page you want to test and then click the F12 function button. Dev tools work on practically all browsers. A browser that we will not use developer tools on is, among others, Internet Explorer. However, it is also the browser that statistically uses the fewest people.
What and how can we read in this magic tool?
Let’s start by setting the dev tools window to be the most convenient for us to use. We have 4 possible settings: In a new window, on the left side, bottom of the screen and on the right side. It all depends on our visual preferences.
The arrow on the left side of the dev tools window is called inspector. This feature allows us to examine selectors of specific elements on the page. All indicators are displayed in the elements tab. We are dealing with the structure of HTML and CSS. Certainly, it is often used in test automation using, for example - SeleniumWebDriver. It will also be helpful when you testing websites. When reporting a bug, it is worth describing a specific selector in it, the programmer will certainly find it easier to fix it.
Mobile phone or tablet resolution emulator? We can also choose this option in developers tools.
By testing web applications, websites or PWA applications. When you testing this type of application, we do not need to have a background of mobile devices, because we just need to use free simple tools. We have a large selection of devices with different resolutions, so it’s easy to check several test cases in one place without changing the physical device.
Console — It is kind of the container that holds the logs. Adding a screen from this tab will certainly please the programmer to whom the error on the page was reported.
Network — Each time the user moves on the website in the network tab, we get detailed information on the network traffic between the user’s web browser, i.e. the client and the server. In the network tab, you can check what we receive from the server, i.e. its resources, http response codes, types of files being sent, i.e. their format, e.g. png, doc, text, etc., time of response and delivery of the resource etc. . In this tab, testers may notice elements that extend the loading time.
The performance tab allows us to analyze the application or website in terms of its performance. The charts appearing in this tab allow us to check when the website is most loaded. When checking performance, it is also worth taking a look at the memory tab, which will show us what the memory was used for at a particular moment.
Dev tools not only for developers
Dev tools contain a lot of functions. I have focused on the most general features of this tool to outline its nature. With experience, everyone will be able to use them more and more fluently. Thanks to development tools, the work of testers can be easily made more enjoyable and will help in a better and more accurate way of describing bugs reported to developers.