Chrome 79 開發者工具新特性

• 本文參考自：What's New In DevTools (Chrome 79)
  
• developers.google.com/web/updates…（需越牆）
• 新特性一：支持查看 Cookie 未被髮送或者接收的緣由
  • 咱們都知道，客戶端在發送請求時會攜帶與目的域名相匹配的 Cookie，服務端在返回響時也能夠設置 Cookie，但這些 Cookie 並不必定會被客戶端所發送或者接受，尤爲是在最近即將全面部署的新 Cookie 安全模型實施以後（Chrome 會在 80 版本中部署），這種狀況將會大量出現。本次 Chrome 發佈以後，咱們就能夠經過開發者工具排查這些狀況出現的緣由。方法是，在 Network 面板中錄製了請求記錄後，點擊你想要排查的資源，而後切換至 Cookies 標籤，以下圖：
    
    • 其中
      • 1. 在 「Request Cookies」 表中，黃色背景的條目就是那些沒有被髮送出去的 Cookie，上圖中沒有，是由於這些條目默認是隱藏的，須要勾選「show filtered request cookies」選項纔會展現出來。
      • 2. 在 「Response Cookies」表中，黃色背景的條目就是那些沒有被客戶端接受的 Cookie。
      • 3. 將光標移至信息圖標上，能夠查看該條 Cookie 沒有被髮送或接受的緣由。
      • 4. 注意，若是沒有發送一條，或者沒有返回一條 Cookie，這兩個表就不會出現。
    • 相關連接
      • 關於新 Cookie 安全模型的文章
        • 2. Changes to the default behavior without SameSite
          web.dev/samesite-co…
      • 1. [譯] 新 Cookie 安全模型即將到來，咱們須要作哪些準備？ (雙語)
        mubu.com/doc/s0Ue9qC…
• 新特性二：支持查看不一樣 prefers-color-sheme 和 prefers-reduced-motion 狀態下的樣式
  • 這兩項都是媒體查詢（media-query）條件，分別表明了用戶當前操做系統的配色模式（如暗色、亮色）和用戶操做系統當前是否啓用了動畫過渡效果。在本次 Chrome 發佈以後，在開發這工具的 Show Rendering小面板下針對這兩項查詢條件新增了兩個下啦選項，咱們能夠設置來這個選項，來設置這兩個查詢條件，以此查看不一樣狀態下的樣式。效果圖以下：
    
• 新特性三：Coverage 小面板更換了條狀圖配色，新增了按分類篩選
  • 之前的 Coverage（代碼覆蓋率）小面板中，覆蓋率條狀圖的配色對有視覺障礙（如色弱）的用戶來講並不友好，在本次 Chrome 更新後，條狀圖的配色作了優化，未被執行的代碼量採用了紅色條狀表示，被執行的代碼量採用了暗青色表示（以下圖）。除此以外，Coverage 面板還新增了一個按類型篩選的篩選條件，支持按 Javascript、CSS 篩選，以方便查看。
    
  • Sources 面板對此也作了更新（以下圖）。若是咱們點擊代碼塊前的色條，開發者工具會自動打開 Coverage 小面板，並高亮 你所點擊的文件。
    
• 新特性四：新增小標籤以便更好地查看網絡請求被髮起的緣由
  • 以往該項信息只能經過 Network 面板中的 initiator 列查看，由於該信息過於冗長，爲了便於查看，在本版本的 Chrome 中新增了一個專門用於查看該信息的小標籤，以下圖：
    
• 新特性五：修復代碼縮進失效的 bug
  • 一直以來，開發者工具中都有一個用來設置代碼縮進的設置項，但最近這個設置因爲存在一個 bug 無論用了，本次 Chrome 已經作了修復。關於這個 bug 的詳情，能夠查看crbug.com/977394；
    • 設置項的路徑：Settings > Preferences > Sources > Default Indentation
• 新特性六：新增快捷鍵以支持光標導航
  • 在本次 Chrome 發佈後，咱們在 Console 和 Source 面板下能夠經過 Control + N 將光標移動到下一行，經過 Control + P 移動到上一行。
• 往期文檔
  • Chrome 78 開發者工具新特性
    mubu.com/doc/vNGFvsM…
  • Chrome 78 新特性
    待更新....
  • Chrome 更新日誌目錄
    mubu.com/doc/AObcWUR…
• 其餘說明
  • 本文同時發佈與於
    • 幕布平臺：mubu.com/doc/uQDif8T…
    • 掘金平臺：juejin.im/post/5e2bbb…
  • 做者：西樓聽雨（微信名 t.t.）
    我就是21世紀最偉大的發明​​
  • 打賞：你的一枚硬幣，造就的卻多是下一代比爾·蓋茨
    
  • 聯繫 & 交流 & 聘用