Introduction to the

Chrome’s desktop-level browser, which accounts for about 70% of the market, is a must-learn tool for every front-end developer.

The main functions are as follows

  1. Observe/change the DOM
  2. Look at/change the page style
  3. Debugging JS
  4. View logs/run scripts on the console
  5. Conduct web page performance evaluation
  6. Monitoring network activity

.

When we press the F12 key on the keyboard, we can see that there are some common debugging tools in the debugger by default.

  -Elements Panel  -Console Console panel  -Network Network panel  -Sources Source Panel  -Performance Performance Panel  -Memory Panel  -Application Panel  -Security Security Panel  -Lighthouse Performance evaluation toolCopy the code

Let’s take a look at the features and usage of developer tools in the common functions pane

Elements

The Elements panel, as shown below, is divided into the HTML code section on the left and the CSS code section on the right.

On the left, we can clearly see the DOM structure of the HTML code. When we select a node, right-click to display the function pane.

The main functions are as follows:

  • View/change the DOM

  • View/Change the CSS

  • Check/adjust the page

console

Console The console panel is divided into three parts

  • Top toolbar
  • Log Type on the left
  • The log display/run area on the right

  • Close/expand the sidebar

  • Clear the log

  • Create scripts that run in real time

  • Displays logs by log type

  • Run the script

Sources

Source code panel, the main function to view the source code of the web page, including JS/CSS/HTML/images and JS breakpoint debugging.

This section introduces the JS breakpoint debugging panel

  • Continue: Continue code execution until another breakpoint is hit

  • Step_over: As a normal step, you should execute the relevant code line by line in order to explore in depth what code affects the variable being updated. If you call another function in your code, clicking this button will not enter that function, but will skip over it, focusing on the current function.

  • Step_into: Enters the called function and the debugger executes it on the first line in the function definition.

  • Step_out: After you have entered a function, clicking this button causes the rest of the function definition to run, which the debugger will execute to the parent function.

  • Step: Indicates the next step.

  • Disable-breakpoints: buttons that enable or disable breakpoints.

  • Pause-gray: generates a breakpoint on an exception.

Network

The toolbar

The corresponding functions of each button are in order from left to right:

  • Stop/Enable network listening
  • Clear current network logs
  • Filter switch, keyword filter
  • Log reservation is used to reserve request logs before cross-domain page hopping
  • Cache switch: Disables caching of static resources
  • Network Settings, can simulate WiFi, 4G, 3G, 2G network environment
  • Upload network logs. You can upload other people’s network log files to view
  • Download network logs and save the current observed network conditions as files

Network Resource Types

  • XHR interface request
  • JS JS file
  • CSS CSS file
  • Img Image Resources
  • Media resources, usually music videos
  • Font Indicates a custom Font
  • DOC document file, relatively rare
  • WS websocket
  • The Manifest the Manifest file
  • Other Other resources

Sequence diagram

At the top is the time, the solid green line represents the network request, the longer the length, the longer the network request interval.

Specific network request

On the left is a list of network requests, and clicking on it displays information about specific requests on the right.

  • Headers: Network request information, including complete URL information, HTTP request header, response header, request parameters, request mode, etc
  • Preview Previews interface responses
  • Response The interface responds, except that it is not formatted by the browser. It’s essentially the same thing
  • Initiator to explain the initiation process of a request
  • Timing Request Time

Load the overview

To explain what this graph means, the network log was detected

  • 101 requests
  • The network request transferred 221KB
  • There are 1.5MB of resources, including JS, CSS, HTML, etc
  • Take 1.61 S
  • DOMContentLoaded refers to the DOMContentLoaded event that is fired after the HTML document has been fully loaded and parsed, without waiting for the stylesheet, image, and subframe to complete loading.
  • Load is only used to detect a fully loaded page. The Load event is triggered only after the HTML, CSS, JS, and images of the page are loaded.

performance

Webpage performance detection tool, you can use to check the FPS and CPU of the webpage, according to the FPS and CPU anomalies, to determine which aspect of the network is the problem, animation stuck, or DOM creation too frequently, memory leakage and so on.

How do I start the performance check tool

The toolbar

From left to right functions are

  • Enable/stop recording
  • The refresh
  • Clear record
  • Upload performance check files
  • Download the observations and save them as a file
  • Screenshots enable Screenshots
  • Memory Enables or disables Memory observation

thumbnails

On the right, there are three metrics: FPS, CPU, NET, page frame rate, page CPU usage, and network requests.

  • When the FPS is too large, a long red bar will appear, indicating a long frame.
  • CPU bar
    • Yellow: Memory occupied by JS operations (JS code evaluation and function calls)
    • Blue: Memory occupied by HTML operations (mainly HTML compilation)
    • Purple: memory occupied by CSS operations (CSS style calculations, etc.)
    • Gray: memory occupied by other operations

Details figure

  • Network Network request, not much different from the sequence diagram used in the Network panel
  • Frames A screenshot of the page at each point in time
  • Interactions animation, which is primarily used to view page motion
  • Main JS Main thread, this is a common tool, here you can observe the whole cycle of JS functions and methods, call stack

I’m going to focus on the main flame diagram

  • From the top down, the task at the top is the total set of tasks at the next level
  • Functions are executed from left to right
  • The more layers, the more call stacks

An overview of figure

  • Summary An overview of the monitoring period
    • Loading time
    • Scripting JS execution time
    • Rendering time
    • Painting time
  • Bottom Up the list of events

When we select a function in the main flame diagram, we can see the execution stack of the task, where does it start and end, and how long each step takes

  • Call Tree function Call stack

Similar to bottom-up, the function stack is automatically displayed when a function is selected in main

Memory

Memory detection tool

  • Heap snapshot – Used to print a Heap snapshot. The Heap snapshot file displays the memory allocation between the javascript object of the page and the associated DOM node
  • Allocation instrumentation on timeline – Records memory information on the timeline. Records memory information as time changes
  • Allocation sampling – Memory sampling. Memory Allocation is recorded using the sampling method. This profile type has minimal performance overhead and can be used for long-running operations. It provides a good approximation of the allocation of values subdivided by the javascript execution stack.

Application

Used to view/modify/delete the local cache, including

  • localstorage
  • cookies
  • session Storage

There are

  • IndexDB local database that allows storing large amounts of data (enhanced LS)
  • WebSQL local database, supported only by Chrome

Security

Used to view SSL certificates

Take the home page of Baidu as an example. On the left is the source of the website and on the right is the certificate information of the website

Lighthouse

Page performance scoring tool

Relatively simple, click directly to use, will generate a page evaluation report