The most used functional pages when testing and debugging are: elements (ELements), console (Console), source code (Sources), network (Network) and so on.
- Elements: used to view or modify the attributes, CSS attributes, monitoring events, breakpoints of HTML elements (DOM breakpoints: In JavaScript debugging, we often use breakpoint debugging, in fact, in the debugging of DOM structure, we You can also use the breakpoint method, which is DOM Breakpoint (DOM breakpoint))
- Console (Console): The console is generally used to execute one-time code, view JavaScript objects, and view debug log information or exception information.
- Source code (Sources): This page is used to view the HTML file source code, JavaScript source code, CSS source code of the page, and most importantly, it can debug the JavaScript source code, and add breakpoints to the JS code.
- Network: The network page is mainly used to view information related to network connection such as headers.
Elements
View element code: Click the arrow as shown in the figure (or use the shortcut key Ctrl+Shift+C) to enter the select element mode, then select the element to be viewed from the page, and then locate it in the Elements column of developer tools to the specific location of the element's source code.
View element attributes: You can view parts from the located source code, such as class, src, or you can view all attributes in the sidebar on the right, as shown in the following figure.
Modify the code and attributes of an element: you can directly double-click the part you want to modify, and then modify it, or select the part you want to modify and right-click to modify it, as shown below
This modification is only effective for the current page rendering, and will not modify the source code of the server, so this function is also used as a debugging page effect. The introduction of the functions in the sidebar on the right: as shown in the figure below
Console:
- View JS objects and their properties
- Execute JS statement
- View console log: When the console.log() function is used in the JS code of the web page, the log information output by this function will be displayed in the console. Log information is generally enabled during development and debugging, and when it is officially launched, the function is generally removed.
Source code (Sources) as shown in the figure:
Network
I have already said it, if you are interested, you can take a look
Google Chrome F12 (Developer Tools)----Network_Ah Sei's Blog - CSDN Blog