Chrome is one of my favorite browsers, and I’ve shown you 13 basic chrome tips in an illustrated way. I’ve found many of the same shortcuts as Sublime Text2, so I hope you’ll find them useful too.

1. Quickly switch files

If I look for each file, I usually open the console and go to the Source control panel one by one. If you look at the picture below, you can see that there are so many files, you don’t know which directory they are in, and then you have to click on them one by one

It turns out that by pressing Ctrl+P (CMD +P on MAC), you can quickly search and open files for your project.

2. Search in the source code

Everyone knows 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? To search for a particular string in a loaded file on a page, use Ctrl + Shift + F (Cmd + Opt + F) as a shortcut. Regular expressions are also supported

3. Quickly jump to the specified line in the source code

We all know that in VS, a CS file can have too many lines, and we just use CTRL + G to jump to a particular line. In fact, in chrome console, after opening a file in Sources, press CTRL + G, (or Cmd + L for Mac), Then type in the line number, and the Chrome Console jumps to the line you entered.

4. Select multiple caret characters

When editing a file, you can hold Down Ctrl and click the mouse over the place you want to edit it. You can set multiple inserts so that you can edit in more than one place at a time

5. Device mode

Recently I used H5 to do Ctrip business travel APP, and the most I used is the device mode of Chrome browser. Imagine how annoying and inefficient it would be if we had to run to the phone every time we developed a feature in Visual Studio tools. It’s easy to see why so many people use Chrome.

6. Device sensing simulation

Another cool feature in device mode is to simulate mobile device sensors, such as touch screens and accelerometers. You can even make fun of your location. This functionality is at the bottom of the element tag, and click the “Show Drawer” button to see Emulation –> Sensors.

7. Format messy JS source code

Sometimes when you see a compressed mess of JS, you don’t know where to start. 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 TAB.

8. Color pickers

When you select a color property in the style edit, you can click on Color Preview and a color picker will pop up. When the selector is on, if you hover over the page, the mouse pointer becomes a magnifying glass, allowing you to select colors with pixel accuracy.

9. Change color formats

I believe front-end developers know that there are many ways to represent colors, such as RGB, HSL, hexadecimal, etc. After looking at the image below, I’m sure you’ll be impressed by how powerful Chrome is, down to the details.

In the color preview function, use the shortcut Shift + Click to switch color formats between RGBA, HSL and Hexadecimal

10. Force an element state change

The Chrome console has a feature that simulates CSS state, such as hover and Focus elements, which can be easily changed. You can use this feature 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 other people’s interfaces.

11. View and edit local files

You can actually use Chrome to view local files by simply dragging the relevant directory into chrome.

12. Select the next match

When editing the file under the Sources TAB, press Ctrl + D (Cmd + D) and the next match of the currently selected word will also be selected, which helps you edit them all at the same time.

13. Visual DOM shadows

The EB browser builds elements such as text fields, buttons, and input fields while the view of other basic elements is hidden. However, you can switch to Show User Agent Shadow DOM in Settings -> General to Show the hidden code in the element TAB. You can even design them individually, which gives you a lot of control.

I mentioned this feature in another blog post, and it took me a while to figure out why I was having this problem. If I had known about it earlier, I’m sure it would have saved me a lot of time.

The original link:…

To read more

(Android) Interview Questions

Share a very strong Android interview question

Share my three summary of learning Java background

Persistence: I learned that in the first phase of learning the Java backend

If you have any questions, feel free to talk to me!