Turn 15 must know chrome developer tips gif

Google Chrome is the most widely used browser for Web developers. The six-week release cycle and a powerful set of constantly expanding development capabilities make it a must-have tool for web developers. 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 pleased to hear that the Chrome developer feature also has this feature, and when Devtools is opened, press to Ctrl+P（cmd+p on mac） 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 a 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 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 行数 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 for –document.queryselector () to return the first element that matches the CSS selector. For example $(‘div’) , return the first DIV element on this page
• Shorthand for $$ () –document.queryselectorall () 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.

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 diagram is a small supplement, you can test the tool yourself, it is useful, but also to simulate the bad situation of the network)

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 you edit a file under the Sources tab, the Ctrl + D (Cmd + D) next match for the currently selected word is selected, which will help you edit it at the same time.

14. Change the color format

Use the shortcut keys in the color preview feature to Shift + Click toggle the format 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.

Original: 15 must-know chrome developer Tips gif

Turn 15 must know chrome developer tips gif