As the saying goes, if you want to do a good job, you must sharpen your tools. If you want to do front-end development, you must quickly and accurately locate bugs and check the quality of the code, so learn to use the Chrome console first. Don’t talk nonsense to open up!

Chrome DevTools:

  • useCtrl + Shift + I(on the MacCmd+Opt+I) Open DevTools.
  • useCtrl + Shift + J(on the MacCmd+Opt+JOpen the console in DevTools
  • useCtrl + Shift + C(on the MacCmd+Shift+COpen DevTools’ review element mode.
  • In addition, you can right click the mouse to check

Element 

Let’s start at the top when we open the console.

Click the mouse arrow in the upper right corner to retrieve the DOM element directly

The following is

Styles: mainly related to the style of the currently selected element. You can debug styles directly on this page and make changes as you go. This is much easier than making changes in the editor.

Computed: This is mainly about looking at the specific attribute values of the element CSS.

Layout: Related to the Layout

Note the code that helps us listen for DOM events and locate the trigger events:

DOMBreakpoint: This is for the corresponding DOM break point

  • Subtree modifications: Deletes or adds a child node
  • Attributes modifications: When attributes are being modified
  • Node Removal: When a node is deleted

Properties: DOM Properties

Accessibility: DOM Accessibility

In addition, we can also right-click the element, there are a variety of operations on the element, such as directly edit the element HTML, or modify to delete DOM, DOM elements can also be directly dragged to edit and modify, as well as the interruption point, directly generated and downloaded DOM element images and so on the operation, can be interested in a try.

Add a style to the hover state of an element that we want to look at when debugging CSS

How to quickly locate code

1. The simplest way is to directly search for keywords in the editor using Command + Shift +F, such as the unique Chinese character appearing on the page or the class ID name in the DOM

2. There are also EventListeners mentioned above, which are used to help us listen for DOM events and locate code that triggers them.

3.DOMBreakpoint the corresponding DOM break point and then trigger that event, for example:

Attributes Modifications is a breakpoint for the Input box that can be clicked to trigger the event to find the code to trigger the event through the Call stack.

4. We can also use styles to locate CSS files and code

Console

The panel NaZhu if we use print log and some warnings and errors (when we saw the errors in the console, regardless of whether the code can run through we should go to solve this error, it is a programmer should have good habit), we can also it this as a js test some js code editor can directly above.

We can use these two methods to determine whether a method or function is executing an event (this method can be useful in some cases).Developer.chrome.com/docs/devtoo…

Added a, in the console input document. Body. ContentEditable = “true” or document. DesignMode = ‘on’ can be achieved for web editor.

Source

This panel is used to store the source code, where you can look up the code and put a breakpoint on the code (you can also put debugger on the code to break the point)

Performance (Performance monitoring)

1. Agency coverage

Here we can see how much of this particular JS file is being executed on the current page so that the code can be optimized.

2. Function execution time

The Performance panel’s Call Tree allows you to view the execution time of each function to find Performance bottlenecks.

Recording process:

  1. Start logging by clicking the first circle on the left of the control bar
  2. Wait a few minutes (normal operation page)
  3. Click the Stop button, Devtools stops recording, processes the data, and displays the performance report

3. Related performance indicators

Next, let’s look at several performance indicators of the browser (the core indicators are LCP- load, FID- interaction,CLS- visual stability).

  • First Contentful Paint (FCP): Measures how long it takes for a piece of content to appear on the page when the page starts to load.

  • Largest Contentful Paint (LCP): Measures the time when the page starts to load to the maximum block of text content or image displayed on the page.

  • First Input Delay (FID): Measures the time between the user’s First interaction with the site (e.g. clicking a link, button, js custom control) and the browser’s actual response.

  • Time to Interactive (TTI): Measures the Time from page loading to visual rendering, when the page initialization script is loaded, and can reliably and quickly respond to the user.

  • Total Blocking Time (TBT): Measures the time between FCP and TTI when the main thread is blocked and unable to respond to user input.

  • Cumulative Layout Shift (CLS): Measures the Cumulative score of an unpredictable layout occurring from the time the page starts to load until the state becomes hidden.

Google officially provides a Web-Vitals library that can measure the above three metrics online or locally:

import {getCLS, getFID, getLCP} from 'web-vitals'; function sendToAnalytics(metric) { const body = JSON.stringify(metric); // Use `navigator.sendBeacon()` if available, falling back to `fetch()`. (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) || fetch('/analytics', {body, method: 'POST', keepalive: true}); }getCLS(sendToAnalytics); getFID(sendToAnalytics); getLCP(sendToAnalytics);Copy the code

See mp.weixin.qq.com/s/RCJftzmhQ…

Network

We are looking at interface requests in this panel

We can control the Network speed in this panel, Network–>nothrotting.

CURL cURL cURL cURL cURL cURL cURL cURL cURL cURL cURL cURL cURL cURL To request an interface again without having to refresh a page, right click on the interface –>Replay XHR

Application

 

Storage The storage carried by the browser,

Local Storage Permanent Storage

Session Storage Session-level Storage

Web Sql Database, “local Database,” is a lightweight Database added with the HTML5 specification to run on the browser side. In HTML 5, greatly enriched the content of the client can be stored locally, add a lot of functionality to the original data must be stored on the server to save in local client, thus greatly improve the performance of Web applications, reduce the financial burden on the server side, back to the Web era “the client, the server for light” era.

IndexedDB is a database built into the new browsers of the HTML5 specification. For storing data in a browser, you can use cookies or local storage, but these are simpler techniques, and IndexedDB provides a database-like way to store and use data. Data stored in IndexedDB is permanent, not temporary like cookies.

Cookie: HTTPonly a security policy that disallows obtaining cookie values through document.cookie.

Samesite: Protects against CSRF attacks and user tracking, where a hacker makes a request from a fake user based on your logged in status

conclusion

Beyond the usual basics, browsers offer a lot more functionality to explore.

Refer to the literature

Leeon. Gitbooks. IO/devtools/co…

Juejin. Cn/post / 684490…

Developer.chrome.com/docs/devtoo…

Juejin. Cn/post / 684490…