Google Chrome is a free web browser developed by Google. Because of the overall stability, speed and security (ECMA support is what front-end developers value most) it has been widely welcomed.

But it’s a tool we use a lot, and because so few people are paying attention to Chrome DevTools, they’re missing out on the power and efficiency that Chrome DevTools provides. Today I’m going to show you some of the most useful features hidden in Chrome DevTools.

First, let’s open the Chrome Developer Tool:

From there, we can go to the Command panel, where we can select various commands to perform various powerful functions.

Outputs the results of the last operation in the console

We often need to debug code in the console. Suppose you want to know how to invert strings in JavaScript, then search the web for information and find the following line of code.

'abcde'.split(' ').reverse().join(' ')
Copy the code

The code above reverses the string. But you still don’t know what the split, reverse, and join methods do or what happens when you run these intermediate steps. If you want to implement the above code step by step, you can write the following code:This does allow you to monitor the progress of each step, but it’s very redundant. It is both fallible and difficult to understand. Alternatively, you can use the magic variable $_ in the console to refer to the result of the previous operation.

$_ is a special variable whose value is always the result of the last operation in the console, and its presence makes it easier to debug code.

Resend the XHR requestIn front end projects, we often need to use XHR to make requests to the back end to get data. What if you want to resend the XHR request? For a novice, he might refresh the page, which is awkward. In fact, we can debug directly from the Network panel.

All you have to do is

  • Open Network and click XHR
  • Select the XHR request that you want to resend
  • Replay XHR

Monitor page loading status

If your page load time exceeds your target, then you need to monitor how your page loads at different times.

In Chrome DevTools, you can use the Capture Screenshots “Network” page to Capture Screenshots.

Click on each screen capture to show the network request at the corresponding time. This intuitive demonstration will give you a better understanding of the network requests that are happening from moment to moment.

Copy the variable

There is no way to copy the value of a variable elsewhere in JavaScript, but there is a function called copy in Chrome that can help you copy variables.

The copy function is not defined by ECMAScript, but is provided by Chrome. Using this feature, you can copy the values of JavaScript variables to the clipboard.

Copy the image as a data URI

There are two ways to process images on a page, one is to load them through external resource links, and the other is to encode images as data urls.

Encoding these small images into data urls and embedding them directly into our code can reduce the number of HTTP requests a page needs to make, thus speeding up page loading. How do we convert images into data urls in Chrome?

Suppose we have an array of objects that looks like this:

letUsers = [{name:'Jon', the age:22}, {name:'bitfish', the age:30}, {name:'Alice', the age:33}]Copy the code

Such arrays are not easy to view in the console. If the array is longer and the elements are more complex, it becomes more difficult to understand. Fortunately, Chrome provides tables, which lists a list of objects.

References the currently selected element in the console

$0 is another magic variable that references the currently selected element in the Elements panel.

Triggering CSS pseudo-classes Pseudo-classes let you apply styles to elements that refer not only to the contents of the document tree, but also to external factors such as the history of the navigator (:visited, etc.), the state of its content (checked on some form elements), or the position of the mouse (hover, which lets you know if the mouse is on the element).

We can write multiple pseudo-classes for an element, and to make it easier for us to test these styles, we can trigger them directly in the Elements palette.

Open it in a browser and debug its pseudo-class style through the Elements panel.

Shortcuts to hide elementsWhen debugging CSS styles, we often need to hide an element. If you select the element and press H, you can quickly hide it.This action is to undefined: hidden! important; The style is added to the corresponding element.

Store DOM elements in global temporary variables

To get a DOM element reference quickly from the console, do the following:

  • Select elements
  • Right click the mouse
  • Store as global variables

Follow Ant Vue’s official account for one article per day, and you can draw (1-999) red envelopes.