As front-end engineers, we cannot do our daily work without Chrome, especially Chrome DevTools, which provides a lot of powerful and practical functions. Mastering these tools can save a lot of time and improve efficiency for our daily development and debugging work.

At present, there are many articles about chrome developer tools on the Internet, but most of them are just statements of functions, not combined with actual usage scenarios. As a result, after reading them, I don’t know what scenarios can be used in, and after a few days I forget.

This article tries to introduce some commonly used Chrome developer tools by combining practical development experience, hoping to help you.

Console

  • Invoke console in any panel

    • Ctrl + `
    • Usage scenario: Console is our most common panel, and we may need to use it to debug code under other panels. If you click on the Console panel directly to switch back and forth, it is not efficient. You can invoke console directly with the shortcut key and keep the panel you are currently viewing.

  • $1 $_ $0

    • $0: Refers to the last selected DOM node
    • The $1: Refers to the penultimate selected DOM node
    • The $_: refers to the value returned by the previous expression on console
    • Usage scenarios: In console, we may often have to try out some functionality and write some test code.$0 和 The $1Allows us to quickly select a DOM node and do something with the selected DOM.The $_This is useful when we do not assign the return value to a variable, but we need to refer to this value.

  • store as global variable

    • When you want to store values in variables (interface requests, return parameters, DOM nodes, debug variables) for use on the Console panel
    • When you print out library objects on the console, use store as global variable to call the library methods directly, such as moment, ANTD form, etc

  • copy()

    • Help you quickly copy some variables from the console

Elements

  • computed style

    • When a project gets complex, and styles on one node may be affected by code in multiple places, Computed Style is able to see which CSS styles really make it work

  • Break on

    • Break point when DOM state changes
    • Application scenario: In background projects, we often do some modifications based on antD components. For example, with Dropdown Menu, we want to customize the contents of the component Dropdown to meet our needs. At this time, if you directly use the check element to modify, you will find that once the mouse moved away after the drop down will be folded, resulting in debugging trouble. This is a good time to use the Break on function

  • Extract node style

    • 👉 copy 👉 copy styles

Network

  • Disabling network caching

    • When new content is published, the page will always display the old content (it is best to always check this when developing and debugging)
    • The Network 👉 Disable the cache

  • Network throttling (simulating weak network environment)

    • When developing a mobile application, check whether the application has a good loading speed in a weak network environment

  • Block url

    • Block requests for a URL (when you have to debug online, block requests for write operations, such as form submissions, etc.)

  • advanced filter

    • Finer filtering of network requests

  • is:from-cache

    • See which requests are cached

  • has-response-header:

    • Filters out interfaces that contain certain request headers

  • larger-than:

    • This section describes how to view oversized requests to analyze performance and optimize unpacking

  • method:

    • View only network requests (POST/GET) for certain methods

  • Too many to remember?

    • Enter the first letter in the filter box and the browser will automatically prompt you for these options

  • Header options

    • In the Network panel, right click to select the content to be displayed in the Network panel (cookie, cache-control)
    • You can display a custom header for the interface, such as the common X-TT-logid, so that you can quickly copy the logid of the interface in question to the backend students

Sources Panel

  • Conditional breakpoints

    • Use it when we hit a breakpoint somewhere but only want it to happen in certain circumstances
    • Usage scenario: When we debug React code at a break point, it’s common to encounter a state change that causes the page to fire Render multiple times, which keeps the breakpoint firing, and we only want breakpoints for certain conditions. The following example demonstrates how to break only if num has a value

  • Blackbox (Add Script to Ignore list)

    • * Skip tool library code (don’t display react, react-dom, etc.)

  • Pause on exception

    • Breakpoint when a throw error ❌ occurs
    • Usage scenario: When the code causes a blank screen due to some circumstances (interface data exception, undefined access, etc.), you can use this method to view the cause of the exception in the context where the exception occurs

  • Never Pause Here

    • When you hit a break point somewhere, but you don’t want to worry about what’s going on here for a while
    • With Pause on exception, if this is turned on, it will break at any point where there is a throw, but sometimes, as in older projects where there are a lot of errors but normal logic is not affected, we can use this method to ignore the break point

  • Code Folding

    • Cmd + shift + p 👉 Code Folding
    • When viewing the code online, you can fold up the function body

Other

  • Cmd + shift + p

    • When you press the three keys on any panel, a function list is displayed. You can quickly jump to certain panels and use certain functions

  • Show paint rectangles

    • Highlight which section of the page is being rendered

  • screenshot

    • Take a screenshot of a DOM node/full screen