preface

The Chrome Developer Tool (DevTools for short) is a Web development and debugging tool embedded in the Google Chrome browser. DevTools gives developers a deeper look inside the browser and the applications they write. Using DevTools, you can more efficiently locate page layout issues, set JavaScript breakpoints, and better understand code optimization.

This article shares 24 Chrome debugging tips and some shortcuts to help you learn more about Chrome DevTools

Debugging technique

1. Direct access to page elements in the console

Select an element in the Elements panel and type $0 in the console to get the element you just selected in the console. If the page already contains jQuery, you can also use $($0) to select it.

Alternatively, you can view the Reveal in Elements Panel directly in the DOM tree by right-clicking the Reveal in Elements Panel on the DOM element output from the console.

2. Access the latest console results

To get the last output from the console, type $_.

3. Access the recently selected elements and objects

The console stores the last five selected elements and objects. When you select an element in the elements panel or an object in the analyzer panel, the record is stored on the stack. You can manipulate the history stack using $x, which counts from 0, so $0 represents the most recently selected element and $4 represents the last selected element.

4. Select elements

• $() – Returns the first element that satisfies the specified CSS rule, which is a simplification of document.querySelector().

• ? () – Returns all elements that satisfy the specified CSS rule, which is a simplification of querySelectorAll().

• $x() – returns all elements that satisfy the specified XPath.

5. Use the console. The table

This command supports the output of log information in tables. It is clearer to use console.table instead of console.log to print complex information.

6. Use console.dir, which can be shortened to dir

The console.dir(object)/dir(object) command lists all object attributes of the object parameter.

7. The duplicate copy

You can copy what you want in the console using the copy method.

Keys (object)/values(object)

Monitor (function)/unmonitor(function)

Monitor (function), which logs a message to the console when the specified function is called, indicating the function name and arguments passed to the function when called.

Use unmonitor to stop monitoring the specified function.

MonitorEvents (Object [, events])/unmonitorEvents(Object [, events])

MonitorEvents (Object [, Events]), which logs the event object to the console when one of the specified events occurs on the specified object. The event type can be specified as a single event or an array of events.

Unmonitorevent (Object [, Events]) Stops monitoring events for specified objects and events.

11. Time monitoring

Start the timer by calling time(). You must pass in a string argument that uniquely identifies the timer ID. You can call timeEnd() when you want to end the timer, passing in the specified name. The console prints the name of the timer and the exact time when the timer ends.

12. Analyze program performance

In the DevTools window console, call console.profile() to turn on a JavaScript CPU profiler. End the parser directly calls console.profileEnd().

Specific performance analysis is provided in the analyzer panel

13. Count the number of expressions executed

The count() method counts the number of times an expression is executed and takes a string argument to mark different tokens. If the same string is passed twice, the method accumulates the count.

14. Clear console history

You can clear the console history by:

• Right-click on the Console, or hold down Ctrl and click the mouse, and select Clear Console.
• Enter clear() in the script window to execute.
• Call console.clear() in your JavaScript script.
• Use the shortcut keys Cmd + K (Mac) Ctrl + L (Windows and Linux).

15. Asynchronous operation

Async /await makes asynchronous operations easier and more readable. The only problem is that await needs to be used in async functions. Chrome DevTools supports direct use of await.

16. The debugger breakpoints

Sometimes we need to break the point for single-step debugging, usually choose to directly break the point in the browser console, but this requires to go to Sources to find the source code, and then to find the line of code that needs to break the point, which is quite troublesome.

Using debugger keywords, we can define breakpoints directly in the source code, much more convenient.

17. The screenshot

We often need screenshots,Chrome DevTools provides 4 screenshots, basically cover our requirements of the scene, shortcut CTRL + Shift + P, open Command Menu, enter a screenshot, you can see the following 4 options:

Go and try it, it smells good!

18. Switch themes

Chrome provides two types of theme, light and dark. When you are tired, you can switch oh, shortcut CTRL + Shift + P, open the Command Menu, enter theme, and choose to switch

19. Copy the Fetch

All requests under the Network tag can be copied as a complete Fetch request code.

20. Rewrite the Overrides

When debugging CSS or JavaScript on Chrome DevTools, the value of a property changed will be reset when the page is refreshed.

If you want to save your changes so they don’t get reset when you refresh the page, check out the following Overrides. Overrides is disabled by default and needs to be manually enabled. The procedure for enabling Overrides is as follows.

Open operations:

Open the Sources TAB of Chrome DevTools and Select Overrides. The subtab selects + Select Folder for Overrides to set up a directory for Overrides to store the Overrides properties

21. Live Expression

Starting with chrome70, you can put a dynamic expression on top of the console to monitor its value in real time. Live Expression is executed at 250 milliseconds.

Click the “Create Live Expression” eye icon to open the dynamic Expression screen and enter the Expression to monitor

22. Check animations

The Chrome DevTools animation inspector has two main uses.

• Check the animation. You want to slow play, replay, or examine the source code for the animation group.

• Modify the animation. You want to modify the time, delay, duration, or keyframe offset of the animation group. Editing Bezier curves and keyframes is not currently supported.

The animation inspector supports CSS animation, CSS transitions, and web animation. RequestAnimationFrame animation is not currently supported.

Shortcut CTRL + Shift + P to open Command Menu and type Drawer: Show Animations.

23. Scroll into view

24. Edit Files With Workspaces

Workspace enables you to save changes made in Chrome Devtools to a local copy of the same file on your computer.

Go to Sources Menu and click Add Folder to Workspace under Filesystem to Add the working directory to be synchronized

shortcuts

Visit DevTools

Global keyboard shortcuts

The following keyboard shortcuts are available on all DevTools panels:

The console

Afterword.

If you like the front end as much as I do, and also love to do things, welcome to follow me to play ~ ❤️

Github address, welcome to follow

blog

My blog, point star, don’t get lost ~

The public,

Front end moment