15 required chrome developer skills and chrome developer skills

15 required chrome developer skills and chrome developer skills

Google Chrome is the most widely used browser among Web developers. The six-Monday release cycle and a set of powerful constantly expanding development functions make it a necessary tool for web developers. You may already be familiar with some of its functions, such as using console and debugger to edit CSS online. In this article, we will share 15 tips to help improve your development process.

1. Fast File Switching

If you have used sublime text, you may not be used to overwriting the Go to anything function. You will be glad to hear that the chrome developer feature also has this feature. When DevTools is turned on, press Ctrl + P (cmd + p on mac ), you can quickly search for and open files in your project.

 

2. Search in source code

What if you want to search for the source code? Search for a specific string in the file already loaded on the page. The shortcut key is Ctrl + Shift + F (Cmd + Opt + F). This search method also supports regular expressions.

 

3. Quickly jump to a specified row

After opening a file in the Sources tab, in Windows and Linux, press Ctrl + G, (or Cmd + L for Mac), and then enter the row number, devTools will allow you to jump to any row in the file.

Press Ctrl + O and enter:And the number of rows, instead of looking for a file.

 

4. Select an element on the console

The DevTools console supports some variables and functions to select DOM elements:

• $ ()-Document. querySelector ()Returns the first element that matches the css selector. For example, $ ('div ') returns the first div element on the page.
• $ ()-Document. querySelectorAll ()Returns an array of elements that match the css selector.
• $0-$4-returns the history of the five most recent DOM elements selected on the element panel,$0Is the latest record, and so on.

To learn more about Console Commands, click here: Command Line API

 

5. Use multiple inserts to select

When editing a file, you can press Ctrl (cmd for mac) and click the mouse where you want to edit it to set multiple inserts, this can be edited in multiple places at a time.

 

6. Save records

By selecting the Save record option under the Console tab, you can enable the DevTools console to continue saving records without clearing records after each page is loaded. This is a convenient method when you want to study bugs that have occurred before the page is loaded.

 

7. high-quality printing

Chrome's Developer Tools has built-in beautification code that returns a code that is minimal and easy to read. The Pretty Print button is in the lower left corner of the Sources tag.

 

8. device Mode

DevTools provides a very powerful mode for developing mobile-friendly pages. This Google Video introduces its main features, such as screen size adjustment, touch simulation, and poor network connection simulation.

(Ps: This video file is lost in the original article. This figure is a supplement to the small editor. You can test this tool by yourself. It is very useful)

 

IX. device sensing Simulation

Another cool feature of device mode is simulating mobile device sensors, such as touch screens and accelerometer. You can even spoof your geographic location. This function is located at the bottom of the element label. Click "show drawer ".Emulation tag --> Sensors.

 

10. color selector

When you select a color attribute in style editing, you can click color preview to bring up a color selector. When the selector is enabled, if you stay on the page, the mouse pointer will become a magnifier, allowing you to select the pixel precision color.

 

11. Force Change of element status

DevTools has a function that can simulate the CSS state, such as the hover and focus of elements, which can easily change the element style. This function can be used in the CSS editor.

 

12. Visual DOM shadow

When a Web browser constructs an element such as a text box, button, or input box, the view of other basic elements is hidden. However, you canSettings -> GeneralSwitchShow user agent shadow DOMIn this way, the hidden code is displayed on the element tab. They can even design their styles separately, which gives you a lot of control.

 

13. Select the next match

When editing a file under the Sources tab, press Ctrl + D (Cmd + D) and the next matching of the selected words will also be selected, so that you can edit them at the same time.

 

14. Change the color format

In the color preview function, use the shortcut key Shift + Click to switch the color format back and forth in rgba, hsl, and hexadecimal.

 

15. Use workspaces to edit local files

Workspaces is a powerful feature of Chrome DevTools, which makes DevTools a real IDE. Workspaces will match the files in the Sources tab with those in the local project, so you can edit and save them directly without having to copy/paste externally changed files to the editor.

To configure Workspaces, open the Sources option, right-click any part of the left panel, and selectAdd Folder To Worskpace,Or drag your entire project folder to the Developer Tool. Now, no matter which 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 corresponding folders, allowing online editing and simple storage.

Understanding