Chrome is one of the most commonly used browsers in front-end development, and this article has compiled 10 basic tips for using Chrome (there are plenty of shortcuts for Sublime Text2). If there are other useful tips not covered in this article, let us know in the comments.
Ctrl+P to switch files quickly
When you have a lot of files in your project, use Ctrl+P (CMD +P on MAC) in the Sources panel of the console to quickly search for and open the files you want.
Ctrl+F searches the source code
Under the Elements panel of the console, press Ctrl+F to search for specific code on the current page.
Under the Elements panel of the console, press Ctrl + Shift + F (Cmd + Opt + F) to search for a specific code in a file that the page has already loaded.
Ctrl+G quickly jumps to the specified line
In the Sources panel of the console, Ctrl + G, (or Cmd + L for Mac), then enter the line number to quickly jump to the specified line.
{} format messy source code
The Chrome console has a built-in code beautification feature that returns a minimal, easy-to-read piece of code. The Pretty Print button is in the lower left corner of the Sources panel.
Ctrl + D selects the next match
Under the Sources panel of the console, select the specific code and press Ctrl + D (Cmd + D). The next match of the currently selected code is also selected.
Color picker
Under the Elements panel of the console, when a color property is selected in the Styles edit, click the Color Preview button and a color picker pops up. When the selector is on, if you hover over the page, the mouse pointer becomes a magnifying glass and you can select a color with pixel accuracy. When selected, the color property will change.
Change the color format
There are many ways to represent colors, such as RGB, HSL, hexadecimal, etc. To toggle color formats between RGBA, HSL, and Hexadecimal, hold down the Shif key and click the Color Preview button.
Changing the state of an element
In the Elements panel of the console, different states of Elements can be simulated in the Styles editor, such as Hover and Focus, so that we can view the Styles of Elements in different states. You can also add class names dynamically to adjust styles.
View local folders and files
You can drag the entire folder to Chrome to view the contents of the folder, which is convenient for batch browsing files and saves a lot of time.
Analog mobile devices
When working on mobile projects, I will use the simulation device function of Google Chrome, which can simulate the model, size, network status, vertical and horizontal screen of the phone.
