Play chrome efficiency take off

I don't know if it's efficient or not, it's really interesting.

Copy as cURL, Copy as PowerShell

Usage scenarios: Front-end and back-end communication is barrier-free. The xxxx/yyy interface does not meet expectations, and the backend quickly restores the on-site positioning problem.

How to use: Right-click on the target interface and click Copy as cUrl (mac), Copy as PowerShell (windows) to send the text to the back-end classmates, and the back-end requests the interface by entering the text in the terminal.

Capture full-size screenshot

Usage scenario: One day your team leader asked to provide a complete screenshot of the website, but unfortunately the page scrolled a few screens. How can this be done? ?

How to use: Open the browser developer tools, then type Ctrl+Shift+P on Windows, Command+Shift+P on Mac, then enter capture and select the way to take a screenshot.

Detailed explanation: Capture full-size screenshot captures the full screen, Capture area screenshot customizes the screenshot area, Capture node screenshot accurately captures the element display👍

Store as global variable

Usage scenario: Temporarily process interface data, and design the code. . .

How to use: Right-click on the interface response on the network panel, and then manipulate variables in the console window

Other: Very practical, this example is not enough to show its beauty. experience it yourself

console.table()

Usage scenario: Back-end students look at data? I don't know how it works, but it's amazing.

How to use: It's amazing to use with Store as global variable.

$i

Usage scenario: want to quickly try the loadsh, dayjs toolkit, or rely on the toolkit to process data

How to use: Install the console-importer plugin and restart the browser. try $i('dayjs') in console

Recommendation

The Chrome DevTools you didn't know

Chrome Debugging Tool Tricks You Didn't Know