(2) Do you really know how to use chrome devtool?

Time:2020-9-30

This article first appeared in my personal blog: https://teobler.com

Performance

Performance API

Sometimes, we may want to test how long a user’s operation will take. Usually, people will do this:

const start = new Date().getTime();// do your workconst end = new Date().getTime();console.log(end - start);

Using the performance API, we can do this:

performance.mark("start");// do your workperformance.mark("end");performance.measure("your work name", "start", "end");console.log(performance.getEntriesByType("measure"));

After that, we can see the console information in the console

(2) Do you really know how to use chrome devtool?

At the same time, in the Performance tab of chrome, if you make corresponding records, a visual chart under the heading of user timing will be generated

(2) Do you really know how to use chrome devtool?

Networking

Network panel

First of all, let’s introduce the following panel:

(2) Do you really know how to use chrome devtool?

  • The part with milliseconds in the middle is a waterfall flow, which shows how long each resource in the page took to load. Different colors indicate different loading stages
  • The table below details the information for each resource

    • The first column is the name of the resource
    • The second column is the loading status of the resource, that is, the status code of the network request
    • The third column is the type, which identifies the resource as document / stylesheet / script
    • The fourth column is the caller of the resource. The index here refers to index.html To call a modified resource, place the mouse over a resource and hold down shift. Devtool will identify the caller of the resource in green and other resources that the resource has called in red
    • The fifth column is the size, but note that there are two sizes. The first is the actual size of the resource, and the second is the compressed size of the resource. If the resource comes from cache, cache will be displayed here
    • The sixth column shows the time taken to load the resource, which also corresponds to the time before and after compression
    • The last column shows the detailed loading process of the resource

There are different colors in the last column, which represent different meanings:

  • White – the resource is in the queue, which usually indicates:

    • This resource is delayed by the rendering engine to give time to more important resources (such as styles and script), and the rendering of images is usually delayed
    • Port occupied in queue
    • The browser’s TCP connection is full, so it is queuing (in http1, the browser can only establish 6 connections at a time)
    • The time taken to create the disk cache is also marked as queue waiting
  • Grey blocking:

    • Your request hasn’t been sent out yet. It may happen when the agent looks up or the queue is blocked for unknown reasons
    • Time spent connecting to the proxy server
  • Dark green – DNS lookup: it’s usually a little longer when you access a domain you’ve never visited, because there’s no cache
  • Orange – connection initialization / connecting: time to establish a connection, such as three handshakes / four waves of a TCP connection
  • Dark orange – SSL connection in progress
  • Green – the request has been sent / being sent / waiting: this period is the gap between the moment the request is sent and the first byte we receive. If this period of time is unusually long, usually there are problems with our server network configuration or the server itself. For example, if a SQL query is slow, the green period will be very long
  • Blue – resource download: refers to the period from the beginning of the download to the completion of the download

example

Let’s look at a few examples to see what these colors really do:

(2) Do you really know how to use chrome devtool?

This image is obviously too big to download

(2) Do you really know how to use chrome devtool?

There may be something wrong with the back end of this picture

(2) Do you really know how to use chrome devtool?

The total time consumption of this graph is not long, but we can see that all kinds of time are quite long. Judging from the time of DNS lookup, it may be the first time to visit a new domain name, resulting in a relatively long connection time

(2) Do you really know how to use chrome devtool?

This graph shows that you download too many resources at one time, resulting in long queue waiting time

screenshot

At the top of the network panel, there is an icon to remove the camera. After clicking, the page will be refreshed. Devtool will record the time point of each redrawing in the process of loading the web page and take a screenshot. You can see the whole process of loading the web page. You can use this function to test how your website loads under poor network environment and whether the user experience is friendly Etc.

After the screenshot is completed, you can double-click on an image to enlarge it, and then use the left and right arrows to preview your page loading at different times.

At the same time, you can use this function to improve some minor performance problems, such as how to load too many pictures better. For example, when you load a large resource, if you block the loading of all other resources, can you consider delaying the loading of this resource? Otherwise, the user will not be able to see the data on the web page.

Auditing

Auditing can judge some problems of your web page, such as loading time, SEO, user experience and so on.

In the auditing panel, Google integrates lighthouse, which is a tool developed by Google to analyze web page problems (such as SEO, performance, best practices, etc.), and its use is very simple. Open the audit panel, enter the web page you want to test, check the content you want to test, and click generate Report button is OK. After a period of analysis, chrome will carry out a series of analysis and rating for your website, and can also give some suggestions to help you solve various problems of the website.

(2) Do you really know how to use chrome devtool?

You can see the overall situation of the report at the top of the report. Click a score to jump to the corresponding section. Take performance as an example

(2) Do you really know how to use chrome devtool?

In the figure, we can see that the projects that chrome thinks have problems will be marked in red. Click the button on the right to get more information, and then click learn more to see some suggestions from Google. Generally speaking, this panel has a good effect on improving our website experience. You can get more familiar with your website through this tool, and you can see what can be improved and what is done well.

Here you can introduce a similar website called sonarwal, which has similar functions to audit in devtool

Node.js Profiling

When starting the node server, if you add--inspectThen, you can see the logo of a node in the console of chrome. After clicking, you can open the devtool dedicated to node. Here, you can do everything in the sources. At the same time, there is a profile page. After selecting the corresponding server and clicking the start button, the corresponding page will be refreshed. After the refresh is completed, click stop again. At this time, chrome will be displayed in the previous one What did your server do during the refresh:

(2) Do you really know how to use chrome devtool?

The horizontal axis in the figure is the time, and the vertical axis is the call stack on the server side of this refresh page. So what is this thing for? The purpose of profile is to enable developers to intuitively see some of their node server side calls. When there is a problem, they can immediately see that a call takes a long time. Then they can locate it in the code to see if there are unpredictable errors in the related calls, and correct them in time. Click the corresponding function in the profile to jump to the corresponding source code directly.

If you love my article, please give me some advice, and you can also pay attention to my official account.
(2) Do you really know how to use chrome devtool?