Chrome DevToolsA web developer's best friend, it has a lot of tricks and some unknown features.
Most developers know the basics, like how to inspect elements on a page, but there's a lot more functionality hidden beneath the surface. The purpose of this article is to demystify some of the most useful yet little-known features and show you what they can do for your development process.
Reference HTML elements
Chrome DevToolsOne of the lesser-known features is the ability to reference HTML elements. This can be done in two simple steps:
1. Open Chrome DevTools and navigate to the view Elements.
2. Right-click the element you want to reference and select Store as global variable.
Now that you have a reference to the HTML element, you can access and inspect it in the console.
log point
Logpoints are a way to provide debugging information to the console without resorting to console.log(). I've been using this feature since I first heard about it, and Logpointsthey allow me to clean up statement fragmentation in my code base console.log.
You can add new ones by right-clicking DevToolsany sourcesrow in the tab and specifying the expression to log Logpoint. When the line is executed, you will get its value in the console.
real-time expression
Live expressions are a feature that displays changes in the value of an expression. This helps track down problems with complex expressions (such as those used in animations) or expressions that vary widely (for example, if you are iterating over an array).
All you need to do is click Create live expressionsthe (eye to the left of Filter) button and specify the expression you want to monitor, and it will automatically display its value when it changes.
其他用途:Display mouse coordinates using Live Expressions
console.trace()
console.trace()is a utility that lets you know where a specific call to a specific function is made. Imagine you have an internal function that is used in different places and causes problems. To eradicate this problem, you must first find out where in your code it is called.
Notice how our stack trace shows innerFunctiona call to and outterFunctiona call to .
This is a great way to troubleshoot problems and find out exactly where in your code something is failing.
Console Utilities
Console UtilitiesIt is an integral part of the Chrome development tools functionality. Console Utilities APIContains a set of convenience functions for common tasks.
Two very useful ones are $()and $$()instead of document.querySelector()sum document.querySelectorAll(). will return the list of nodes you expect and convert the result to an array so you can use map()and filter().
in conclusion
These are just some of the lesser-known Chrome DevToolsfeatures that can make your development process easier. With a little exploration, you'll be able to find more tips to help streamline your workflow.
at last
I compiled a set of "Interview Guide for Front-End Major Companies", which includes HTML, CSS, JavaScript, HTTP, TCP protocol, browser, VUE, React, data structure and algorithm. There are 201 interview questions in total, and I have made an answer for each question. Answer and analysis.
Friends in need can click on the card at the end of the article to receive this document and share it free of charge
Part of the document display:
The length of the article is limited, so the following content will not be shown one by one.
Friends in need can click on the card below to get it for free