原文：What's New In DevTools (Chrome 73)
作者：Kayce Basques 發表時間：January 22, 2019
譯者：西樓聽雨 發表時間： 2019/01/24 (轉載請註明出處)
Logpoints (日誌點)
使用 Logpoints 來列印訊息到控制檯不會像使用 console.log() 那樣擾亂你的程式碼。
要新增一個 logpoint，步驟如下：
-
右擊你希望新增 Logpoint 的行號。
-
選擇 Add logpoint (新增日誌點)，彈出 Breakpoint Editor (斷點編輯器)。
-
在斷點編輯器中輸入你希望列印到控制檯的表示式。
提示：要列印一個變數時，可將變數名包裝在物件中（如
{TodoApp}）將其變數名和值同時列印在控制檯。檢視 Always Log Objects (無論何時都只列印物件) ，以及 Object Property Value Shorthand (物件的屬性/值簡寫語法) 來了解這項語法。 -
按Enter鍵或在斷點編輯器之外點選來儲存表示式。覆蓋在行號上的橙色標記表示的就是這個 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; }。可以得出，第一條和最後一條樣式集被使用到了，而中間那條沒有被用到。
分析頁面載入過程中有多少程式碼被用到並匯出這些資料，步驟如下：
-
按 Control+Shift+P （Mac 上為 Command+Shift+P）開啟命令選單：
-
輸入
coverage，選擇 Show Coverage (顯示程式碼覆蓋)，然後按“回車”鍵。
彈出 Coverage 標籤
-
點選 Reload
-
點選 Export
另外，程式碼覆蓋情況在 Puppeteer 中也可用。（Puppeteer 是一款由開發者工具團隊維護的瀏覽器自動化工具）
在控制檯用鍵盤來導航
現在可以使用鍵盤在控制檯進行導航了。下面是一個例子。
按 Shift+Tab 鍵，如果訊息中包含連結，最後一條連結會先被高亮。按“回車”鍵，將在新標籤中開啟這個連結；按 “向左” 鍵，將高亮整條訊息（見下面地三張圖）。
按“向上”鍵高亮另一條連結。
再次按“向上”鍵，高亮整條訊息。
按“向右”鍵，展開收縮起來的呼叫棧資訊（或者物件、陣列等等）。
按“向左”鍵，將展開的訊息收縮起來。
色彩選擇器中的 AAA 對比度曲線
現在，在色彩選擇器中，會顯示另一條線，以標示出符合 AAA 對比度推薦 的色彩。AA 線的話在 Chrome 65 時就已經有了。
處於這兩條線之間的顏色表示的是滿足 AA 推薦但不滿足 AAA 推薦顏色。當一個顏色滿足 AAA 推薦時，所有位於這個顏色同一側的顏色都滿足 AAA 推薦。例如，所有位於那條低位線之下的顏色都滿足 AAA，而其他位於高位線之上的顏色甚至都不滿足 AA 推薦。
提示：通常情況下，通過增加滿足 AAA 推薦的文字量可以提升你頁面的可讀性。如果出於某些原因無法做到滿足 AAA 推薦，那也至少要滿足 AA 推薦。
可參考色彩選擇器中的對比度曲線來了解如何使用這項特性。
儲存自定義地理位置複寫設定
在 Sensors (感測器) 標籤中，現在你可以將你的自定義地理位置複寫設定儲存起來。
-
按 Control+Shift+P (Mac 下按 Command+Shift+P) 開啟命令選單。
-
輸入
sensors，選擇 Show Sensors， 然後按“回車”，開啟 Sensors 標籤。
-
在 Geolocation （地理位置）中點選 Manage （管理），進入 Settings > Geolocations 介面。
-
點選 Add location (新增位置)
-
輸入位置名稱、緯度、經度，然後點選 Add。
程式碼摺疊
Sources 和 Network 皮膚，現在支援程式碼摺疊了。
要開啟程式碼摺疊，步驟如下：
- 按 F1 開啟 Settings。
- 在 Settings > Preferences > Sources 中開啟 Code folding。
要開啟程式碼塊摺疊，步驟如下：
- 將滑鼠游標懸停於程式碼塊開始位置所在的行號之上。
- 點選 Fold。
Messages 標籤
之前的 Frames 標籤已經改名為了 Messages。這個標籤只在 Network 皮膚檢視 web socket 連線時可用。
