Chrome Usage Tips

Read Catalogue

• Write in front
• Quickly switch files
• Searching in the source code
• Quickly jump to a specified line in the source code
• Use multiple inserts to select
• Device mode
• Device sensing Simulation
• Format the messy JS source code
• Color Picker
• Change the color format
• Force change of element state (easy to see the style of elements in different states)
• Use Chrome to view and edit local files
• Select the next occurrence
• Visualize the DOM shadow
• If you feel this blog post to you have a harvest, think the little woman is still hard, please click on the bottom right corner of the [recommended], Thank you!

Go back to the top and write in front.

I've seen the Chrome console Liu Yongyong written before, which makes me feel like I'm just too shallow to know about chrome at the moment. Deliberately learned about it (that is, some tips on his blog and some other Chrome uses), wrote two blog posts

You may not know that the console is powerful

What I know about Chrome

Recently learned some of Chrome's use of skills, here to share, we do not say that I was plagiarism, I just think 工欲善其事, its prerequisite. Chrome is God in my heart.

I'm just writing this article with great care, and I hope these tips are useful for everyone.

Go back to the top to quickly switch files

I generally if you find each file, usually open the console, in the source Control Panel to find one, look at the following diagram you should know, so many files, you do not know under which directory, and then only one point to open the look

Later found that the original press Ctrl+p (Cmd+p on Mac), you can quickly search and open your project files.

Back to top search in source code

We all know that if you want to view the source code in elements, just navigate to the elements panel and press ctrl+f.

But 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

Go back to the top quickly jump to a specified line in the source code

As we all know in VS, a CS file may be very many lines, and then we use the Ctrl+g shortcut to jump to a specific line, in fact, in the chrome console is the same, after opening a file in the Sources tab, press CTRL + G, (or CMD + L for Mac ), and then enter the line number, and the chrome console jumps to the line where you entered the line number.

Back to Top use multiple inserts to select

When editing a file, you can press and hold CTRL at the point where you want to edit the mouse, you can set multiple caret, so you can edit in more than one place at a time

Back to Top Device Mode

Recently made use of H5 to do Ctrip business app, the most used is the Chrome browser device mode. Imagine how annoying and inefficient it would be if each of us developed a feature on the Visual Studio tool and ran to the phone for debugging. Think about why so many people like to use the Chrome browser.

Back to Top Device Sensing 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 .

Back to the top of the format of the messy JS source code

Sometimes see the compressed good mess of JS, do not know where to start to see. The chrome console has built-in code functionality that can return a minimized and easily readable code. The Pretty Print button is in the lower-left corner of the Sources tab.

Back to Top 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.

Back to top change color format

It is believed that front-end developers know that colors are represented in many ways, such as RGB,HSL, hexadecimal notation, and so on. Looking at this diagram below, I'm sure you'll admire the power of chrome, and even the details are doing so well.

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

Back to top force change element state (easy to see the style of elements in different states)

The chrome console has a feature that simulates the state of the CSS, such as the hover and focus of the elements, which can easily change the style of the element. This feature can be used in the CSS editor to see the style of elements in different states, which I believe is very useful for front-end enthusiasts who mimic the interface of others.

Back to top use Chrome to view and edit local files

In fact, we can use Chrome to view the local files, just drag the relevant directory to the Chrome browser.

Back to Top Select the next occurrence

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.

Back to Top visualize the DOM shadow

EB Browser The view of other basic elements is hidden when building a class of elements such as text boxes, buttons, and input boxes. 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.

This feature is mentioned in my other blog post, when I encountered a problem for a long time to find out the reason, if you can know this feature of Chrome, I believe it will save a lot of times.

Achieve various icon effects with CSS3 (2)

Chrome Usage Tips