Original address: medium.com/javascript-…

Author: Dornhoth

11 tips you must know if you choose Chrome as your development environment.

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

Sometimes you can open the Console Panel to check the output of your program, or open the Elements Panel to check the CSS code for DOM Elements.

But do you really know DevTools for Chrome? In fact, it provides many powerful but unknown features that can greatly improve our development efficiency.

Here, I’ll introduce the most useful features that I hope will help you.

Before WE begin, I’d like to introduce the Command menu. The command menu is to Chrome what the Shell is to Linux. The Command menu allows you to enter commands to operate Chrome.

First, we open the Chrome Developer tool, and then open the command menu with the following shortcut:

Windows: Ctrl + Shift + P macOS: Cmd + Shift + PCopy the code

Or we can open it by clicking the button below:

Then we can go to the command panel where we can select various commands to perform various powerful functions.

Powerful screen shots

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

  • Take a screen shot of everything on the web page, including everything not present in the visible window
  • Accurately capture the content of a DOM element

These are two common requirements, but they are not easily addressed using the screenshot tools that come with the operating system. At this point, we can use commands to help us accomplish this requirement.

The corresponding command is:

Screenshot Capture full size screenshot

Screenshot Capture node screenshot
Copy the code

example

Now open any page, for example, the JavaScript headlines page on Medium. Medium.com/tag/javascr…

Then go to the command menu and execute Screenshot Capture full size Screenshot

We can then get a full screen capture of the current page.

The original image above is very crisp, but here I uploaded a compressed image to save you traffic.

Similarly, if you want to take a screen shot of a DOM element, you can use your system’s own screen capture tool, but you can’t capture that element exactly. At this point, you can use Capture Node Screenshot.

First, select an element in the elements panel, and then run the command.

Here’s the exact screenshot:

Reference the result of a 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 search the web for information and find the following code.

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

Well, the above code does reverse the string. But you still don’t understand the split() reverse() join() method and the results of running these intermediate steps. So now you want to execute the above code step by step, you can write it like this:

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

But this is very redundant. It is both fallible and difficult to understand. In fact, in the console, we can use the magic variable $_ to refer to the results of previous operations.

$_ is a special variable whose value is always the result of the last operation in the console. This technique is an easy way to debug code.

Resend the XHR request

In our front-end projects, we often need to use the XHR back end to make requests to get data. What if you want to resend an XHR request?

For a novice, he might refresh the page, but this can be cumbersome. In fact, we can debug directly in the Network Panel.

  • Open the Network Panel
  • Click the XHR button
  • Select the XHR request that you want to resend
  • Resend XHR

Here’s an example GIF:

Monitor page loading status

It can take more than 10 seconds for the page to fully load from the start. We need to monitor how pages load at different times.

In Chrome Developer Tools, you can go to the Web panel and select Capture Screenshots to get Screenshots of page loads.

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.

Copy the variable

Can you copy the value of a JavaScript variable somewhere else? It may seem like an impossible task, but in Chrome, there’s a function called Copy that helps you copy a variable.

The copy function is not defined by ECMAScript, but is provided by Chrome. Using this function, 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, either by loading them via an external resource link or by encoding them as data URLs.

Data URLs, URLs prefixed with the Data: protocol, allow content creators to embed small files inline into documents. They used to be called “data URIs” until the WHATWG stopped using that name.

Coding these small images into Data URLs and embedding them directly into our code can reduce the number of HTTP requests that a page needs to make, thus speeding up page loading.

How do we convert images to data urls in Chrome?

Here’s a GIF:

Table Object Array

Suppose we have an array of objects like this:

letThe users = [{{name:'Jon', age: 22}, {name:'bitfish', 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 harder to understand. Fortunately, Chrome provides a table function to tabulate an array of objects.

In many cases, this feature is very useful.

Drag and drop Elements panel

Sometimes we need to reposition DOM elements on the page to test the UI. In the Elements panel, you can drag and drop any HTML element and change its position in the page:

In the GIF above, I drag the position of the div in the elements palette, and its position on the page changes synchronously.

References the currently selected element in the console

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

Trigger CSS pseudo-classes

Pseudo-classes allow you to apply styles to an element not only with respect to the contents of the document tree, but also with respect to external factors, such as the history of the navigation (:visited, etc.), the state of its content (e.g. Checked in some form elements), or the position of the mouse (e.g. Hover, It lets you know if the mouse is over the element).

We can write multiple pseudo-classes for an element, and to facilitate testing of these styles, we can trigger them directly from the element palette.

The sample

Here’s a page:

<! DOCTYPE html> <html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
  <style>
    body{
      font-size: 150px;
    }

    div:hover{
      color: red;
    }
    div:active{
      color: blue;
    }
    div:focus{
      color: brown;
    }
  </style>
</head>
<body>
  <div>hello world</div>
</body>
</html>
Copy the code

We then open it in a browser and debug its pseudo-class style through the elements palette.

Shortcuts to hide elements

When debugging CSS styles, we often need to hide an element. If we select the element and press the H key on the keyboard, we can quickly hide the element.

The action is to undefined: hidden! important; The style is added to the corresponding element.

Store DOM elements in global temporary variables

If we want to quickly get a DOM element reference from the console, we can do this:

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