Low front-end debugging efficiency? Try these 10 "Chrome developer Tools" Tips

Days to share some tips on using the Chrome developer tools. including debugging, optimize page rendering speed and so on. Hope to improve the productivity of web developers.

1 , open the shadow DOM display

browsers, such as video, password and other components are encapsulated, can not see the details of the component code, not conducive to debugging. Fortunately, the component code that is hidden can be displayed in the element tag by configuration.

Implementation: Settings→general→elements→show User Agent Shadow DOM

2. Quickly select elements in the console

You can also select DOM elements through the $ variable in the Chrome Dev Tools console:

• $: The chrome console natively supports the class jquery selector. The DOM node can be selected with $ plus a familiar CSS selector.
• $ ~ $4: The last 5 DOM nodes selected. $ A will return the DOM node of the most recent point selection. And so on, it returns the DOM node of the last point selected. You can save up to 5, or return undefined if it is less than 5.

3, multi-line caret edit content

In the Sources edit box, hold down CTRL (CMD for MAC) and click on the mouse where you want to edit to set multiple inserts. Press CTRL + U to undo edits, fast input, quick Delete.

4, use "3-step snapshot" technology to identify JavaScript memory leaks

1. Open the developer tools and switch to the Profiles panel;
2. Perform an operation on the page that can cause a memory leak;
3. Click "Take Snapshot" to perform a heap snapshot;
4. Repeat step 2 and step 33 times;
5. Select the last heap snapshot;
6. Change the filter from "All Objects" to "objects between snapshots 1 and 2";

You should now be able to see a set of new leaked objects, select one of them and see what caused the memory leak.

5, force change element state

Realize:

• Elements panel right-side styles label →toggle Element State
• Elements panel left Right click →force element state

6. Quickly find files & search for specific strings

Implementation: Sources panel under CTRL+P (Cmd+p for Mac)

The developer tool supports the ability to search for specific strings in the source code, which is not only case sensitive, but also supports regular expressions.

Implementation: Sources panel Ctrl + SHIFT + F (CMD + SHIFT + F for Mac)

7, multi-column Content Selection & matching same options

Realize:

• Multi-column Content selection: Hold down the ALT key, and when the mouse arrow changes to the "+" sign, click the mouse
• Match the same options: Select the element you want to match, CTRL + D (CMD + D for Mac)

8. Change the color mode & custom Palette

The developer tool supports switching color modes and real-time Edit preview page colors back and forth in Rgba, HSL, and hexadecimal.

Realize:

• Change color mode: Shift + click mouse
• Custom palette: Click the small square in front of the style area color

9, Device mode & mobile emulation

Developer tools can simulate different mobile devices, quickly test the user experience on the mobile side, and solve difficult debugging problems.

• Test responsive design effects by simulating different screen sizes and resolutions, or you can simulate a retina screen;
• Use the network emulator to evaluate the performance of your site without affecting other options;
• Visualize and review CSS styles;
• Accurately simulate device input, such as touch events, geolocation, and device screen orientation.

Another cool feature of device mode is the ability to simulate mobile device sensors, such as touch screens and accelerometers, and even change your geographic location.

Implementation: ESC key →emulation→enable Emulation→sensors

10,workspace editing Local Files

Workspace the developer tool into a real IDE. Match files in the Sources tab with files in your local project, edit and save directly, and do not have to copy/paste to the editor.

Implementation: Source left panel right click →add Folder to Worksapce

Low front-end debugging efficiency? Try these 10 "Chrome developer Tools" Tips