Web developer tools (DevTools)

Owned by Stanislav N. (Unlicensed)
Last updated: Jul 23, 2024 by ZL Support
2 min read

Please read the Terms of Use for Materials on ZennoLab

Table of contents

Description

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

Web developer tools are only available for the Chrome engine.

How to open a window?

You can display the window by clicking on the corresponding button to the right of the address bar of the ProjectMaker browser

What is it used for?

  • Interaction with DOM page model (search for elements, deletion, modification)

  • Analysis of the requests made by the page

How to use

“Inspect” button

Click this button and move the mouse cursor over any element in the browser window and this element will immediately be highlighted in the Elements tab.

Elements Tab

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

XPath search

This window can be used to test XPath queries: open the Elements tab, press the key combination Ctrl + F, a field for entering a search phrase (1) will appear at the bottom of the window (you can enter simple text, XPath, CSS Selectors).
Found items will immediately be highlighted (2).

Console tab

Here you can write and debug JavaScript code. All code is executed in the context of the current tab, i.e. all modules, libraries, objects that are loaded on the current page are available here.
When the code is ready, you can run it using the JavaScript Code action

Network tab

All requests that were sent when loading this page will be displayed here. This can be very helpful when writing custom queries.

Useful links