Practical functions of the tool provided by IE developers

Practical functions of the tool provided by IE developers

F12 shortcut to call up Developer Tools

I. JS content formatting

1. js scripts with messy content:

2. Select the following two options for the formatting Script: automatic line feed and formatting JS

3. Clear scripts

 

Ii. Clear the Console

1. Right-click and clear

2. console. clear ()

 

3. Use the console instead of alert ()

When you need to debug the values in the Code but do not want to interrupt the code execution, we can use:

Window. console. log ("HelloWorld ");

In the console.

 

Iv. breakpoint shortcuts for debugging JS

F9: Add/Remove breakpoints

F10: Process by process, that is, skip the methods and expressions in the statement.

F11: Statement-by-statement debugging, that is, one-step debugging, jumps into methods and expressions for statement-by-statement tracing debugging.

 

5. Select the relevant HTML source

1. Click this

2. obtain the corresponding css and html

 

6. Probe: used to detect the call time of each function and analyze the webpage performance experience

Cool, all are 0.00 --! My network speed is good, haha!

 

7. Roles of networks

1.304 results, which indicates that the data is directly obtained from the cache

2.200 indicates that the required file is successfully returned.

3.404 indicates that the file does not exist

4.503 indicates that the server is temporarily unavailable

5.500 indicates that an internal error has occurred on the server.

 

HTTP Request Header, request body, Response Header, response body, Cookie related to the File Download behavior, initiator, and more detailed timing information than in the summary view. That is to say, the detailed view has already displayed all the protocol-level information about how the browser communicates with the server. This information is undoubtedly a rare opportunity for developers and debugging personnel, through these tools, you can easily debug your website.