11+ chrome advanced debugging skills, learning efficiency directly increased by 666%

Maybe you and I have never met, but it is very likely that we will meet each other late, I am a front-end fat head fish

foreword

Chrome browser as the front-end children's shoes 老婆 , I believe you must be familiar with it. 调页面 , 写BUG , 画样式 , 看php片

Do not believe? Let's see how powerful our 老婆 is. …

1#. One-click to re-initiate the request

When debugging with the back-end interface or troubleshooting online bugs, have you often heard them say this: you try to make another request, let me see why it went wrong!

There is a ridiculously simple way to resend the request.

1. Selected Network
2. Click Fetch/XHR
3. Select the request to resend
4. Right click and select Replay XHR

No need to refresh the page, no need to interact with the page, isn't it very cool! ! !

2#. Quickly initiate a request in the console

It is still a scenario of joint debugging or BUG repair. For the same request, sometimes it is necessary to modify the input parameters and re-initiate. Is there any shortcut?

1. Select Network
2. Click Fetch/XHR
3. Select Copy as fetch
4. console paste code
5. Modify the parameters, press Enter to get it

I used to change the code or write by hand fetch . It's so stupid to think about it...

3#. Copy JavaScript variables

What if your code is calculated to output a complex object that needs to be copied and sent to someone else?

1. Use the copy function and execute 对象 as the input parameter

In the past, I always printed to the console through JSON.stringify(fetfishObj, null, 2) , and then copied and pasted manually, which was too inefficient...

4#. The console gets the element selected in the Elements panel

By debugging web Elements rear panel of the selected element, if you want JS know some of its properties, such as 宽 , 高 , 位置 What about 位置 and so on?

1. Select the element to debug via Elements
2. The console can be accessed directly with $0

5#. Capture a full-screen webpage

Occasionally we also have the need to take screenshots of web pages. One screen is fine, and the system's own screenshots or WeChat screenshots can be done, but what if we want to take screenshots that exceed one screen ?

1. Be ready to take screenshots
2. cmd + shift + p Execute the Command command
3. Type Capture full size screenshot press enter

What if you want to intercept some of the selected elements?

The answer is also very simple, the third step is to enter Capture node screenshot

6#. Expand all DOM elements with one click

When debugging elements, do you often expand and debug them one by one when the hierarchy is relatively deep? There is a faster way

1. Press and hold the opt key + click (the outermost element that needs to be expanded)

7#. The console refers to the result of the last execution

Let's take a look at this scene. I guess you must have encountered it. Various processes have been performed on a certain string, and then we want to know the result of each step. What should we do? .

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

you might do

 // 第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

easier way

Use $_ to refer to the result of the previous operation, without copying it every time

 // 第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 themes

Some students like the white theme of chrome, and some like black. We can use the shortcut keys to quickly switch between the two themes.

2. cmd + shift + p Execute Command command
3. Enter Switch to dark theme or Switch to light theme to switch the theme

9.# " $ " and " $$ " selector

Using in the console document.querySelector and document.querySelectorAll selecting the element of the current page is the most common requirement, but it is a bit too long, we can use $ $$ replace.

10.# $i Install the npm package directly on the console

Have you come across this scene? Sometimes I want to use a certain one such as dayjs or lodash API , but I don't want to check it on the official website.

Console Importer is such a plug-in, which is used to directly install the npm package on the console.

1. Install Console Importer plugin
2. $i('name') install npm package

11. # Add conditional breakpoint The magic of conditional breakpoint

Suppose there is the following code, we want the breakpoint to be triggered when the food name is 🍫 , how can we do it?

 const foods = [
  {
    name: '🍔',
    price: 10
  },
  {
    name: '🍫',
    price: 15
  },
  {
    name: '🍵',
    price: 20
  },
]

foods.forEach((v) => {
  console.log(v.name, v.price)
})

This is very convenient when there is a large amount of data, and you only want to break the point condition when the condition is met. Imagine if there is no conditional breakpoint, do we need to point the debugger n times?

At last

I hope to share practical, basic and advanced knowledge points with you all the time, get off work early and fish happily together.

I look forward to your following me in the Nuggets : Front-end Fat Head Fish , you can also find me in the public account: Front-end Fat Head Fish .