Use of Google Developer Tools-newcomer

Usage of Google Developer Tools

1. Independent window

 

2. Elements

View and edit elements on the page, including HTML and CSS

Scenario 1: view the Promotion Code

 

Scenario 2: view the attributes of an element, such as nofollow

 

Scenario 3: Ctrl + F: Write the element's XPath path in the search box. If the elements element line is selected, the path is correctly written. The following example shows how to locate the post sourcing request button:

 

3. Network

Analyze website network requests

 

Double-click a file to view the details page (such as the requested IP address, URL, method, and status code of the Request result)

 

Practical scenarios: for example, if the RFQ page is released and attachments are uploaded and remain buffered, you can view the Request status through the network. If there is any problem, click initiator to go to the specific code page, you can locate file/method errors during testing to help developers solve problems quickly.

 

4. Sources

Check the running script. The code is usually debugged at sources.

On the script code number, click "add breakpoint", refresh the webpage, and run the program to the breakpoint to view the debugging result.

5. Timeline

Specifies the JS execution time, page element rendering time, and click record at the bottom of the page to start recording and executing the content.

6. Profiles

Mainly for performance optimization, view CPU execution time and memory usage

7. Resources

View the resources loaded by the request, such as CSS, JS, cookies, and session storage.

8. Audits

Optimize the front-end page to accelerate the loading speed of the webpage. Select the condition and click Run to start the Analysis page and get the analysis result.

9. Console

It refers to the Javascript console.

A. Check the error message.

 

Click the file next to the red letter error to locate the code

B. View functions and methods through APIS

 

C. Compile scripts

 

 

Use of Google Developer Tools-newcomer