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 set of tools built into the browser for viewing and analyzing web pages. You can use it to:

  • view the page's HTML code and structure;
  • inspect CSS styles;
  • find an element and its attributes;
  • view network requests;
  • see JavaScript errors;
  • temporarily change the page's content or appearance.
Available only for the Chrome engine

image-20210601-124831

How to open the window?​

Click the corresponding button to the right of the address bar in ProjectMaker's browser:

image-20211226-161922

How it works​

Inspect Button​

Lets you quickly find the HTML code of the required element.

image-20210601-130008

Click it, then hover over an element on the page and click the element. The selected element will be highlighted on the Elements tab.

Elements Tab​

Displays the DOM of the current page.

image-20210601-125200

On this tab, you can:

  • examine the HTML structure;
  • view tags and their attributes;
  • change an element's text or HTML code;
  • add or remove an attribute;
  • temporarily hide or remove an element.
Changes apply only to the current tab

They disappear when the page is refreshed.

Searching with XPath​

You can use this window to test XPath queries.

image-20210601-124547

Open the Elements tab and press Ctrl + F:

  1. Enter plain text, an XPath query, or a CSS selector in the field that appears.
  2. Matching elements will be highlighted in the page code.

Console Tab​

Here you can run and test JavaScript code.

The code runs in the context of the open page, so it has access to the objects, functions, and libraries loaded on that page.

Once the code is ready, you can transfer it to ProjectMaker and run it using the JavaScript Code action.

Network Tab​

This tab displays network requests sent by the page while loading and during use.

If the request list is empty

Reopen the Network tab and refresh the page.

image-20210601-130903

Here you can view:

  • the request URL;
  • the HTTP method used;
  • headers and transmitted data;
  • the server response;
  • the status code, such as 200, 403, or 404;
  • the request duration.

This information is useful when creating your own HTTP requests.