15 Essential Tips for Chrome Development

Abstract: Google Chrome is currently the most popular browser used by many web developers. The release of updates as soon as six weeks and the ever-increasing development components that accompany it make Chrome your must-have development tool. For example, you may already know the common debugging techniques such as online editing of CSS, console and debugger.

Google Chrome is currently the most popular browser used by many web developers. The release of updates as soon as six weeks and the ever-increasing development components that accompany it make Chrome your must-have development tool. For example, you may already know the common debugging techniques such as online editing of CSS, console and debugger. In this article, we will introduce 15 cool and practical tips that will increase your development efficiency faster.

1. Find files quickly

If you have used Sublime, then you will know the power of 'Go to anything'. That's right, Chrome now has this feature too.

The operation is as follows:

1. F12 to open your Chrome debugger;

2. Press Ctrl+P (Cmd + P on Mac);

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



2. Search in the source code

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

The operation is as follows:

1. F12 to open your Chrome debugger;

2. Press Ctrl+Shift+F (Cmd+Opt+F on Mac);

3. Enter the source code you want to query in the input box, press Enter, and then OK.

Note: The search also supports regular expressions.



3. Jump to the specified line

Chrome also allows you to jump to a specified number of lines when you're in the Chrome debugger's sources bar, and you have an open file. On Windows and Linux, just press Ctrl+G (Cmd+L on Mac), then enter You can specify the number of lines.



Another way is to Ctrl+O, enter ":" + the number of lines.

Fourth, get DOM elements in the console (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 native method of document.querySelector(). The function is to get and return the first DOM element that matches the CSS property filled in. For example, $('div') will return the first div element that appears on the page.

2. $$() - is the mapping of the native method of document.querySelectorAll(). The function is to get and return an array that contains all the DOM elements that match the CSS properties you filled in.

3. $0--$4—represents the history of operating different DOM elements in the Chrome debugger, and records up to 5 times, so there are only five variables of $0-$4. $0 represents the most recent, and so on.



5. Multi-cursor

Another awesome feature is multi-cursor.

When you want to manipulate code in multiple places in the rendered file, you can do this by holding down Ctrl (Cmd on Mac) and then clicking the cursor where you want it to appear.



6. Save the log If you check the 'Save log' option

on the console panel, the log will not be cleared every time you load the page. Keep this option in mind when you want to investigate bugs before the page closes.



7. Format the code

Chrome helps you improve the readability of file content through its built-in optimizer. This is especially useful for compressed or messy code.

How to achieve it?

The operation is as follows:

1. F12 to open the Chrome development tool;

2. Select the file you want to read;

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



9. Device Simulator

Another very cool feature is to simulate mobile devices.

For example, we can simulate human touching the screen and shaking the device through Chrome. You can even change your location with it.

The operation is as follows:

1. F12 to open the Chrome debugger;
2. Select the Emulation option at the bottom of the debugger;

3. Finally, in the Emulation panel, select Sensors on the left.



10. Color Picker

When you call Chrome's color picker, you can hover anywhere in the web page with your mouse to get the color, and it will convert it into the corresponding encoding format very accurately.

Isn't it cool?

The operation is as follows:

1. F12 to open the Chrome debugger;

2. Select the target element;

3. In the style editor, click the color preview, and the color picker will appear.



11. Force change element state

Chrome Dev Tools has a function to force change element CSS state, such as :hover and :focus. It is more convenient for CSSer.



12. Visualizing the "Hidden DOM"

When web browsers build elements such as textboxes, buttons, and inputs, they usually hide the presentation layer elements below them.

However, we can display these hidden basic elements by selecting the 'Show user agent shadow DOM' option in the General panel through Setting à General.

You can even style them individually.



13. Select the next match

When you select a match, use Ctrl+D (Cmd+D on Mac) to select the next match, which can help you edit them at the same time.



14. Change the color format

In the color preview, through Shift + mouse click, you can switch back and forth among the three formats of rgba, hsl and hexadecimal.



15. Use Chrome's workspace to edit local files

Chrome's workspace is also very powerful, it can directly edit and save your local files without additional operations such as copying and pasting. How to configure it?

The operation is as follows:

1. F12 to open the Chrome debugger

2. Find the Sources column, and the control panel that appears on the left, click the right mouse button, and select Add Folder To Workspace. Or, drag and drop your entire project folder directly into the debugger.

After doing this, no matter which page you open, the file you just operated on will appear. To be even more useful, you can map the files used in the page to the corresponding folders, allowing online editing and easy saving.



Original: 15 Must-Know Chrome DevTools Tips and Tricks



http://www.cnblogs.com/giggle/p/5966991.htmlThis



article is the original content of Yunqi community, and may not be reproduced without permission. If you need to reprint, please send an email to [email protected]; if you If you find any content suspected of plagiarism in this community, please send an email to: [email protected] to report and provide relevant evidence. Once verified, this community will delete the suspected infringing content immediately.