Now, for some reason, you ended up choosing Chrome as your development browser. Then you open Chrome Developer Tools and start debugging your code.

Sometimes we open the Console panel to check the output of our program, and sometimes we open the Elements panel to see the CSS code corresponding to the DOM element.

But can you really use Chrome DevTools? In fact, it provides a lot of powerful but unknown features that can greatly improve the efficiency of our development.

Here are some of the most useful features that I hope will help you.

Commmand menu

Before WE get started, I’d like to introduce the Command menu.

First we open Chrome Developer Tools, and then we open the Command menu with the following shortcut Command:

  • Windows: Ctrl + Shift + P
  • MacOS: Cmd + Shift + P

Or we can open it directly by clicking the button below:

After that, we can enter the Command panel, where we can choose from various commands to perform various powerful functions.

1. Powerful screenshot function

Capturing a part of a screen is a very common requirement, and I’m sure you already have a handy software program on your current computer. However, can you complete the following tasks?

  • Take screenshots of everything on a web page, including anything that doesn’t appear in the visual window
  • Accurately intercepts the content of a DOM element

These are two very common requirements that are not easily addressed by the operating system’s built-in screenshot tools. At this point, we can use the Command to help us accomplish this requirement.

The corresponding command is:

  • Screenshot Capture full size screenshot

  • Screenshot Capture node screenshot

Now open up any web page, such as the JavaScript equivalent of Top Stories

Medium.com/tag/javascr…

Then go to the Command menu and enter Screenshot Capture Full size Screenshot

Then we can get a full screenshot of the current page.

(TO save your traffic, I have compressed the image above)

Similarly, if you want to take a screenshot of a DOM element, of course you can use the system’s own screenshot tool, but you will not be able to capture the element exactly. At this point, use the screenshot Command from Command.

First we select an element from the Element panel and then execute the Screenshot Capture node Screenshot

Here is the result of an accurate screenshot:

2. Reference the result of the previous 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 you search the web and find the following line of code.

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

Good, the above code does reverse the string. But you still don’t understand what methods like split() reverse() join() do, and the results of running these intermediate steps. So if you want to execute the above code step by step, you might write:

Well, after these steps, we do know the return value of each method run.

But the above writing method is very redundant, both prone to error, but also not easy to understand. In Console, we can use the magic variable $_ to refer to the result of the previous operation.

$_ is a special variable whose value is always equal to the result of the last operation in the console. This technique is very handy for debugging code.

3. Initiate the XHR request again

In our front-end projects, we often need to use XHR to make requests to the back end to get data. If you wanted to make another XHR request now, what would you do?

For a novice, he might refresh the page, but that’s a bit of a hassle. In fact, we can debug directly in the NetWork panel.

Open the Network panel -> XHR -> select the XHR request you want to re-initiate -> Replay XHR

Here’s an example:

4. Track page loads

It may take more than ten seconds for a web page to be fully loaded from the beginning. At this point, we need to monitor how the page is loading at different times.

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 all the time.

5. Copy variables

Can you copy the value of a JavaScript variable somewhere else?

This may seem like an impossible task, but Chrome provides a function called copy that helps you copy a variable.

The following GIF illustrates the process:

6. Copy the image as a data URI

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

Data URLs, URLs prefixed with the Data: protocol, allow content creators to embed small files into documents.

Coding those small images into data URLs and embedding them directly into our code can reduce the number of HTTP requests our pages need to make, thus increasing page loading speed.

7. Trigger CSS pseudo-classes

We may write multiple pseudo-classes for an element, but to test these styles we can trigger them directly from the Elements palette

8. Hide elements on the page

Sometimes we need to hide an Element by selecting it in the Element pane and pressing the H key:

9. Store DOM elements

If we select an Element in the Element panel and click Store as a Global Variable, we can Store the DOM reference and use it in the Console:

10. Tabulate objects

For example, there is an array of objects like this:

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

If we print this object directly on the console, it will look very unintuitive:

In this case, you can use the table function, which is provided by Chrome, to output the results as a table.