15 Chrome developer Tips to know

You may already be familiar with some of its features, such as using console and debugger to edit CSS online. In this article, we'll share 15 tips to help improve your development process.

One, quickly switch files

If you have used sublime text, then you may not be accustomed to the overwrite of this feature without go to anything. You'll be glad to hear that Chrome developer features also have this feature, and when Devtools is turned on, press Ctrl+p (Cmd+p on Mac) to quickly search for and open your project's files.

Second, search in the source code

What if you want to search in the source code? Search for a specific string in the file loaded by the page, the shortcut is CTRL + Shift + F (Cmd + Opt + f), this search method also supports regular expressions OH

Three, jump to the specified line quickly

After you open a file in the Sources tab, in Windows and Linux, press CTRL + G, (or CMD + L for Mac), and then enter the line number, Devtools will allow you to jump to any line in the file.

Another way is to press CTRL + O, enter : and line number instead of looking for a file.

Iv. selecting elements in the console

The Devtools console supports a number of variables and functions to select DOM elements:

• $ () – Shorthand fordocument.queryselector () , which returns the first element that matches the CSS selector. For example, $ (' div ') returns the first DIV element in this page
• $$ () – A shorthand forDocument.queryselectorall () that returns an array of elements that match the CSS selector.
• $0-$4– returns the history of the five most recently selected DOM elements in the element panel, which $0 is the latest record, and so on.

To learn more console commands, Poke here: command line API

V. Use multiple inserts to select

When editing a file, you can press and hold CTRL (CMD for Mac), click the mouse where you want to edit, you can set more than one caret, so you can edit in more than one place at a time.

Vi. Saving Records

By checking the Save Record option under the Console tab, you can enable the Devtools console to continue saving records without erasing the records after each page has been loaded. This is a handy way to study bugs that appear before the page has finished loading.

Seven, high-quality printing

Chrome's Developer tools has built-in landscaping code that can return a minimized and easily readable code. The pretty Print button is in the lower-left corner of the Sources tab.

Eight, device mode

For the development of mobile-friendly pages, Devtools contains a very powerful model, this Google Video introduces its main features, such as resizing screen size, touch emulation and simulating poor network connectivity

(PS: This video file is missing in the original, this figure is a small supplement, you can test the tool yourself, it is useful)

Nine, equipment sensor simulation

Another cool feature of device mode is the ability to emulate sensors on mobile devices, such as touch screens and accelerometers. You can even spoof your location. This function is located at the bottom of the element tag and is visible by clicking on the "Show drawer" button Emulation标签 --> Sensors .

X. Color Picker

When you select a color attribute in the style editor, you can click on the color preview and a color picker will pop up. When the selector is turned on, if you stay on the page, the mouse pointer will turn into a magnifying glass, allowing you to choose the color of pixel accuracy.

Xi. force change of element State

Devtools has a feature that simulates the CSS state, such as the hover and focus of the element, which can easily change the element style. This feature can be used in the CSS editor

12. Visualize the DOM shadow

When a Web browser constructs a class of elements such as text boxes, buttons, and input boxes, the view of the other basic elements is hidden. However, you can switch to in Settings -> General Show user agent shadow DOM , so that the hidden code is displayed in the Elements tab page. You can even design their own styles, which gives you a lot of control.

13. Select the next match

When editing a file under the Sources tab, press CTRL + D (CMD + D), and the next match for the currently selected word will also be selected, enabling you to edit them at the same time.

14. Change the color format

The color Preview feature uses the shortcut key SHIFT + Click to toggle the formatting of colors back and forth in Rgba, HSL, and hexadecimal

Edit local Files via workspaces

Workspaces is a powerful feature of Chrome devtools, which makes Devtools a true IDE. Workspaces will match the files in the Sources tab with the files in the local project, so you can edit and save directly, without having to copy/paste the externally changed files to the editor.

To configure workspaces, simply open the sources option, then right-click anywhere on the left panel, choose Add folder to Worskpace, or simply drag your entire project folder into the developer Tool. Now, regardless of the folder, the selected folder, including its subdirectories and all files can be edited. To make workspaces more efficient, you can map the files used in the page to the appropriate folders, allowing for online editing and simple saving.

Learn more about the use of Workspaces, Poke here: Workspaces

15 Chrome developer Tips to know