[This article has authorized the exclusive use of the public account of the Nuggets Developer community, including but not limited to editing, marking the original rights.]
1. View element pseudo-class CSS styles
For example, I want to look at the CSS style of an element that triggers hover. Select the element first and then do the following:
2. Add or delete element class temporarily
3. document.body.contentEditable="true"
In the console input document. Body. ContentEditable = “true”, you can edit the page directly.
4. Look at placeholder styles
You can now look at the placeholder style of the element:
5. Test page performance and SEO
Here is the test report:
References:
- Use Lighthouse to review Web applications
6. Network Displays other information about the resource
A Network normally displays the details of loaded resources, but by default it displays only partial information. What if I want to check whether a web resource is loaded via HTTP1.1 or HTTP2?
As you can see from the GIF, you can view other information besides the HTTP protocol version, such as the method of the HTTP request, the domain name, and so on.
7. View element binding events
Move the cursor over handler to view the specific function code.
8. Global search code
Open the Developer tools, click the Console TAB, and press ESC to pop up:
Click on the three vertical dots to the left and select Search:
Clicking on the search results will jump to the specific source file. It searches for all incoming files under that page.
9. Use Performance to check runtime Performance
Open developer tools and click on the Performance TAB:
Click the Record button in the upper left corner to start recording, then you use the web page as a normal user. When the test is complete, click Stop.
In the upper right corner you can see FPS, CPU, NET, HEAP:
- FPS corresponds to frame rate, and red indicates low frame rate, which may degrade user experience; Green means the frame rate is normal. The higher the green bar, the higher the FPS.
- There are yellow and purple color blocks on the CPU. See the lower left corner of the figure for their definitions. Whose percentage is high indicates where the CPU is spending most of its time.
- HEAP means HEAP memory usage.
NET best click the following Network to view, you can see the specific loading resources.
This information is often used to determine where a web page performance problem is.
If you want to learn more, check out the resources below, need to turn Qiang. Or search chrome Performance in a search engine, and there are plenty of articles explaining how to use it.
The resources
- Get Started With Analyzing Runtime Performance
Detect webpage changes in real time
Open the Developer tools, click the Console TAB, and press ESC to pop up:
Click on the three dots arranged vertically on the left and select Rendering:
Here are some useful features:
- Flashing from Paint, real-time highlight redrawing area (green).
- Layout Shift Regions in real time (blue)
- Layer Borders, which marks the composite Layer with a border (orange, olive, cyan).
- Frame Rendering Stats, which displays GPU information, older versions have real-time FPS display, but newer versions don’t have it (Chrome 86).
11. Application View Application information
As you can see from the figure, a lot of information about this page can be found under the Application TAB. Taking localStorage as an example, now I execute localstorage.setitem (‘token’, ‘123’) and open Application:
No accident, you can see the new localStorage information.