Chrome Developer Tools (referred DEVTools) is embedded in the Google Chrome browser, a set of web authoring and debugging tools, provided skilled use of developer tools are well known in the meaning and role of its various modules represented. The following will combine learning and development experience, to expand the introduction of each module, deficiencies hope criticism. Right Select inspection or press the F12 key, the module used directly as:
Developer Tools commonly used panel
Figure, Chrome developer tools including Elememts, Console, Sources, Network, Performance, Memory, Application, Security, Audites and Layers10 function panel. Which related to the page and commissioning panel Elememts, Console, Sources, etc., and performance-related panels are mainly Network, Performance and so on. Functional division of the panels substantially as follows [1] :
Elements panel: You can view the DOM structure, CSS style editing, page layout and design for test page;
Console panel: can be seen as JavaScript Shell, can execute JavaScript scripts, but also through the Console object interaction and Javascript pages;
Sources panel: see all the files loaded Web applications; editing CSS and JavaScript file contents; will upset the CSS or JavaScript format; supports debugging of JavaScript; set up your workspace to save the changed file to a local folder;
Network Panel: Show all requests in the table of contents page, can view each request header, the request line, request information body, such as time lines and waterfall network request;
Performance panel: recording and viewing application lifecycle events, and to affect the performance of some of the main points in the implementation process analysis;
Memory Panel: JavaScript to view during operation of heap memory occupancy, tracing of memory leaks and so on;
Application Panel: View data storage situation Web application; the basic data PWA; IndexedDB; Web SQL; local and session storage; Cookie; application cache image fonts and style sheets;
Security Panel: Displays the current page some basic safety information;
Audites panel: current page will be diagnosed web application and web performance, optimization and give some suggestions;
Layers panel: show some of the basic information the rendering process stratification.
The following will be several functional modules used to explain:
1, Elements panel
Elements panel is mainly used for DOM structure to view and edit CSS styles, the development phase of testing is often used when the page layout. In the following figure, HTML files and displayed in the browser render the DOM tree structure Elements panel constructed in basically the same process (the right side in FIG document image is input in Console directly visualize the complete DOM structure), except that the former not directly by the browser to understand and use, which is stored in the memory of the tree, you can query and modify using JavaScript.
HTML file HTML file corresponding DOM tree
In addition to the basic functions of the DOM tree view, you can click the right mouse button, the added to the DOM node, delete and modify operations. Below, from top to bottom, respectively: Add attribute adding attributes; Edit attribute: edit attribute; Edit as HTML: edit the node and all child nodes of HTML elements (including text node); Delete element: Delete element; hide element: removing elements; Force state: adding to the pattern displayed on the right element in the selected style; break on: DOM breakpoint setting (including a subtree subtree modifications modifications, attribute modifications attribute modification; node removal node removal); expand recursively: of the DOM tree; Collapse children: folding element; scroll into view: that the node to scroll displayed in the viewport.
DOM Edit menu
In the commissioning phase of style, function of each sub-label of Elements panel as follows.
- Styles (style): Inheritance and laminated directly reflect the characteristics of the calculation process and CSS (Cascading Style Sheets) style;
- Computed (calculated): See box model and the pattern data calculated through the current node;
- Event Listeners (event listeners): View the current node binding events and event listener function;
- DOM Breakpoints (DOM breakpoint): View to break the current DOM node set;
- The Properties (Properties): display all attributes of the current node (object);
- Accessibility: Accessibility Tree to view the entire page.
First, the sub-tag using Styles, the hao123 site navigation map to a label pattern in an example:
(1) Select the page you want to view a label;
(2) means that the corresponding element is found on the path;
(3) means that the corresponding element is found during the respective parent elements inherited from the style;
(4) A specific style, feature rich this area. By unchecking the style before deleting styles, new styles also can double-click in this area, you can also survive .cls the upper right corner to add class to the element, visualize display;
(5) indicate the specific source of information on styles, click the link to view the corresponding file in the Sources panel style file. Sources of CSS styles usually are: external CSS file referenced in the link tag, <style> style attributes and CSS elements within the tag embedded CSS;
Note: (5) in the user agent stylesheet style sheet is a set of default styles provided by the browser, the default will be used in the case of elements not provided any style.
Elements-styles
Secondly, Computed sub-label shows the different sources of the converted CSS style, style finally calculated for each node of the DOM and stored in ComputedStyle structure. The corresponding element may be modified pigment padding, border, margin attribute value by double-clicking different positions (top, bottom, left, right) when used, you may also need to check the style filter Filter through a filter.
Again, Event Listeners sub-tabs can be used to view the event bound to the elements, and file locations where the events;
Finally, DOM Breakpoint, Properties and use of a relatively small Accessibility. Wherein, Accessibility sub-tab to view the entire page Accessibility Tree, the Tree is a subset of the DOM tree from the corresponding content node by the relevant and useful display screen reader (Reader Screen) [2] .