An explanation of the practical functions of IE developer tools_html/css_WEB-ITnose

F12 shortcut key to call up developer tools

1. JS content formatting

1. JS script with messy content ：

2. Check the following two items to format the script: automatic line wrapping and formatting JS

3. Make it clear Script

2: Clear the console

1. Right-click -> Clear

2. console.clear()

Three: Use console instead of alert()

When you need to debug the code When the value does not want to interrupt the execution of the code, we can use:

window.console.log("HelloWorld");

to view it on the console.

Four: Breakpoint shortcuts when debugging JS

F9: Add/remove breakpoints

F10: Process-by-process, that is, skipping methods, expressions, etc. in the statement

F11: Statement-by-statement debugging, that is, single-step debugging, will jump into methods and expressions, and perform statement-by-statement tracking debugging

Five: Select the corresponding HTML and its related source

1. Click this

2. Get the corresponding css and html

Six: The role of the profiler: used to detect the call time of each function and analyze the web page performance experience

Good Oh no, it’s all 0.00 - -! My internet speed is good, haha!

Seven: The role of the network

The result of 1.304, which shows that these data are obtained directly from the cache

2.200 means that the required file was successfully returned

3.404 means that the file does not exist

4.503 means that the server is temporarily unavailable

5.500 means that an internal problem occurred in the server Errors etc.

HTTP request header, request body, response header, response body, cookies related to the file download behavior, initiator, and summary view for more detailed timing information. In other words, the detailed view has shown us all the protocol-level information on how the browser communicates with the server. This information is undoubtedly rare and good information for developers and debuggers, through which they can debug the website. Work becomes very easy.