Opening of developer tools
Right-click on the page and select the review element;
or open the Tools--developer Tools;
or open with a shortcut key Command Option + I ;
Then you'll see eight tools on top:
Elements: Allows us to view the page from a browser's perspective, which means we can see the HTML, CSS, and Dom (Document object Model) objects required by Chrome to render the page. In addition, you can edit these content to change the page display effect;
Network: You can see which resources the page has requested from the server, the size of the resources, and the time it takes to load the resources, and of course see which resources are not loaded successfully. In addition, you can also view the HTTP request header, return content, etc.;
Sources: Mainly used for debugging JS;
Timeline: Provides a complete analysis of the time spent loading the page, all events, from downloading resources to processing JavaScript, calculating CSS styles and other time spent in the Timeline;
Profiles: Analyze the execution time and memory usage of Web application or page;
Resources: Validation and editing of data in local caches (IndexedDB, Web SQL, cookies, application caches, Web Storage);
Audits: Analyze the process of page loading, and then provide a solution to reduce page load time and improve response speed;
Console: Displays various warnings and error messages, and provides the shell for interacting with documents and developer tools.
*dom= Document Object Model, which provides a platform-and language-independent way to access and modify the content and structure of a document. In other words, this is a common way of representing and working with an HTML or XML document.
The DOM is actually a document model that is described in an object-oriented manner. The DOM defines the objects that are required to represent and modify the document, the behavior and properties of those objects, and the relationships between those objects. You can think of the DOM as a tree representation of the data and structure on the page, although the page may not be implemented in this way.
Each element in the HTML <body>、<p> is a DOM node, for example, and all DOM nodes make up the DOM tree. We can completely think of the entire page as a DOM tree, and the HTML element tag as a DOM node.
After you select the DOM object, right-click to see some of the auxiliary features, which are visible at the top of the page:
Add Attribute: Add a new attribute to the tag;
Force Element State: Sometimes we add dynamic styles to the page elements, such as when the mouse hovers over the elements, and this dynamic style is difficult to debug. We can use Force Element State force element states to facilitate debugging, such as:
![图4. 强制元素状态][4]Edit as HTML: Changes the page element in HTML form;
Copy XPath: copying XPath;
Delete node: Deletes the DOM node;
Break on: Sets the DOM breakpoint.
On the right is the CSS style diagram when the label is selected,
Styles: Displays user-defined styles, such as the styles in the requested Default.css, the styles generated through Javasript, and the styles added by the developer tools;
Computed: Displays the developer tools calculated element style;
Event Listeners: Displays all JavaScript event listeners for the current HTML DOM node and its ancestor nodes, where the listener script can come from a plugin from chrome. You can click the Small funnel shape (filter) on the right to select the event listener that displays only the current node.
Dom Breakpoints: Lists all the DOM breakpoints;
Properties: Super-comprehensive list of attributes for the current selection, but rarely used.
Use the style in general
The + sign in the figure is to New style rule add a new selector for the current label, and the newly created style is Inspector-stylesheet. In addition, it can be added and modified directly in the original style.
On the right side of the new style rule, select Toggle Element State the selection box that appears, and if selected :hover , you can see the CSS style when the mouse hovers over the page element, similar to the previous force Element Satte, and more can be seen: hover State in Chrome Developer Tools .
Summary of Chrome Developer tools usage
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
