...
Description
DevTools is a very powerful tool for working with HTML pages, analyzing requests, debugging JavaScript.
| Note |
|---|
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 your own queries.
...
Useful links
Official documentation (in English)
Overview of all Chrome DevTools developer tools (Habr)
Traffic window