Elegant and efficient use of chrome Developer Tools (bottom)

Abstract: Chrome Developer Tools is an indispensable tool in front-end development, here are a few interesting command line API, so that the development of debugging process, inadvertently revealed that a little bit of elegance.

Main content :

1. Random file Jump
2. Random ways to jump
3. Flexible breakpoint settings, I want you to stop before you stop
4. Quick Open Shutdown Console
5. Elements several useful shortcuts in the page card
6. The specified XHR breakpoint
7. Fast simulation of mobile devices

We have previously shared that we can improve our development efficiency by Command line API. In addition, there are some more interesting shortcuts and debugging methods, but also can help improve everyone's productivity.
Several minor matters:

1. The shortcut key command mentioned in the text is the corresponding CTRL under Win;
2. Shortcut keys are available when the focus is on dev tools.

Random file Jump

Use sublime classmate, must very like command + P, this kind of random file jump, in fact, dev tools also have similar jump, and shortcut key is also:

12	Command + P //jump to the corresponding file command + p +: + number //jump to corresponding file corresponding line

is not no longer in the sources, with the mouse to find a file.

Random ways to jump

In Sublime, COMMAND + R is a jump to method, and it's nice to have similar shortcut keys in Dev tools:

1	Command + SHIFT + O

Here, let's start with Command + p to open a file, then COMMAND + SHIFT + O to jump to any method.

Flexible breakpoint settings, I want you to stop before you stop

Many times, need to break a breakpoint in the loop, really troublesome, have to run the cycle again and again, until we need to stop the condition, deft on hand when more press, then had to start again.

We can set a breakpoint at the time of a breakpoint, meet the conditions of the time to stop, demonstrated a, when the message ID is determined by the message, the breakpoint only takes effect.

Quick Open Shutdown Console

When the screen is not very large, the console is usually turned off, so that the visual range of the code can be larger, then open or close the console by tapping the Show/hide drawer button in the upper right corner. In fact, you can quickly use the ESC key to open or close the console.

Elements several useful shortcuts in the page card

1. Fast selection of key keys, quick navigation of the keys and keys, and the development of the key;

2.enter quick Edit properties;

3.tab attribute switching;

4.H key to quickly hide the DOM, before I know this shortcut, I either delete the DOM to see the effect, or manually input display:none, h is much more convenient.

The specified XHR breakpoint

Sometimes we need to have a breakpoint at the time of the specified XHR request, which can be:

The corresponding code can then be quickly found through the call stack.

Fast simulation of mobile devices

Open Dev Tools, and then perform the following shortcut keys:

12	Command + SHIFT + M //Toggle Analog DeviceCOMMAND + SHIFT + R //Refresh page.

In addition, we strongly recommend that you upgrade to Chrome 38 or later, you can simulate the network environment, mobile development is really not good.

Turn from: here

Elegant and efficient use of chrome Developer Tools (bottom)