15 Tips for developing chrome

Google Chrome is the most popular browser currently used by many Web developers. Release it as fast as six weeks and with its growing development components, Chrome becomes your essential development tool. For example, online editing of css,console and debugger these common debugging techniques, perhaps you already know. In this article, we'll cover 15 cool and practical tips that will improve your development efficiency faster.

First, quickly find files

If you've ever used sublime, you'll know that ' Go to anything ' is powerful. Yes, Chrome now has this feature as well.

The operation is as follows:

1. F12 Open your Chrome debugger;

2 . Press Ctrl+p (cmd + P on Mac);

3 . Search for the file name you want to open.

Second, search in the source code

But what if we want to find a piece of source code for the entire project?

The operation is as follows:

1. F12 Open your Chrome debugger;

2, Press Ctrl+shift+f (Cmd+opt+f on Mac);

3, Enter the input box you want to query the source code, enter, OK.

Note: The search also supports regular expressions.

Third, jump to the specified line

When you open the file in the Chrome debugger's sources bar, Chrome also allows you to jump to the specified number of lines, under Windows and Linux systems, just press Ctrl+g (Cmd+l on Mac) and enter the number of lines you specify.

Alternatively, the method is Ctrl+o, enter ":" + number of rows.

Iv. obtaining DOM elements in the console

The Chrome console provides methods and variables to quickly get the DOM elements in the page, as follows:

1. $ ()-is the mapping of the Document.queryselector () native method. The function is to get and return the first DOM element that matches the filled CSS attribute, such as $ (' div '), which returns the first DIV element that appears in the page.

2. $$ ()-is the mapping of the Document.queryselectorall () native method. function is to get and return an array that contains all the DOM elements that match the CSS attributes you filled out.

3. $0--$4-represents that you manipulate the history of different DOM elements in the Chrome debugger and record up to 5 times, so only five of these variables are $0-$4. $ A represents the last time, and so on.

Five, multiple cursors

Another awesome feature is the multiple cursors.

When you want to manipulate the code in the rendered file in multiple places, you can do so by holding down CTRL (CMD on MAC), then clicking the mouse, and you want to appear at the cursor.

Vi. Saving logs

By ticking the ' Save Log ' option on the console panel, the log will not be emptied every time you load the page. Remember this option when you want to investigate the bugs of the page before it closes.

Vii. Formatting Code

Chrome helps you improve the readability of your file content with its built-in optimizer. This is especially true for compressed or cluttered code.

How to achieve it?

The operation is as follows:

1. F12 open chrome development tools;

2 . Select the documents you want to read;

3 . Click the "{}" button below the file.

Nine, equipment simulator

Another cool feature is the analog mobile device side.

For example, we can simulate human touch screens and shake devices via chrome. You can even change your location through it.

The operation is as follows:

1. F12 Open the Chrome debugger;
2 . Select the emulation option at the bottom of the debugger;

3, finally in the emulation panel, the left side of the sensors can be selected.

X. Color Picker

When you call Chrome's color picker, you can use your mouse to hover anywhere in the page to get the color, which translates it into the appropriate encoding format very accurately.

Isn't it awesome?

The operation is as follows:

1. F12 Open the Chrome debugger;

2, Select the target element;

3, in the Style editor, click on the color preview, the Color picker will appear.

Xi. force change of element State

The Chrome developer Tool has a feature that forces the element CSS state to change, such as: hover and: Focus. It is more convenient for csser.

12. Visualize "hidden dom"

Web browsers often hide the presentation layer elements beneath them when building elements such as Textbox,button and input.

However, we can show the underlying elements that are hidden by settingàgeneral, by selecting the ' Show User agent Shadow DOM ' option on the general panel.

You can even set their style individually.

13. Check the next occurrence

When you select a match, with Ctrl+d (Cmd+d on Mac), the next same match is selected, which helps you edit them at the same time.

14. Change the color format

In the color preview, you can switch back and forth in the RGBA,HSL and hexadecimal three formats with the SHIFT + mouse click.

Use Chrome's workspace to edit local files

Chrome's work space is also very powerful, it can directly edit and save your local files, no additional operations, such as copy, paste. How to configure it?

The operation is as follows:

1. F12 Open the Chrome debugger

2, find sources bar, appear in the left side of the Control Panel, click the right mouse button, select Add Folder to Workspace. Or, simply drag and drop your entire project folder into the debugger.

This way, no matter which page you open, the file you just manipulated will appear. To be more useful, you can map the files used in the page to the appropriate folders, allowing for online editing and simple saving.

Original: Must-know Chrome DevTools Tips and Tricks

Http://www.cnblogs.com/giggle/p/5966991.html

15 Tips for developing chrome