15 Must Know Tips for Chrome Development Tools (Photo)

Google Chrome is the most widely used browser among Web developers. T he six-week release cycle and a powerful set of ever-expanding development capabilities make it a must-have tool for web developers. Y ou may already be familiar with some of its features, such as using console and debugger to edit CSS online. In this article, we'll share 15 tips to help improve your development process.

First, quickly switch files

If you've ever used sublime text, you may not be used to being overwritten without the Go to anything feature. You'll be glad to hear that chrome developer features also have this feature, and when DevTools is turned on, press Ctrl-P (in mac is cmd-p) to quickly search for and open files for your project.

Second, search in the source code

What if you want to search in source code? Search for a specific string in a file that the page has loaded, and the shortcut is Ctrl s Shift s F (Cmd s Opt s F), which also supports regular expressions.

Third, quickly jump to the specified line

After opening a file in the Sources tab, in Windows and Linux, press Ctrl plus G, (Cmd plus L), and then enter the line number, and DevTools will allow you to jump to any line in the file.

Another way is to press Ctrl plus O, enter: and number of lines, instead of looking for a file.

Fourth, select elements in the console

The DevTools console supports a number of variables and functions to select DOM elements:

• $() - Short case of document.querySelector(), returning the first element that matches the css selector. For example, $('div') returns the first div element on this page
• $$ () - Short case of document.querySelectorAll(), returning an array of elements that match the css selector.
• $0-$4 - Returns the history of five recent DOM elements you selected in the Element Panel, $0 is the most recent record, and so on.

For more console commands, poke here: Command Line API.

V. Use multiple inserts to select

When editing a file, you can press and hold Ctrl (cmd), click the mouse where you want to edit, you can set multiple inserts, so you can edit in multiple places at once.

6. Keep records

Check the Save record option under the Console tab so that DevTools' console continues to save records without clearing them after each page loads. This can be a convenient way to study bugs that occur before the page has finished loading.

Seven, high-quality printing

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

Eight, equipment mode

For developing mobile-friendly pages, DevTools includes a very powerful mode, and this Google video introduces its main features, such as resizing the screen, touching simulation, and simulating poor network connectivity.

View video: https://dn-linuxcn.qbox.me/static/video/DevBytes%20%20 Chrome%20DevTools%20Device%20Mode .mp4

Nine, equipment sensing simulation

Another cool feature of device mode is to simulate sensors for mobile devices, such as touch screens and accelerometers. Y ou can even make a prank on your location. This feature is located at the bottom of the element label, and you can see the Emulation tag by clicking on the "show drawer" button.

Ten, color selector

When you select a color property in style editing, you can click on the color preview and a color selector pops up. When the selector is on, if you stay on the page, the mouse pointer becomes a magnifying glass that lets you choose the color of pixel accuracy.

Eleven, force change the state of the element

DevTools has a feature that simulates CSS state, such as over and focus for elements, which can easily change element styles. This feature can be used in the CSS editor

Twelve, visual DOM shadow

When a Web browser builds elements such as text boxes, buttons, and input boxes, the views of other basic elements are hidden. H owever, you can switch to Show user agent shadow DOM in Settings -? General, which displays hidden code in the element tab. You can even design their styles individually, which gives you a lot of control.

13. Select the next match

When you edit files under the Sources tab, press Ctrl s D (Cmd s D) and the next match of the currently selected words is selected to help you edit them at the same time.

Fourteeth, change the color format

In the color preview function, you can switch color formats back and forth between rgba, hsl, and hexadecimal using the shortcut Shift plus click

Fifteen, through workspaces to edit local files

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

To configure Workspaces, simply open the Sources option and right-click anywhere on the left panel, select Add Folder To Worskpace, or just drag your entire project folder into Developer Tool. T he selected folder, including its subdirecte and all files, can now be edited, regardless of which folder. To make Workspaces more efficient, you can map the files you use on your page to the appropriate folders, allowing for online editing and simple saving.

Learn more about the use of Workspaces, poke here: Workspaces.