As老婆of front-end children's shoes, I believe you must be familiar with Chrome browser.调页面,写BUG ,画样式, and看php片, the whole world would be useless without it.
Don’t believe it? Let’s see how powerful our老婆are...
When jointly debugging the back-end interface or troubleshooting online bugs, do you often hear them say this sentence: You Try making another request and let me see why the error occurred!
There is a ridiculously simple way to resend the request.
Select Network
click Fetch/XHR
select the request to resend,
right-click and select Replay XHR
There is no need to refresh the page or interact with the page. Isn’t it very cool? ! !
the scenario of quickly initiating a request in the console or joint debugging or bug fixing, for the same request, sometimes it is necessary to modify the input parameters and re-initiate. Is there any shortcut?
Select Network
click Fetch/XHR
select Copy as fetch
console, paste the code
to modify parameters, and press Enter to finish
In the past, I always dealt with it by changing the code or writing fetch by hand. It was really stupid to think about it...
If your code is calculated, it will output a complex object , and it needs to be copied and sent to others. People, what should I do?
Use the copy function to execute对象as an input parameter
In the past, I always printed it to the console through JSON.stringify(fetfishObj, null, 2) , and then manually copied and pasted it. This was really inefficient...
when debugging the web page. After selecting an element in the Elements panel, what if you want to know some of its attributes, such as宽,高,位置, etc., through JS ?
Select the element to be debugged through Elements
and access the console directly with $0
Occasionally we will need to take a screenshot of a web page. One screen is fine. The system's built-in screenshots or WeChat screenshots can be done, but it is required to capture content that exceeds one screen. What to do ?
Prepare the content that needs to be taken.
cmd + shift + p Execute the Command command
and enter Capture full size screenshot and press Enter.
What if you want to intercept some selected elements?
The answer is also very simple. In the third step, enter Capture node screenshot
. When debugging elements, do you often expand them one by one to debug them when the level is relatively deep? There is a faster way
to hold down the opt key + click (the outermost element that needs to be expanded)
to see this scenario. I guess you must have encountered it. Various processes have been performed on a certain string, and then we want to know the results of each step of execution. What should we do? ? .
'fatfish'.split('').reverse().join('') // hsiftaf you might do this
// 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 
A simpler way is
to use $_ to reference the result of the previous operation without 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
Some students like the white theme of chrome, and some like black. We can use shortcut keys to quickly switch between the two themes.
cmd + shift + p execute the Command command
and enter Switch to dark theme or Switch to light theme to switch the theme.
$ " and " $$ " selectorsare the most common requirement to use document.querySelector and document.querySelectorAll on the console to select elements of the current page, but it is actually a bit too long. We can use $ and $$ substitute.
$i Install npm package directly in the console.Have you ever encountered this scenario? Sometimes I want to use an API such as dayjs or lodash , but I don’t want to go to the official website to check it. It would be nice if I could try it out directly on the console.
Console Importer is such a plug-in, used to install npm packages directly in the console.
Install Console Importer plug-in
$i('name') to install the npm package
Suppose there is the following code. We hope that the breakpoint will be triggered when the name of the food 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 using a large amount of data and only wants to break the condition when the condition is met. Just imagine if there are no conditional breakpoints, do we need to click the debugger n times?
(Learning video sharing: web front-end development, programming basics video)
The above are the details of 11 chrome debugging skills that can improve efficiency. For more, please pay attention to other related articles on the PHP Chinese website!