The timeline of Chrome development tools

Before talking about element,console,sources mostly used in Debug,network can be used for debug and view performance, today the protagonist timeline more is used in performance optimization, Its role is to record and analyze the activities that occur during application operation.

Meet timeline

The next step is to start the detailed analysis of the role of each marker (there are several not yet marked out also introduced, the Order of the panel from left to right, from top to bottom)

Record button

If you need to record the current page's run, when the Record button is opened to start the recording process, the button displays a red

Clear button

Press to clear the previous record information, instant Whiteboard

Capture List

Capture related events that meet the conditions listed below, with a selection box on the right

JS Overview

JS function execution information, mainly displayed in the event call waterfall diagram

, we are able to see the call of the function (which intercepts the event waterfall in a short period of time)

Information recording and memory line

When the state is turned on, the memory lines of the data such as JS heap memory, node number etc. are recorded during the recording process.

For example, moving the mouse over the memory line will show the indicator data at the corresponding time point below the graph.

When the memory is opened, a heap display is generated under NET, which shows the usage of JS heap

Drawing information

Information about the paint process, which can be viewed in the Paint Profile details panel, with a certain performance loss due to the recording of the drawing information

Record screenshots and screenshots list

and the network capture screenshot is the same, will produce a certain performance loss, details can see the network of chrome development tools

Garbage collection

Free up browser memory for garbage generated from the recording process

FPS Information

Page activity when the FPS change information, usually the device's screen refresh frequency is 60FPS, more than that, it is possible to produce a lag phenomenon, can refer to this introduction (need FQ)

As a result, there are two places where FPS information can be displayed, and when the FPS is too large, a red bar will appear, representing a long frame. We can also observe that the time and duration of the dividend bars appearing in the upper and lower two regions are synchronous.

CPU Information

Record the operation of the browser kernel and display it in the form of a curved area map. The yellow representation of the operation of the JS memory (JS code evaluation and Function call), blue represents the memory of the HTML operation (mainly HTML compilation), purple represents the memory of the CSS operation (CSS style calculation, etc.), Gray indicates the memory of other operations

The display looks like this:

Network Request Information

A network resource requests information that represents different resources in different color strips. Yellow is a script file, Blue is an HTML file, purple is a CSS file, green is a media file, gray means a variety of other files ~

If you want to see the details of the network, refer to the network of chrome development tools

Effect:

It is recommended to FPS.CPU.NET together, as follows:

Event Waterfall diagram

Large collection of information about various events, 24K titanium alloy dog eyes have been blinded, the first line represents the events that occur over time, the following lines are the children of the first row of events, and the following items make up the whole event of the first row. The information in the waterfall diagram is consistent with the CPU usage, which can be seen

Specific effects (for easy viewing, here for a period of time to intercept the event waterfall chart)

When recording a Web site loading process, there will be three dashed lines in the event waterfall panel, Green indicates the first time to start drawing the page, the Blue Line means the DOM has been loaded, the red line indicates that the page has finished loading (including resource references)

：

The latest version of Chrome adds a network selection box in front of the JS profile selection box, and when you select Network, it will be used as the network information Panel, which allows you to view the request for a resource without hovering over the bar on the network panel.

, the latest version of the Chrome-timeline panel

Detail display

Show details about selected events

Summary (information Summary)

A summary of information for the selected event

We can first select an area on the timeline to see what:

Then select an event in the event waterfall chart to see:

As you can see, the summary shows the content of the selected target as a general message.

Bottom-up

Depending on the duration of the event, the list of events is listed in reverse, with the categories selectable (by type, domain, subdomain, URL classification), the right side of the panel is also described in detail, but the basic and left similar, not much introduced.

As follows:

It can be seen that the most time-consuming is HTML compilation and how long it takes, followed by a XHR request ... In the upper left corner of the panel there is also a grouping filter, which categorizes the list data with activity, category, domain, subdomain, URL, respectively.

Call-tree (tree graph of event invocation)

You can view the child information of each event in the tree chart, as well as the information of each sub-item, as well as the group filter, the same as the rule, the right side of the panel

The effect (and bottom-up is basically the same, unlike the event call tracking information is listed on the tree chart in more detail):

And the same event in the bottom-up is like this, simplifying a lot:

Event-log (Event log)

The details of each event are clearly listed, such as keyword filtering, time-consuming filtering, event type filtering and so on, the right side is detailed information, and the tracking information of the function call stack can be seen.

Effect:

Layers

Display a page refreshed to a frame, allowing developers to clarify the rendering of each frame of the page

Note: Available when the Paint selection box is checked

Panel Summoning process:

1. Select the selected block

2. Select long frame, layers panel appears

3. Wave up in the layers panel

You can see the drawing of the page after this long frame stage, rotate to see the hierarchy, the right side also lists the details of the current frame, such as size, why merge (what is a merge?). Read this article), memory evaluation, etc.

Paint Profiler

Page Drawing Process

Note: Available when the Paint selection box is checked

Panel Summoning process:

1. Select a Paint event and the Paint Profiler panel appears

2. Wave up in the Paint Profiler panel

You can select an area during the drawing process to see what the page drawing results are in this area, for example, in this list, the first is the navigation drawing, then the right side of the article content, and then the left several small window div drawing. Text description, relative to the graph, just to list the selected area of the drawing event lists and draw information, you can click on the details, such as TEXTSIZE, left, top and other properties

Temporarily on these, these days computer poisoning, finally solved ... If there is a wrong place, thanks for pointing out, and also welcome the exchange of discussion ~

The timeline of Chrome development tools