Chrome debugging skills

Re launch the request

Initiate a request at the console

• Select request , choice Copy as fetch
• Paste the code on the console
  

Copy JavaScript Variable

• Use copy function , And then directly cv Just go
  

obtain Elements The element selected in the panel

• After selecting the elements ,$0 obtain
  

Intercept a full screen web page beyond the scroll bar

• f12 Open the developer panel
• command+shift+p Open command
• Input Capture full size screenshot Press enter
  
• To intercept some selected elements , Select the element and enter Capture node screenshot

One click to expand all DOM Elements

• When the level is deep , Hold down opt key + click

The console refers to the result of the last execution

• Use $_ Reference the result of the last operation

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

Console selection dom Elements

• "$“ and ”$$" Selectors , Corresponding document.querySelector and document.querySelectorAll

Conditional breakpoints

• Suppose you have the following code , I hope the breakpoint will be triggered when the name of the food is
• If you interrupt directly , Will debug many times

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

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