This is the 9th day of my participation in the August More Text Challenge

preface

In his book “Growing Up”, Jiubian Da once said, “Only when a person has mastered complex tools, he or she is truly capable. People’s abilities can only be superimposed on tools to form a superimposed effect “, I deeply agree. The efficiency improvement brought by tools is self-evident. We are lucky to be born in an age when all kinds of tools have been relatively mature and enjoy the shade under the trees planted by our predecessors. So, to Chrome this big tree, how much do you know? Do you recognize every panel of DevTools? How many commands have you used in Chrome? Chrome may be more powerful than you think!

Thanks to the tool-creators.

Command

The first thing I want to introduce here is Command. After you open DevTools, Ctrl + Shift + P opens the Command panel. For those of you who have opened Command for the first time, you may feel like you’ve discovered a new continent. There are a lot of ways to do things quickly integrated here.

It’s in the panel, it has it

The first is that many of the functions found in the panels also provide a way to call Command. Using Command to search for a keyword is much easier than searching through a panel.

For example, to switch the theme color, you can go to settings-performance-appearance-theme in the visual panel:

You can also use Command: Ctrl + Shift + P, type theme, yes, and we’ll see it.

Ah, black theme also strange good-looking have.

For example, command provides commands to switch display panels, clear console history, and set color formats. If you’re used to using a keyboard, you can use Command to do all of these things.

It has what’s not in the panel

If you don’t think the same things you can find in the panels above are trivial, Command has a lot of hidden functionality.

screenshots

Have you tried chrome’s built-in screenshot feature? Once again, Ctrl + Shift + P and enter Capture, you can see that Chrome has several built-in capture methods: Capture a custom area, capture a full page (much more efficient than scrolling!). , visual area interception, node interception. Proud to tell mom that we don’t have to use third-party screenshots anymore

Silent Mimi tells you: the headless browser to achieve screenshots, with this oh.

Switch layout

Ctrl + Shift + P, type Layout, left/right, up/down

There’s more to discover

Command Command type

Command integrates a very rich set of methods, classified by label: Panel, Drawer, Appearance, Console, Debugger, Elements, Global, Grid, Help, Mobile, Navigation, Network, Performance, Rendering, Reso Urces, Screenshot, Sensors, Settings, Sources. When you need to find a feature, you can also use these keywords to quickly find the desired feature. Here is the introduction of Command, more functions can be found in practice slowly! Next time, let’s talk about console. What surprises will console bring to us? You can expect ~