http://segmentfault.com/a/1190000000683599
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:
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.
ElementsElements 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:
Force Element Stateforce element State, easy to debug, such as: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:
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:
NetworkSometimes 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.
Initiator explains how the request was initiated with four possible values:
可视化瀑布流 , 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:
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:
[XPath]
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="https://github.com/NUKnightLab/TimelineJS">这里</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:
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:
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]
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
For more information on XHR, see Nanyi Teacher's XMLHttpRequest Level 2 user Guide.
[WebSocket]
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]
Reference:
Chrome DevTools Overview
Introduction to Chrome Developer Tools
Chrome Dev tools:networking and the Console
Artifact--chrome Developer Tools (i)
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
