As a web developer, I am definitely familiar with Chrome DevTools. Although I use it every day, it may be repeated use of certain functions. If readers are now asked to give themselves a "knowledge of Chrome DevTools", they will give What's your own score?
Introduction to Chrome DevTools
The well-known Chrome DevTools is mainly composed of several panels (Panel), such as Elements, Console, Sources, etc. In addition, you can open the drawer by pressing ESC when DevTools is turned on. There are also many useful functions hidden in it, most commonly used The situation is that I want to use the Console to input some JavaScript to observe and modify variables while opening the Network and Sources panels.
If you want to view DOM and CSS information, just right-click on the element and click Inspect or use the shortcut command Command+Option+C to select the element, and DevTools will pop up on the right side of the page.
To view the Log, just press Command+Option+J to directly open the Console panel. It is also a very useful JavaScript REPL tool. I often interview some JavaScript behaviors in it:
In addition, you can also adjust the Panel layout in Settings to make the panels of multiple panes easier to view. The default Auto is no problem in most cases, but it is suitable to be adjusted to horizon when using a long screen. Ntal, to avoid the Element panel being squeezed into the left and right sides.
After reading these tips, are you eager to try it?
Is only Chrome DevTools enough?
The author's answer is: enough! Chrome DevTools is really powerful. Many of the Debug processes that switch Try Error back and forth between Chrome and the editor can actually be done quickly in Chrome DevTools. The time taken in the long run is very considerable, especially when there is a lot of code. , If you use packaging tools such as Webpack, it may increase a lot of waiting time.
The Debug habit of writing programs is also accumulated. In order to solve the problem quickly, I will continue to use the methods I know, and I won’t learn new tricks until one day I don’t use it. When I switch from console.log Dafa to other methods I have also experienced a lot of pain, and I need to work hard to curb the habit of entering console.log.
Chrome DevTools files
If readers have read the Chrome DevTools files, they may already be familiar with the explanations of Chrome DevTools in this series of articles. However, although the official files are constantly being updated, the update speed of DevTools is too fast, and there are many differences in some functions and files. Sometimes Even just attach the link to What's New In DevTools.
In addition, most of the new features will be tested first in Chrome Canary. Although the official recommends it strongly, the author always encountered some weird problems when trying to use it before and had to switch back to the original Chrome.
This series of articles will focus on the latest version of Chrome. In addition to explaining the usage of each function, developers who have read the document can also use the content of this series of articles to synchronize their current understanding of Chrome DevTools.
The Chrome version used at the time of writing this article is 85.0.4183.102.
If a worker wants to be good at his work, he must first sharpen his tools
There are many functional panels of Chrome DevTools, and even the setting page is dazzling, but if you take the time to understand each detail in detail, you will find that the efficiency of development and Debug has been significantly improved. In the next article, the author will Starting from Elements, I will walk you through the various panels, Drawer and Settings, and those "front-end debugging techniques you don't know".