Developer tools in browser. Elements tab

Information about developer tools can be found in our previous article —  «Developer tools in browser. Console tab».

In this article we will look through the Elements tab, the main purpose of which is the display of the code in the form of the DOM elements tree. With the help of this tab, one can look through the code but also change it by clicking the element needed by the right button: add and edit the attributes, hide or delete elements from the code, add subclasses. Сhanges that happened in the Elements tab are applied only locally and will disappear after refreshing the page. This is why this tab is used to test the change of the elements on the page as well as attributes, search of the element needed in code and more detailed information about its properties.

In order to highlight the needed element in the structure, one can use two ways:

1. Click the «Select an element in the page to inspect it» button.

2. Point the cursor on the element needed on the page and it will be highlighted in blue in code.

Keyboard buttons can be used to move within the lines of the code and to maximize the sub elements, the right arrow button must be pressed, to minimize — press the left one.

How to change the elements of the page? 

It is worth reminding that the changes do not influence the data on the server and will be applied only on the PC of the peculiar user and deleted after refreshing the page.

In order to hide the elements from the page, one needs to mark it by tapping the H button or pressing the right button and choosing the «Hide element» option in the context menu. In order to delete the element, the actions are the same with the Delete button or «Delete element» button.

In order to make changes in the HTML element, focus it in the structure and press F2. After that opens the window where the attributes and content of the tag can be changed or even added.

Tags can also be changed in the context menu that is shown after the right click on the element in the code.

In order to change the dynamic element that is displayed after pointing over another element, the first thing to do is to display it on the page and then open the developer tools with the help of the F12 button and choose the element by pressing Ctrl + Shift + C combination.

In the Copy menu, one can cut or duplicate the element as well as to choose different ways of copying it.

One more useful function – Force state. It helps to imitate different states of the elements, for example, the hovering or clicking.

On the Element tab there are additional tabs that are also important.

Down the Styles tab and on the Computed tab there is a block system of the element and it’s styles, borders and sizes as well as the indents and intervals around the element.

Important function of the Element tab is emulation of the view of the page from the mobile device. After clicking the «Toggle device toolbar» button, the window with the mobile device view is opened, where one can choose the device needed or even apply the needed screen parameters.

Usage of the Elements tab and developer tools in general is crucial for testers who strive to understand the technical side of testing and increase the quality of the testing performed and the documentation written. The developer tools can provide the tester with a lot of useful details to reproduce the bug and fix it.