As a developer, I’m sure you’ve had a lot of experience with Chrome Devtools, but the most you’ve ever used is to tweak styles or console.
Here sorted out some simple and easy to use debugging functions, I believe that you will have certain debugging help!
Note: The features here are based on version 96.
1. Scroll into view
In the new requirement, I came across a long page and found the node element THAT I wanted to modify. How do I find out where this element is on the page? Still goofy scrolling up and down the page? Here’s a trick: Right click, and then Scroll into View, and it’ll pop up.
2. New method of screenshot
Don’t have the right screenshots handy, or are you still opening the xyz app to take screenshots? No point screenshots SAO operation how line.
If Command+Shift+P (Mac) or Control+Shift+P (Window) pull Command and enter Capture Full size screenshot, you can get a complete screenshot of the current page from the top to the bottom of the screen.
Similarly, there are three other screenshots:
3. The color
Do you still keep a color picker on your computer? Chrome is ready for you.
4. CSS Overview
This is a preview feature in Chrome 96 that helps you better understand the CSS on your page and make some improvements.
It includes:
- Overview summary. A high-level summary of the page, such as the elements on the page, the number of selectors, etc.
- Color information. All colors on the page are grouped according to purpose, such as text color, background color, etc. It also shows you low-contrast text, which can help you improve the accessibility of the page.
- Font information. Displays all the fonts on the page and the number of times they appear.
- An unused style declaration. Styles that are defined, but not used.
- Media enquiries. All media queries defined in the page.
Click on all of the above lists to display a list of affected elements.
5. Check animations
It has two main uses:
- Check the animation. Slow down, replay, or examine the source code for the animation group.
- Modify the animation. You want to modify the animation group’s time, delay, duration, or keyframe offset. Bessel curve editing and keyframe editing are not currently supported.
The animation inspector supports CSS animations, CSS transitions, and Web animations. However, requestAnimationFrame does not currently support animation.
6. Layout the debugging panel
Too many Flex or Grid properties to remember? I’m going to visualize it for you. [example]
7. SelectJavaScriptcontext
By default, the JavaScript context is the browsing context for the current document. Suppose you have an embedded
8. To enhancelogReading experience
Sometimes when you print a simple variable in console.log(), it’s easy to forget which value was printed for which variable, and when there are a lot of them, it’s even harder to read.
// bad
const a = 5;
const b = +new Date();
const c = 'str';
const d = 10;
console.log(a,b,c,d)
> 5 1640496322514 'str' 10
// very bad
console.log('a', a);
console.log('b', b);
console.log('c', c);
console.log('d', d);
Copy the codeTo make it easier to read, just wrap it around a {} or use it with console.table.
// good
console.log({a,b,c,d})
// or
console.table({a,b,c,d})
Copy the code
9. copy(...)
If you want to copy content from the browser console, just copy it.
10. Printing time
What if you want to test the runtime of a piece of code? Use console.time() and console.timeend ().
console.time();
for (let i = 0; i < 100000; i++) {
let square = i ** 2;
}
console.timeEnd();
Copy the code
11. The $_
Tips: If you are using a library that uses $(such as jQuery), this feature will be overridden and $will correspond to the implementation of that library
When debugging, we often want to see the output of the last expression, why should we input and output again?
No need this time, use $_, which returns a reference to the last execution result.
Suppose we have a scenario where we need to reverse the string ‘abcdefg’, naturally:
'abcdefg'.split('').reverse().join('')
// gfedcba
Copy the codeThe code does invert the string. But assuming you still don’t understand what the split(), reverse(), join() methods do and the results of running these intermediate steps, it’s a good idea to use $_ now if you want to go through the above code step by step.
// bad
'abcdefg'.split('');
> ['a', 'b', 'c', 'd', 'e', 'f', 'g']
['a', 'b', 'c', 'd', 'e', 'f', 'g'].reverse();
> ['g', 'f', 'e', 'd', 'c', 'b', 'a']
['g', 'f', 'e', 'd', 'c', 'b', 'a'].join('');
> 'gfedcba'
// good
'abcdefg'.split('');
$_.reverse();
$_.join('');
> 'gfedcba'
Copy the code12. Block request URL
What if you want to know how the page looks and behaves when some of its key resources are unavailable, or when loading fails? We can do that by blocking the request.
Similarly, Block request domains Block all resource requests under the selected domain name.
13. Replay XHR
Do we often repeat a key request in front and back end synch? Still refreshing the page (do I have to wait a few more seconds for the screen to go blank)? Replay XHR directly.
14. Get a reference to the element
We often get an element on a page reference for operation, tend to use the document. The getElementById or document. The getElementsByClassName to obtain element. Teach you a few moves, efficiency up.
$0 - $4
$0 returns a reference to the most recently selected element, $1 returns the second most recently selected element, and so on.
Store as global variable
You can save elements as global variables
Copy JS path
Copy JS path automatically selects elements for you using querySelector, no longer need I manually write the selector.
15. Custom snippets
In normal development, we have code Snippets that we use a lot, or we run automated scripts, and we can store that code in Snippets for easy use.
I’m going to show you some code that introduces LoDash, so you can try it out for yourself. Here are some more interesting code snippets to choose from.
(function () { 'use strict'; var element = document.createElement('script'); Element. The SRC = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"; element.type = "text/javascript"; document.head.appendChild(element); }) ();Copy the code
16. IgnoreChromeExpand the script
When you step through code using the Sources panel of Chrome DevTools, you sometimes pause on code you don’t know. Could you debug the code for a Chrome extension you installed and re-open the traceless window? No, you can just ignore the Chrome extension script.
17. DisableJavaScript
To see how pages look and behave with JavaScript disabled, try this.
18. Six ways to interrupt
In our normal development, we often break the point of debugging, only one way to break the point is not good, let us introduce other ways to break the point. And you can try it out with this Demo.
Break on a line
This is the most common way to interrupt a point, so I won’t go into more details. To break a breakpoint on a particular line of code and pause execution at that line.
Conditional breakpoints
This is a breakpoint that is triggered only when the condition you set is true.
DOM breakpoint
You can use this breakpoint method if you want to pause code that changes a DOM node or its children.
XHR breakpoint
What do you do when you see that the requested URL is incorrect? You can do this by entering the desired string in the XHR breakpoint, and the code will pause when the requested URL contains the string.
Event listening breakpoint
Want to pause when the event fires but don’t know where to hit the breakpoint? There are so many event listening breakpoints to choose from!
Exception breakpoints
Did you notice that the code threw an exception during development? This breakpoint helps you quickly find where an exception was thrown.
Function breakpoint
This breakpoint needs to be written in the code as debug(functionName).
function sum(a, b) { let result = a + b; Return result; } debug(sum); // Pass the function object, not a string. sum();Copy the codereference
Chrome Developers Developer documentation
Chrome debugging Tips you didn’t know