[譯] Chrome 73 開發者工具新特性

原文：What's New In DevTools (Chrome 73)
做者：Kayce Basques 發表時間：January 22, 2019
譯者：西樓聽雨 發表時間： 2019/01/24 (轉載請註明出處)

Logpoints (日誌點)

使用 Logpoints 來打印消息到控制檯不會像使用 console.log() 那樣擾亂你的代碼。

要添加一個 logpoint，步驟以下：

1. 右擊你但願添加 Logpoint 的行號。

   

2. 選擇 Add logpoint (添加日誌點)，彈出 Breakpoint Editor (斷點編輯器)。

   

3. 在斷點編輯器中輸入你但願打印到控制檯的表達式。

   

   提示：要打印一個變量時，可將變量名包裝在對象中（如 {TodoApp}）將其變量名和值同時打印在控制檯。查看 Always Log Objects (不管什麼時候都只打印對象) ，以及 Object Property Value Shorthand (對象的屬性/值簡寫語法) 來了解這項語法。

4. 按回車鍵或在斷點編輯器以外點擊來保存表達式。覆蓋在行號上的橙色標記表示的就是這個 Logpoint。

   

下次當執行到這一行時，開發者工具就會將 Logpoint 表達式的結果輸出到控制檯來。

Inspect 模式下的樣式屬性

在 Inspecting (審視/檢查/檢視。不一樣瀏覽器叫法不同——譯註) 一個元素節點時，開發者工具將展現出一個包含了常見的比較重要的樣式屬性，如 font、margin、padding。

導出代碼覆蓋報告數據

Code coverage (代碼覆蓋報告) 數據如今能夠導出成 JSON 文件了。導出的 JSON 文件相似這樣：

[
  {
    "url": "https://wndt73.glitch.me/style.css",
    "ranges": [
      {
        "start": 0,
        "end": 21
      },
      {
        "start": 45,
        "end": 67
      }
    ],
    "text": "body { margin: 1em; } figure { padding: 0; } h1 { color: #317EFB; }"
  },
  ...
]
複製代碼

url 指的是開發者工具所分析的這個 CSS 或 JavaScript 文件的 URL；ranges 描述的是該文件被使用到的各個部分；start 指的是某個 range (範圍，即被使用到的部分——譯註) 的開始位置；end 指的是結束位置。text 則是這個文件的所有內容。

在上面這個例子中，範圍 0~21 對應到 body { margin: 1em; }，範圍 45~67 對應到 h1 { color: #317EFB; }。能夠得出，第一條和最後一條樣式集被使用到了，而中間那條沒有被用到。

分析頁面加載過程當中有多少代碼被用到並導出這些數據，步驟以下：

1. 按 Control+Shift+P （Mac 上爲 Command+Shift+P）打開命令菜單：

   

2. 輸入 coverage，選擇 Show Coverage (顯示代碼覆蓋)，而後按「回車」鍵。

   

   彈出 Coverage 標籤

   

3. 點擊 Reload

   ：開發者工具將開始重載這個頁面並錄製到手的代碼與使用到的代碼的對比狀況。

4. 點擊 Export

   將獲得的數據導出成 JSON 文件。

另外，代碼覆蓋狀況在 Puppeteer 中也可用。（Puppeteer 是一款由開發者工具團隊維護的瀏覽器自動化工具）

在控制檯用鍵盤來導航

如今能夠使用鍵盤在控制檯進行導航了。下面是一個例子。

按 Shift+Tab 鍵，若是消息中包含連接，最後一條連接會先被高亮。按「回車」鍵，將在新標籤中打開這個連接；按 「向左」 鍵，將高亮整條消息（見下面地三張圖）。

按「向上」鍵高亮另外一條連接。

再次按「向上」鍵，高亮整條消息。

按「向右」鍵，展開收縮起來的調用棧信息（或者對象、數組等等）。

按「向左」鍵，將展開的消息收縮起來。

色彩選擇器中的 AAA 對比度曲線

如今，在色彩選擇器中，會顯示另外一條線，以標示出符合 AAA 對比度推薦 的色彩。AA 線的話在 Chrome 65 時就已經有了。

處於這兩條線之間的顏色表示的是知足 AA 推薦但不知足 AAA 推薦顏色。當一個顏色知足 AAA 推薦時，全部位於這個顏色同一側的顏色都知足 AAA 推薦。例如，全部位於那條低位線之下的顏色都知足 AAA，而其餘位於高位線之上的顏色甚至都不知足 AA 推薦。

提示：一般狀況下，經過增長知足 AAA 推薦的文本量能夠提高你頁面的可讀性。若是出於某些緣由沒法作到知足 AAA 推薦，那也至少要知足 AA 推薦。

可參考色彩選擇器中的對比度曲線來了解如何使用這項特性。

保存自定義地理位置複寫設置

在 Sensors (傳感器) 標籤中，如今你能夠將你的自定義地理位置複寫設置保存起來。

1. 按 Control+Shift+P (Mac 下按 Command+Shift+P) 打開命令菜單。

   

2. 輸入 sensors ，選擇 Show Sensors， 而後按「回車」，打開 Sensors 標籤。

   

3. 在 Geolocation （地理位置）中點擊 Manage （管理），進入 Settings > Geolocations 界面。

   

4. 點擊 Add location (添加位置)

5. 輸入位置名稱、緯度、經度，而後點擊 Add。

   

代碼摺疊

Sources 和 Network 面板，如今支持代碼摺疊了。

要開啓代碼摺疊，步驟以下：

1. 按 F1 打開 Settings。
2. 在 Settings > Preferences > Sources 中開啓 Code folding。

要開啓代碼塊摺疊，步驟以下：

1. 將鼠標光標懸停於代碼塊開始位置所在的行號之上。
2. 點擊 Fold。

Messages 標籤

以前的 Frames 標籤已經更名爲了 Messages。這個標籤只在 Network 面板檢視 web socket 鏈接時可用。