• What’s New In DevTools (Chrome 79)

  • Developers.google.com/web/updates…

  • New feature 1: Support to view the reason why the Cookie is not sent or received

    • As we all know, when the client sends a request, it will carry a Cookie matching the destination domain name. The server can also set cookies when it returns a ring, but these cookies are not necessarily sent or accepted by the client. Especially with the recent implementation of the new Cookie security model, which is about to be fully deployed (Chrome will be deployed in version 80), there will be a lot of this. With the release of Chrome, we can use developer tools to troubleshoot these problems. After recording the request in the Network panel, click on the resource you want to check, and then switch to the Cookies TAB as shown below:

      ! [](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/1/25/16fdad331d12e06b~tplv-t2oaga2asx-image.image )
      • Among them
        • 1. In the “Request Cookies” table, the entries with a yellow background are those Cookies that are not sent out. These entries are hidden by default and you need to check the “Show Filtered Request Cookies” option to show them.
        • 2. In the “Response Cookies” table, the entries with yellow background are those Cookies that are not accepted by the client.
        • 3. Move the cursor to the information icon to view the reason why the Cookie is not sent or accepted.
        • 4. Note that if neither table is sent or a Cookie is returned, neither table will appear.
      • A link to the
        • An article on the new Cookie security model
          • Changes to the default behavior without SameSite web.dev/samesite-co…
        • 1. What do we need to do to prepare for the upcoming Cookie security model? mubu.com/doc/s0Ue9qC…

  • New feature 2: Supports viewing the features of different ANa-color-sheme and ana-reduced motion states

    • These two items are media-Query conditions that represent the user’s current operating system color scheme (such as dark and light colors) and whether the user’s operating system currently has animated transitions enabled. After the release of Chrome, there were two new drop down options for both queries under the Show Rendering panel of the development tool. You can set this option to set both queries to see how they look in different states. The renderings are as follows:

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

  • New feature 3: Coverage small panel replaced the bar chart color matching, added by classification screening

    • Previous Coverage (code Coverage) small panel, Coverage strips figure to match color with visual disabilities, such as color blindness is not friendly for users, after the Chrome updates, strip chart color has been optimized, not taken the amount of code that USES the red bars, said amount of code is executed using the dark cyan said (below). In addition, the Coverage panel also added a filter criterion by type, support by Javascript, CSS filter, to facilitate viewing.

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

    • The Sources panel has also been updated (see figure below). If we click on the color bar in front of the code block, the developer tool will automatically open the Coverage panel and highlight the file you clicked on.

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

  • New feature 4: Added a small TAB to better see why network requests are initiated

    • In the past, this information can only be viewed in the Initiator column of the Network panel, because it is too long. In this version of Chrome, a small TAB is added for viewing this information, as shown in the following figure:

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

  • New feature 5: Fix code indenting bug

    • There has always been a setting for indentation in the developer tools, but this setting recently failed due to a bug and has been fixed in Chrome. For details on this bug, seecrbug.com/977394;
      • Path to the Settings: Settings > Preferences > Sources > Default Indentation

  • New feature 6: Added shortcuts to support cursor navigation

    • After the release of Chrome, you can Control + N to move the cursor to the next line in the Console and Source panels, and Control + P to move the cursor to the previous line.

  • To issue the document

    • Chrome 78 Developer Tools new features mubu.com/doc/vNGFvsM…
    • Chrome 78 new features to be updated….
    • Chrome update log directory mubu.com/doc/AObcWUR…