Artifact--chrome Developer Tools (i)

Source: Internet
Author: User
Tags cookie names list of attributes chrome developer chrome developer tools chrome devtools

Original address

Here I assume that you are using chrome, if you do web development, or if you are more curious about the rendering of web pages and like to toss, then you must know the developer tools of Chrome. In fact, other browsers also have similar tools, such as the Firebug under Firefox. This article will explain in detail how to use the Chrome developer tools, and hopefully there are some things that make you feel amazing! Even if you don't use chrome, some of the content in this article can be quite useful.

Start by nagging how to open developer tools. You can right-click on the page and select a review element, or open tools--developer Tools, or Open with a shortcut key Command Option + I . The interface we see after opening is probably as follows:

Google Chrome offers 8 large sets of tools:

    1. 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;
    2. 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.;
    3. Sources: Mainly used for debugging JS;
    4. 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;
    5. Profiles: Analyze the execution time and memory usage of Web application or page;
    6. Resources: Validation and editing of data in local caches (IndexedDB, Web SQL, cookies, application caches, Web Storage);
    7. Audits: Analyze the process of page loading, and then provide a solution to reduce page load time and improve response speed;
    8. Console: Displays various warnings and error messages, and provides the shell for interacting with documents and developer tools.

Powerful Chrome developer tools provide great hints, and when we hover over certain items, we show some useful hints, and sometimes we get unexpected gains. In addition, the developer tools provide emulation features that are especially useful for mobile development. Let's look at the use of the 8 tools in detail.


Elements tools like a scalpel "dissect" the current page, the elements page we see looks like this:

The red block labeled 1 in the figure is the page HTML file, each element in the HTML <body>、<p> is a DOM node, and all the DOM nodes make up the DOM tree. We can think of the Red Block 1 as a DOM tree, and the HTML element tag as a DOM node.

When we select a DOM object here, the corresponding element in the page is also shaded by a shadow. We can modify the DOM object and the result will be displayed in real time on the page. In addition, you can either Command + f search for the specified content in the DOM tree, or change the page elements as HTML, such as:

After you select the DOM object, right-click to see some auxiliary features, as shown in the block labeled 2:

    1. Add Attribute: Add a new attribute to the tag;
    2. 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 that, yes. really is very useful. It makes sense to use a lot. Force Element Stateforce element State, easy to debug, such as:
    3. Edit as HTML: Changes the page element in HTML form;
    4. Copy XPath: copying XPath;
    5. Delete node: Deletes the DOM node;
    6. Break on: Sets the DOM breakpoint.

The blue block marked 3 in the figure shows the path of the current label: from the beginning of the HTML to the current position, we can click on any one of the tabs in the path to jump to the corresponding tag content.

The blue block labeled 4 in the figure shows the CSS style, properties, etc. of the currently selected tag in real time, with the following 5 small parts:

    • 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.

In practical applications we often use styles, such as:

The + number labeled 1 in the figure is New style rule , you can add a new selector for the current label, and the newly created style is Inspector-stylesheet. In addition, you can add, modify, and disable style attributes directly on the original style, which is shown in marker 2.

On the right side of the new style rule, a Toggle Element State selection box with marker 3 appears after selection, 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.

More powerful, the developer tool shows the margin, border, and padding portions of the box model in an intuitive graphic, as shown in marker 5. The following dynamic diagram gives an example of a box model:


Sometimes our pages load very slowly, and the same speed, other pages loading is not slow. At this point we have to consider optimizing the Web page, before optimization we must know the loading speed of the bottleneck where, this time can consider using the Network tool. The network situation when the homepage of my blog is loaded:

Each resource requested is displayed as a row in the network table, with the contents of many columns (such as red Block 1) for each resource, although not all columns are displayed by default.

    • Name/path: Resource name and URL path;
    • Method:http request method;
    • Status/text:http Status code/text interpretation;
    • Type: The MIME type of the request resource;
    • Initiator explains how the request was initiated with four possible values:

      1. Parser: The request is sent by the HTML parsing of the page;
      2. Redirect: The request was sent by the page redirection;
      3. Script: The request was sent by script processing;
      4. Other: The request is sent by another process, such as the link link in the page click, enter the URL address in the Address bar.
    • The size/content:size is the size of the response head and the response body, and the content is the size after the request is decoded. Learn more about the chrome Dev Tools here-"Size" vs "Content";
    • Time/latency:time is the total amount of time from the start of the request to the last byte received, Latency is the time from the start of the request to the first byte received;
    • Timeline: Displays the network request 可视化瀑布流 , the mouse hovers over a certain time line, can display the entire request each part spends the time.

The above is the default display of the column, but we can at the top of the waterfall flow right-click, so you can choose to show or hide more columns, such as Cache-control, Connection, Cookies, domain and so on.

We can order the resource request according to any of the above items, just click on the corresponding name. Timeline sorting is more complex, when you click Timeline, you need to select an item in the start time, Response time, End time, Duration, and latency to sort.

Red Block 2, a total of 6 small features:

    1. Record Network log: Red indicates that resource request information is being recorded at this time;
    2. Clear: Clears all resource request information;
    3. Filter: Filtering resource request information;
    4. Use small resource raws: Show less content on each line;
    5. Perserve log: When the requested information is logged again, the previous resource information is not erased;
    6. Disable cache: If caching is not allowed, all resources are reloaded.

When filter is selected, the filter conditions shown in red Block 3 appear when we click on a content type (can be documents, stylesheets, Images, Scripts, XHR, Fonts, WebSockets, other), Only resources of that specific type are displayed. In a XHR request, you can right-click on a request to select "Replay XHR" to rerun a XHR request.

Sometimes we need to pass the contents of the network to others, when we can right-click on the resource request line and select Save as HAR with Content Save as a har file. You can then reproduce the network request information on some third-party tool sites, such as here.

After selecting a resource, we can also Copy as cURL , that is, copy the network request as a parameter of the Curl command, see Copying requests as curl in detail commands

In addition, we can view information such as the request header of the network request, the response header, what has been returned, such as:

The resources are detailed in the following sections:

    • HTTP Request and Response headers
    • Resource Preview: Resource previews when feasible;
    • HTTP response: The content of the resource that has not been processed;
    • Cookie names and values:http requests and all cookies transmitted in the return;
    • WebSocket messages: Information sent and received through WebSocket;
    • Resource Network timing: Graphically displays the time spent in each phase of the resource loading process.
Supplementary explanations


XPath is a language that looks for information in an XML document. XPath is used to navigate through elements and attributes in an XML document. In Figure 2, for example,

<a href="">这里</a>

The XPath of a tag here is: /html/body/div[2]/p[1]/a a tag under the first P tag of the second Div tag of the body tag in the HTML.

[HTML DOM Event]

The HTML DOM allows us to execute a specific JavaScript script when an event occurs, where the event can be:

    • Move the mouse over an element;
    • The window or frame is resized;
    • Text is selected;
    • The user clicks on the HTML element;
    • A keyboard key is pressed ...

The JavaScript script that executes when the event occurs is the event listener.

[DOM Breakpoint]

Dom Breakpoints (DOM breakpoints) can listen to a DOM being modified, and right-click on an element in elements to set breakpoints in three different situations:

    • Child node Modification
    • Self-Property modification
    • The node itself is deleted

The DOM breakpoint appears in the list of Dom breakpoints after it is set.

Once the listener's DOM is modified, the breakpoint navigates to the code that performs the modification, which is useful for DOM debugging that binds multiple events.


XMLHttpRequest is a browser interface that allows JavaScript to communicate in HTTP (S). The XMLHttpRequest object is used to exchange data in the background with the server so that you can

    • Update a Web page without reloading the page
    • Request data from the server after the page has been loaded
    • Receiving data from the server after the page has been loaded
    • Sending data to the server in the background

For more information on XHR, see Nanyi Teacher's XMLHttpRequest Level 2 user Guide.


The WebSocket specification defines an API to establish a "socket" connection between a Web browser and a server. Simply put: There is a persistent connection between the client and the server, and both parties can start sending data at any time. This solves the problem of long-standing client-initiated requests to obtain information from the server.

More about WebSocket you can see WebSockets Introduction: Introducing Sockets to the network

[Environment of this article]

    • Operating system: OS X 10.9.4
    • Chrome Edition: Version 37.0.2062.120

Chrome DevTools Overview
Introduction to Chrome Developer Tools
Chrome Dev tools:networking and the Console

Artifact--chrome Developer Tools (i)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.