Maybe you and I have never met, but we may not have met. I am a head fish

preface

Chrome browser as a front-end children’s shoes wife, I believe you must not be unfamiliar. Tune pages, write bugs, draw styles, and read PHP tablets without it the whole world would be a mess.

Don’t believe it? Let’s see how much our wife….

1#. Re-initiate the request with one click

How often do you hear them say this when you’re coordinating with the back-end interface or checking for bugs on the line: Try making another request and I’ll see what went wrong!

Resending the request is a hideously easy way to do it.

  1. The selectedNetwork
  2. Click on theFetch/XHR
  3. Select the request to resend
  4. The right choiceReplay XHR

Do not refresh the page, do not walk the page interaction, is not very cool!!

2#. Make a quick request at the console

For the same request, sometimes you need to modify the input parameter to start again. Is there a shortcut?

  1. The selectedNetwork
  2. Click on theFetch/XHR
  3. chooseCopy as fetch
  4. Console paste code
  5. Modify the parameters and press Enter

I used to deal with fetch by changing the code or writing it by hand, which was really silly to think about…

3#. Copy JavaScript variables

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

  1. usecopyFunction,objectExecute as an input parameter

I used to print json.stringify (fetfishObj, NULL, 2) to the console and then copy and paste it manually, which was pretty inefficient…

4#. The console gets the selected Elements from the Elements panel

After selecting an element in the Elements panel while debugging a web page, what if you want to know its properties, such as width, height, position, etc., from JS?

  1. throughElementsSelect the element to debug
  2. Console direct use$0access

# 5. Capture a full-screen web page

Occasionally we will also have the demand for web page screenshots, a screen is ok, the system’s own screenshots or wechat screenshots can be done, but the requirements will be more than a screen of content also cut down what to do?

  1. Have something you want to take a screenshot of
  2. cmd + shift + pperformCommandThe command
  3. The inputCapture full size screenshotPress enter

What if you want to intercept selected elements?

The answer is also very simple, step 3 enter Capture node screenshot

6#. Expand all DOM elements in one click

When debugging elements, do you often expand and debug them one by one at a higher level? There’s a faster way

  1. Hold down theoptKey + click (outermost element to expand)

7#. The console references the results of the last execution

Take a look at this scenario, which I’m sure you’ve seen, where we do various operations on a string, and we want to know the result of each step. What do we do? .

'fatfish'.split(' ').reverse().join(' ') // hsiftaf
Copy the code

You might do that

/ / step 1
'fatfish'.split(' ') // ['f', 'a', 't', 'f', 'i', 's', 'h']
/ / step 2
['f'.'a'.'t'.'f'.'i'.'s'.'h'].reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
/ / step 3
['h'.'s'.'i'.'f'.'t'.'a'.'f'].join(' ') // hsiftaf
Copy the code

The easier way

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

/ / step 1
'fatfish'.split(' ') // ['f', 'a', 't', 'f', 'i', 's', 'h']
/ / step 2
$_.reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
/ / step 3
$_.join(' ') // hsiftaf
Copy the code

8.# Quickly switch themes

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

  1. cmd + shift + pperformCommandThe command
  2. The inputSwitch to dark themeorSwitch to light themeSwitch themes

# 9.”$“And”$$“Selector

In the console using the document. QuerySelector and document. QuerySelectorAll choose the demand of the current page element is the most common, but really a bit too long, we can use the $and $$.

# 10.$iInstall the NPM package directly on the console

Have you seen this before? Sometimes you want to use an API like DayJS or LoDash, but you don’t want to go to the official website. It would be nice if you could just try it out on the console.

Console Importer is a plug-in that installs NPM packages directly on the Console.

  1. The installationConsole ImporterThe plug-in
  2. $I (‘name’) installs NPM package

# Add Conditional breakpoint

Suppose we have the following code, we want the breakpoint to be triggered only when the food name is 🍫.

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

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

Copy the code

This can be very handy for breaking point conditions when the conditions are met in large amounts of data. Imagine if there is no conditional breakpoint do we need to hit the debugger n times?

The last

I hope I can share practical, basic and advanced knowledge points with you all the time.

I look forward to your attention in nuggets: front end bighead fish, you can also find me in the public number: front end bighead fish.