Skip to main content

Web Developer Tools (DevTools)

Please read the Material Usage Rules on this site.

🔗 Original page — Source of this material

Description​

DevTools is a very powerful tool for working with HTML pages, analyzing requests, and debugging JavaScript.

Attention

Developer tools are available only for the Chrome engine.

image-20210601-124831

How do you open the window?​

You can open the window by clicking the corresponding button to the right of the address bar ❗→ browser ProjectMaker

image-20211226-161922

What is it used for?​

  • Interacting with the DOM model of the page (finding, removing, or modifying elements)
  • Analyzing the ❗→ requests made by the page

How to use​

Inspect Button​

image-20210601-130008

Click this button and hover your mouse over any element in the browser window—the element will be instantly highlighted on the Elements tab.

Elements Tab​

image-20210601-125200

In this tab, you can analyze and modify the DOM of the current tab—change the HTML code of elements (remove or add attributes), or cut out portions of the elements.

Searching with XPath​

You can use this window to test ❗→ XPath queries: open the Elements tab, press the Ctrl+F shortcut, and a search field will appear at the bottom of the window (1) (you can enter plain text, XPath, or CSS Selectors). The matched elements will be highlighted immediately (2).

image-20210601-124547

Console Tab​

Here you can write and debug JavaScript code. All code runs in the context of the current tab, so all modules, libraries, and objects loaded on the current page are available here. Once the code is ready, you can run it using the ❗→ JavaScript Code action.

Network Tab​

image-20210601-130903

Here you will see all requests made when the page loads. This can be very helpful when creating your own ❗→ requests.