11 Chrome DevTools Tricks to Help You Become a Senior FrontEnd Developer

Foreword

I believe you must be familiar with the Chrome browser as it is the closest interface developer partner. We can use it to view network requests, analyze the performance of a web page, and debug the latest JavaScript features.

In addition to this, it also provides many powerful yet unusual features that can greatly improve our development efficiency.

Let’s get a look.

1. Resend the XHR request

In our work, we often have to debug the interface with back-end developers. Using this feature can improve the efficiency of our docking.

You just need to do these steps:

1. Select tab Network

2. ClickFetch/XHR

3. Select the request you want to resend

4. Right click and selectReplay XHR

2. Quickly send requests in the console

For the same request, it is sometimes necessary to change the input parameters and send them again. How to do it with minimal effort?

You just need to do these steps:

1. Select tab Network.

2. Click Fetch/XHR.

3. Select the request you want to resend.

4. Select Copy then Copy as fetch.

5. Change the input parameter and resubmit it.

3. JavaScript variables can be copied

This is amazing. You can copy complex data in variables using the functionCopyprovided by the Chrome browser.

Translator’s note: you can also copy the JSON objects returned by the server (on the Network -> Preview tab) if you press the right mouse button and copy object

4. Get selected DOM element in console

How can we output to the console some of the attributes (such as width, height, position, etc.) of a DOM element selected through the Elements panel?

1. Select DOM element via tab Elements.

2. Write in console $0to access an element

5. Take full size screenshots

If we want to take a screenshot of an entire page that consists of more than one screen, can Chrome browser do this easily?

1. Prepare the content of the page you want to capture

2. Open developer tools and press key combination – on Windows/Unix Ctrl + Shift + P on macOS CMD + Shift + P console will openCommand

3. Enter Сделать полноразмерный скриншот (if the OS language is English, then Capture full size screenshot ) and press Enter

Wow cool!

And if we want to take a screenshot of a part of the page, what should we do?

It’s also very simple, just type “Take a screenshot of a node” (Capture node screenshot if the OS is in English) in the third step:

6. Expand all child nodes

How to expand all child nodes of a DOM element at the same time without selecting them one by one? You can use Alt+Click on the Elements tab to expand all child nodes at once.

7. Use “$” to refer to the result of the last run.

Let’s look at this scene: we have performed various operations on a string, and then we want to know the result of each step, what should we do?

'fatfish'.split('').reverse().join('') // hsiftaf

You can do something like this

// шаг 1
'fatfish'.split('') // ['f', 'a', 't', 'f', 'i', 's', 'h']
// шаг 2
['f', 'a', 't', 'f', 'i', 's', 'h'].reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
// шаг 3
['h', 's', 'i', 'f', 't', 'a', 'f'].join('') // hsiftaf

An easier way:

Use $ to get the result of the last operation

// шаг 1
'fatfish'.split('') // ['f', 'a', 't', 'f', 'i', 's', 'h']
// шаг 2
$_.reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
// шаг 3
$_.join('') // hsiftaf

8. Quickly switch theme colors

Some people like the white theme of Chrome, while others like the black one. We can use keyboard shortcuts to quickly switch between two themes.

1. cmd + shift + prun command command

2. Type “Switch to dark theme” or “Switch to light theme” to switch the theme.

Note from the translator: the light theme is good when a lot of bright light hits the screen, for example, if you work on the beach on a sunny day

9. Use $ and $$ to quickly select DOM elements

Usage document.querySelector and document.querySelectorAllto select elements of the current page in the console is the most common way, but it’s too long and we can use $ and $$ instead (even if jQuery is not included in the page):

10. Use $I to install the npm package in the console.

Sometimes I want to use NPM packages like dayjsor lodash, but I don’t want to go to the official website to check it out. It would be nice if we could try it right on the console, and we can!

1. Install plugin console import

2. $i(‘name’) install npm package

11. Add a conditional breakpoint

We want to pause the execution of the code when, while iterating over an object, we encounter food, which is called 🍫 How to do it?

const foods = [
  {
    name: '🍔',
    price: 10
  },
  {
    name: '🍫',
    price: 15
  },
  {
    name: '🍵',
    price: 20
  },
]
foods.forEach((v) => {
  // debugger
  console.log(v.name, v.price)
})

That’s how:

In the case of large amounts of data, the use of conditional breakpoints will be very useful for development and will greatly increase efficiency! Get armed.

Thank you for your attention!

Translator’s note: I stumbled upon this article by accident and found it useful. I am very glad if this translation was useful to someone 🤠