Original link: https://blog.csdn.net/voke_/article/details/78477915
Quickly switch files
If I search for each file, I usually open the console, and look for it one by one in the source control panel. Look at the picture below and you should know that so many files, you don’t know which directory they are in, and then just Can be opened one by one
Later I found out that by pressing Ctrl+P (cmd+p on mac), you can quickly search and open the files of your project.
Search in 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 specific string in a file that has been loaded on the page, the shortcut key is Ctrl + Shift + F (Cmd + Opt + F). This search method also supports regular expressions.
Quickly jump to the specified line in the source code
Everyone knows that in VS, a cs file may have multiple lines, and then we use the ctrl+g shortcut to jump to a specific line. In fact, it is the same in the chrome console. After opening a file in the Sources tab , Press Ctrl
+ G, (or Cmd + L for Mac), and enter the line number, the chrome console will jump to the line where the line number you entered.
Use multiple caret to select
When editing a file, you can hold down Ctrl and click the mouse at the place you want to edit, you can set multiple caret, so you can edit in multiple places at once
Device mode
Recently, I used H5 as the Ctrip business travel app, and the device mode of the chrome browser is the most used. Imagine, if we have to debug on the mobile phone after we develop a function on the Visual studio tool, it will be so annoying and the development efficiency will be low. Think about it to know why so many people like to use the Chrome browser.
Device sensing simulation
Another cool feature of device mode is to simulate the sensors of mobile devices, such as touch screens and accelerometers. You can even spoof your location. This function is located at the bottom of the element label, click the "show drawer" button to see it .Emulation --> Sensors
Format messy js source code
Sometimes when I see a mess of compressed js, I don't know where to start. The chrome console has a built-in beautification code function, which can return a minimal and easy-to-read code. The Pretty Print button is in the lower left corner of the Sources tab.
Color picker
When a color attribute is selected in the style editing, you can click on the color preview and a color selector 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 a color with pixel accuracy.
Change the color format
I believe that front-end developers know that there are many ways to represent colors, such as rgb, hsl, and hexadecimal notation. Looking at the picture below, I believe you will definitely admire the powerful functions of chrome, even the details are so well done.
Use the shortcut key Shift + Click in the color preview function to switch the color format back and forth between rgba, hsl and hexadecimal
Force change of element state (convenient to view the style of elements in different states)
The chrome console has a function that can simulate the CSS state, such as the hover and focus of the element, which can easily change the element style. In the CSS editor, you can use this function to view the style of elements in different states. I believe this function is very practical for front-end enthusiasts who imitate other people's interfaces.
Use chrome to view and edit local files
In fact, we can use chrome to view local files, just drag the relevant directory to the chrome browser.
Select 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 will help you edit them at the same time.
Visualized DOM shadow
When the eb browser constructs elements such as text boxes, buttons, and input boxes, the view of other basic elements is hidden. However, you can Settings -> General switch to it Show user agent shadow DOM, which will show the hidden code in the element tab. You can even design their style individually, which gives you a lot of control.
This feature was mentioned in another blog post of mine. It took a long time to find out the cause when I encountered a problem. If I knew this feature of chrome earlier, I believe it would save a lot of time.
Use css3 to achieve various icon effects (2)
