Chrome Debugging Toss _ (4) Simulation of weak network and request filtering filtering

Objective

Sometimes for the user experience, we do development must consider the weak network access experience, such as loading order, the first screen in the display of weak nets;
Some small partners recommend using the Fiddler4 "used, feel can also, function is very strong, self-feeling a bit bloated", but in Chrome also has weak network simulation "for the front-end Interface request, page rendering simulation enough to use"

Use

I don't know what version this feature first appeared in, known only chrome45+

Press F12 to open the debug console, the network option for the mini-menu, to see

There are three functions more practical, can be used to test user access;

1. Disable Cache (Disable caching – turn on this to test the interface without having to go to advanced cleanup every time)
2. Preserve log (keep log-refresh reload is also retained)
3. No throttling (inside can simulate a variety of network access), look at the following diagram, select a network situation, reload the page can feel the weak network of the breath ...
   

There are two small functions, not much to use. But you can see the situation, that is, filter function

1. regex– open Regular, do not need//package
2. Hide Data urls– This is something that filters the data protocol (such as Base64 's image), and if the page requests a very high number of cases, tick this box, which allows us to locate some requests more quickly.

Because all is displayed by default (all requests);

Of course, you can click on these, type classification filter, quickly locate

Summarize

Chrome's debugging features are rich and powerful, and can be debugged with plugins for react and Vue.

Chrome Debugging Toss _ (4) Simulation of weak network and request filtering filtering