Chrome developer Tools is not a complete guide (vi, plugin article)

This is the end of the chrome developer tool, and at the end of the chapter, we introduce several powerful plugins. There are a lot of plugins in the Chrome store, so it's okay to go for a stroll. But you need FQ, so please bring your own artifact.

First, skin plug-in

First of all, we have long been looking forward to the skin plug-in. This plugin is called Devtools theme:zero Dark Matrix. Download it in the store, then open this address: chrome://flags, find the Enable Developer Tools experments (You can find the Experments keyword quickly locked) Tick the Enable check box. Restart the browser, open the developer options, click on the pinion, you can see the experments option, select the Allow custom UI themes in the popup panel, restart the browsing, and then see:

Up on the skin is so out of the drop. It is said that there are many ways to change it, but the Dewdrop is currently used in this way. Interested students can go and try.

Second, Performance-analyser (Web performance analysis)
This plugin is used to analyze the load performance of your Web pages, including HTTP requests, the time of execution, and the size and proportion of each HTTP request file. First download, feel free to open an interface, press the plugin icon, you can see the analysis page:

You can use this plugin to analyze the overall situation of your interface resource loading and try to do some optimizations and tweaks.

Third, (fehelper) Web front-end assistant
This plugin includes a range of features that are rich. is developed by the people, features include: JSON format, HTML format, two-dimensional code generation, code specification detection and so on. When you open a background interface in the browser, if the interface returns a JSON string, it will automatically format it. Below is a list of some of its features, not specific to one by one demonstrations:

Iv. POSTMAN
The plugin is a mock send request, which can be used by both the background and foreground developers. It is a simplified version of the Fiddler, although the function is not strong, but the interface wins, operability also wins, there are standard API, update has been continuing. So the wood used is:

V. Visual Event

Web event monitoring, can help you capture the current page of the various elements of the event monitoring status. Open an interface and press the expand button:

Place your mouse over the elements with background color, and you can see their time source and binding functions. It's pretty useful for some simple event detection. More complicated, there is no egg use.

Six or two-dimensional code scanning

This feature is good for mobile phone development. The sweep is opened in the browser. What is the feature that comes with the FF browser, and how can it be used for chrome? But this function is too simple, too low grade, too many (but very useful). I can't.

Seven, Whatfont

Locate the font for the Web page. The font name pops up when you hover the mouse over the text when the function is turned on. So you can copy the font you like.

Eight, speed Tracer

This is a powerful version of the Performance Analyzer, more powerful than profiles. You can track events, view CSS styles, find memory leaks in JS, and detect JS syntax. The power of the function is unparalleled! Speed Tracer is a powerful Web performance analysis tool that allows you to find out why your pages are running slowly. Improve the site for them. However, because of its powerful function, the operation is more complicated. The reason for the length of dew does not introduce. Interested students can be their own to fathom. Here is a picture of the theft chart:

Conclusion

To this end, the Dew Chrome Developer Tool Incomplete Guide series is over, and Dewdrop has passed six blog posts to give you more information about the use of chrome developer tools. From the underlying DOM lookup to performance analysis, it covers all aspects of front-end development in general. In today's front-end development of increasingly complex trends, mastered a few good tools, can be able to do more with less. And Chrome is undoubtedly one of those good tools. Here the dew thought of "Chuang Tzu" inside a story: One day Confucius students Zi gong through a vegetable garden, saw an old man to water and hit a tunnel to the well, and then holding Shirai back to the wells and vegetable garden, in order to give vegetable garden watering. Zi Gong saw the old man said this water is too tired, why not make a water machine? The old man who planted vegetables said, "Those who have mechanical things will have an organic heart." Machine with bosom, the avenue does not contain also ". It means that with a lazy heart, people become lazy, this is not human nature, nor the nature of heaven, so the Avenue will not enrich his heart. In fact, Dewdrop want to say the use of tools and lazy or machine heart is two different children, the times in transition, human is no longer a slash and burn human, if always stopped in the old era, with the progress of the new era, do not learn to advance with the times so only by the history of elimination. This is the same as we are now in the environment, especially the front-end development, technical updates as fast as the book, go out new frame, a few years there is a lot of fresh things jump will come out to scare you, not only the development of the time is increasing, learning costs are constantly increasing, so time becomes particularly valuable. If there is a good tool for us to achieve the same goal in less effort, why not? After all, everyone's goal is the same, just the same. Of course, Zhuangzi is a Taoist figure, to borrow a story to ridicule Confucianism is also taken for granted, out of context or not drop ha.

Chrome developer Tools is not a complete guide (vi, plugin article)