• This paper reference since: What ‘s New In DevTools (81) Chrome developers.google.com/web/updates…

  • Note: The new features are released in Chrome’s Canary and Beta channels. To get the first taste of the new features, please download the Canary or Beta versions of Chrome.

  • New feature 1: MOTOROLA G4 in mobile mode

    • As shown in figure

      ! [](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/1/30/16ff51782bd5fba4~tplv-t2oaga2asx-image.image )

    • tip

      • 1. Click the hidden menu icon in the upper right corner, and then click “Show Device Frame” to display the Frame of the selected model

      • 2. If you click “Capture Screenshot” from the hidden menu, you can also create a Screenshot of the device

        ! [](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/1/30/16ff51782779629b~tplv-t2oaga2asx-image.image )

  • New feature 2: Blocked Cookies (Cookies that have not been accepted or sent) are now supported in the Cookies pane under the Application pane.

    • In the figure below, the entry with a yellow background is blocked Cookie.

      ! [](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/1/30/16ff51782b7bd4e9~tplv-t2oaga2asx-image.image )

    • Note: Blocked Cookies have been supported in recent Chrome releases under Resource Viewing in the Network panel. For this, the reader can refer to the previous document below.

  • New feature 3: New Priority column in Cookie panel

    • In a recent release, Chrome Developer Tools added a SameSite column to the Cookie panel, but swapped it for the Priority column. Since the Priority column is also important, in this release, Chrome has added back the SameSite column while keeping it.

      ! [](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/1/30/16ff51782bcbec32~tplv-t2oaga2asx-image.image )

    • Pay attention to

      • 1. Here’s what you might need to know about the SameSite column: The SameSite column is related to the new Cookie security model that will soon be fully deployed. Here are the relevant documents:

        • SameSite cookies explained web. Dev/SameSite – co…
        • What do we need to prepare for the upcoming Cookie security model? mubu.com/doc/s0Ue9qC…

      • 2. The Priority column displays the Priority of cookies, which tells the browser the Priority of automatic clearing when the Cookie usage of the current domain reaches the upper limit. Cookies with lower priorities will be cleared first. — This information is specified in the set-cookie header when the server responds. Currently only Chrome supports this feature.

        ! [](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/1/30/16ff51782eff4f13~tplv-t2oaga2asx-image.image )
        • The Priority of the specification document (A Retention Priority Attribute for HTTP Cookies) tools.ietf.org/html/draft-…

  • New feature 4: All cells in the Cookie panel now support direct editing

    • As shown in figure

      ! [](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/1/30/16ff517837a86599~tplv-t2oaga2asx-image.image )

  • New feature 5: Resources in the Network panel automatically contain Cookie data when copied into fetch expressions in Node.js

    • steps

      ! [](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/1/30/16ff517865215125~tplv-t2oaga2asx-image.image )

  • New feature 6: Move the cursor over the CSS Content property value to see what escaped characters look like

    • Here is an example of this feature:

      ! [](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/1/30/16ff51786691a0a8~tplv-t2oaga2asx-image.image )

    • If the cursor moves over the value of the Content property, the original appearance is displayed through a small bubble, which looks like this in this example:

      ! [](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/1/30/16ff51786c2ca4d3~tplv-t2oaga2asx-image.image )

    • In this case the address: mathiasbynens. Making. IO/CSS – DBG – sto…

  • New feature 7: Source map-related errors will also be warned on the console

    • After this Chrome update, if the source map file fails to load or parse, the console will display the following message:

      ! [](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/1/30/16ff51786fb09903~tplv-t2oaga2asx-image.image )

  • New feature 8: Added Settings to disable scrolling out of bounds effects

    • In previous Chrome, if you opened a file under Sources and kept scrolling down, you could scroll down to the end of the file until the last line reached the top of the edit screen. If you don’t want to use this feature, Chrome has added a Preferences > Sources > Allow scrolling past end of file.

  • To issue the document

    • Chrome 80 Developer Tools new features mubu.com/doc/9icmoIG…
    • New Chrome 80 features to be updated….
    • Chrome update log directory mubu.com/doc/AObcWUR…