Chrome 81 開發者工具新特性

• 本文參考自：What's New In DevTools (Chrome 81)
  developers.google.com/web/updates…（需越牆）​
• 編注：新特性都是先在 Chrome 的 Canary、Beta 通道中發佈的，要想第一時間體驗新特性，請下載 Canary 或 Beta 通道版本的 Chrome。

• 新特性一：移動端模式新增摩托羅拉 G4 機型
  • 如圖
    
  • 小提示
    • 1. 點擊右上角的隱藏菜單圖標，而後從彈出的隱藏菜單中點擊 「Show Device Frame」（展現設備外框），能夠把所選機型的外框展現出來
    • 2. 若是再從隱藏菜單中點擊 「Capture Screenshot」， 還能夠製做包括設備外框在內的截圖
      
• 新特性二：Application 面板下的 Cookies 面板中也開始支持高亮 blocked cookie（未被接受或未被髮送的 cookie）
  • 下圖中，黃色背景的條目即爲 blocked cookie。
    
  • 注意：在近期的 Chrome 版本中，已經在 Network 面板的資源查看下支持查看 blocked cookie。關於這點，讀者能夠從後文中的往期文檔中查閱。
• 新特性三：Cookie 面板中新增 Priority 列
  • 在近期版本中，Chrome 開發者工具爲 Cookie 面板新增了 SameSite 列，可是是用 Priority 列作交換的（即 Priority 列被取消了），因爲 Priority 列也具備其重要性，在此次版本中，在繼續保留 SameSite 列的同時 Chrome 又將其添加了回來。
    
  • 注意
    • 1. 關於 SameSite 列你可能須要知道的是：SameSite 列與即將全面部署的新 Cookie 安全模型相關。下面是相關的文檔：
      • SameSite cookies explained
        web.dev/samesite-co…
      • [譯] 新 Cookie 安全模型即將到來，咱們須要作哪些準備？ (雙語)
        mubu.com/doc/s0Ue9qC…
    • 2. Priority 列展現的是 Cookie 的 Priority （優先級），這項信息的做用是告訴瀏覽器在當前域名的 Cookie 佔用存儲達到上限時，瀏覽器作自動清理的優先級，優先級低的 Cookie 會先被清理掉。——這項信息是服務端作響應時，在 Set-Cookie 頭中指定的；目前只有 Chrome 支持這項功能。
      
      • Priority 的規範文檔（A Retention Priority Attribute for HTTP Cookies）
        tools.ietf.org/html/draft-…
• 新特性四：Cookie 面板中的全部單元格開始支持直接編輯
  • 如圖
    
• 新特性五：Network 面板中的資源在複製爲 Node.js 中的 fetch 表達式時會自動包含 Cookie 數據
  • 操做步驟
    
• 新特性六：光標移至 css content 屬性值上能夠查看轉義字符的本來外觀
  • 下圖爲該特性的一個例子：
    
  • 若是光標移至 content 屬性值上，將經過一個小氣泡展現原始外觀，本例中效果以下：
    
  • 本例的地址：mathiasbynens.github.io/css-dbg-sto…
• 新特性七：Source Map 相關的錯誤也會在控制檯輸出警告信息
  • 在本次 Chrome 更新後，若是 source map 文件出現加載、解析失敗的狀況，控制檯中將輸出下圖這樣的信息：
    
• 新特性八：新增設置項以支持禁用滾動越界效果
  • 在以前的 Chrome 中，若是你在 Sources 面板下打開了一個文件，並一直往下滾動，當滾動到文件末尾時，你仍是能夠繼續往下滾動的，直至最後一行滾動到了編輯界面中最上面一行。若是你不但願使用這項特性，此次 Chrome 爲此新增了一個設置項，其路徑爲：Preferences > Sources > Allow scrolling past end of file。
• 往期文檔
  • Chrome 80 開發者工具新特性
    mubu.com/doc/9icmoIG…
  • Chrome 80 新特性
    待更新....
  • Chrome 更新日誌目錄
    mubu.com/doc/AObcWUR…
• 其餘說明
  • 本文同時發佈與於
    • 幕布平臺：mubu.com/doc/akCcZx2…
    • 掘金平臺：juejin.im/post/5e3274…
  • 做者：西樓聽雨（微信名 t.t.）
    我就是21世紀最偉大的發明​​
  • 打賞：你的一枚硬幣，造就的卻多是下一代比爾·蓋茨
    
  • 聯繫 & 交流 & 聘用