The author in the development of some time ago, need to analyze an interface through Chrome DevTools, debugging found in the console copy function, very easy to use, and then found a new world, learned some strange debugging techniques of Chrome, here summary to share with you, I hope I can help you in your development!

Multi-picture warning, it is recommended to read this article in Wifi environment.

Developer tool functions

copy

The copy function lets you get any resource in the console, even some variables, and is especially useful when copying some very verbose data. When the copy is complete, just use CTRL + V.

Copy takes a variable As an argument. If there are multiple arguments, all the arguments after the first one are ignored. If you need to copy data that does not have a variable name, you can use it together with Store As Global.

Store As Global

When we get some data from the console and don’t have a variable name (this is especially common during development), we can save it as a global variable by right-clicking on the small triangle next to the data. The variable name temp1 continues, and we can print it with copy. This function is also applicable to HTML elements.

$

This $has some similarities to the $in jQuery and can be used as a selector.

First, $0 to $4 gets the HTML element that was clicked, with $0 being the last element clicked, $1 following, and so on until $4.

This makes it easy to copy an element and perform some DOM operations on it.

It can also be used as a selector. There are two ways to use it: single $and double $. Note that double $does not return a NodeList but a pure array, which makes it easier to call the API😉 directly from the console.

What if sometimes you just need to get the data from the last output without the variable name? The answer is to change it into a variable via Store As Global, but that’s too much trouble. $_ will help you out by returning a reference to the result of the last execution.

You can see here that the result is not recalculated, but directly referenced.

Finally, the $command operation is a blockbuster, you can install NPM library through $I, this is a road that has not been envisaged, the author looked up and found, really was shocked. With the help of the Console Importer plugin, you can help us do this! After first installing the plug-in in the Google App Store, type $I (‘lodash’) at the command desk and something amazing happens.

Now you’re ready to use Lodash in your Console!

getEventListeners

It is easy to get the events of the Element binding, especially when used with $, but the ability to get events can also be viewed in the Element, mainly because when the Element is nested at a deep and complex level, it can be viewed through the selector without clicking.

monitor

This is DevTools built-in listener, simple description is listening to the function function, use is very simple, directly set the doll on the line. At present, I have not found any particularly convenient place and the need to use it, just understand.

Preserve Log

When we debug the page, we often encounter the situation of page jump or refresh. At this time, the printed output will be refreshed 😭, and we cannot see the data we want. In the gear icon at the far right of the debug panel, there is the Preserve Log option to save the output from the last print, as demonstrated here with Math.random.

inspect

Inspect provides a quick way to jump to the corresponding position of a DOM element. For some nested or unknown elements, inspect can be used with debugging, and the element selector is passed into the function, will automatically jump to the corresponding position.

The elements panel

The Elements panel is the contents of the Elements panel, and we usually use it to get information about the corresponding Elements, such as Styles && Computed && Layout, etc., where we do some operations on the Elements, for example, what do I do to make an element explicit or implicit? One answer is to right-click on the Element and select Hide Element, but this is a bit of a hassle. Is there a better and faster way to do this? The answer is yes, directly select the element, press “H” on the keyboard to switch between the explicit and implicit state of the element, Amazing!

Not only that, but you can also drag elements directly to adjust their position.

Layout

The Layout is a subpanel that belongs to the elements panel. It is a great way to view the Layout of the elements, especially for Flex && Grid.

When the user clicks on an element that uses the Grid layout, all of its little squares are displayed.

Of course that’s not enough, we also want to know more details, like the size of each cell and how wide it is, and you can do that by clicking on the Overlay Display Settings option.

The first drop-down box displays line Names and line numbers, the alias of the line segment and the sequence number corresponding to the line segment.

The following three options are

  • Show track size: Toggle to show or hide track size.
  • Show region name: Toggle to show or hide the region name in the case of a grid with named grid regions.
  • Extended grid lines: By default, grid lines are only displayed inside elements with display: Grid or display: inline-grid set on them; When this option is turned on, the grid lines extend along each axis to the edge of the viewport.

The text description may seem confusing, but there are giFs below to explain each of them 😊.

The first option can clearly see the width of each row and column, the second option can see the alias of each “block”, the third option may not be very clear, it extends the grid segment to the edge of the viewport, you can carefully look at the bottom and right, you will find a few more dotted lines.

Also useful are a color block and a dashed block with mouse on Grid Overlays to customize the overlay color and highlight the mesh for each Grid, respectively.

How can WE not mention Flex when we’re talking about grid? In Chrome 91, flex debugging is a little bit more important. If you like grid, don’t worry. In Chrome 92, it will be synchronized!

One of the most recent features of Flex is the Styles subpanel of the elements panel, which adds a small button to the Styles of the corresponding elements. Clicking this button makes it easy to switch between the various flex layouts.

Animations animation group

Remember when I first came to the group, the first requirement was to use animation. At that time, debugging the animation was all numeric tweaks, which wasted a lot of time. Recently it was discovered that the concept of animation groups was included in debugging tools to make it easy to debug and observe animations. But the feature is hidden, hidden in More Tools.

It is extremely powerful and can capture all the animations currently in operation and modify their speed and time, which is very useful when multiple animations are needed together. Here is the Codepen website to feel the power of Animations, broken down into four areas from top to bottom:

  1. The top area can clear all captured animation groups or change the speed of the currently selected animation group.
  2. The second line allows you to select a different animation group, at which point the lower panel is updated with the animation timeline for the current animation group.
  3. The area with the timeline in the middle can be understood as the progress bar of the animation, which can be dragged to jump to the corresponding point in time of the animation.
  4. In the bottom area, you can modify the selected animation.

After capturing the animation using the animation group, we can slow down and replay the animation. The best part is to experience the effects of different combinations of animations, and to modify the timing and delay of the animation group, and even the keyframe offset.

You can drag the solid circle of the animation, its key frame, to control the duration of the animation (the leftmost and rightmost solid circles). You can also drag the solid circle in the middle to control the motion curve, which can be adjusted to get the most desired effect.

There is a red line in the middle that you can drag to control where the current animation is executing. Note the drag on the left and the transition on the right.

With animation group, permutation is no longer a dream!

End and spend

This introduction of the functions are some of the author think practical functions, such as a variety of command line functions, or new features of Chrome, such as flex && Grid debugging function, these functions in the development of proper disposal, can be very good to improve the development efficiency, of course, there are a lot of debugging functions are not introduced. After all, there is a lot of knowledge about how to use DevTools well, and these features are left to be discovered later in development.