Use Chrome DevTools Like a Senior Frontend Developer

11 Tricks You Must Know If You Choose Chrome as Your Development Tool

fatfish

Published in

JavaScript in Plain English

5 min readOct 12

Preface

I believe you must be familiar with the Chrome browser since it is the closest partner of front-end developers. We can use it to view network requests, analyze web page performance, and debug the latest JavaScript features.

In addition to these, it also provides many powerful but uncommon functions, which can greatly improve our development efficiency.

Let’s have a look.

1. Resend XHR request

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

You just need to do these steps：

Select the Network panel
Click Fetch/XHR
Select the request you want to resend
Right-click and select Replay XHR

2. Quickly send requests in the console

For the same request, sometimes it is necessary to modify the input parameters and resend them. What is the shortcut?

You just need to do these steps：

Select the Network panel.
Click Fetch/XHR.
Select the request you want to resend.
Select the Copy as fetch panel.
Modify the input parameter and resend it.

3. Copy JavaScript Variables

How can we copy complex data to the clipboard？

It’s amazing. You can do it by using the Copy function provided by the Chrome browser.