大家好，在上一個版本的 DevTools Digest 中，我們介紹了強大的非同步呼叫堆疊和其他幾個功能。本期將改善網路面板篩選功能 (含自動完成功能)、使用 Shadow DOM 內容編輯功能、CodeMirror 4 更新等等。
網路面板篩選
您現在可以依「網域」等特定欄位篩選資源。例如以下篩選器格式：Domain:website.com。除了篩選功能，您還會看到有效篩選器值的自動完成建議，這些建議會在您輸入查詢時即時更新。當您需要尋找特定網域提供的所有資源時，這項功能就非常實用。[crbubg.com/258421]
編輯 Shadow DOM 內容
開發人員工具一向可在「元素」面板中編輯一般 HTML，現在這些功能已擴展至 Shadow DOM 的元素部分。[crbug.com/348991]
升級至 CodeMirror 4.0
以 JavaScript 為基礎的文字編輯器 CodeMirror 已升級至第 4 版，並用於「來源」面板。因此我們新增了許多新功能。crbug.com/356878]
快速搜尋 CSS 屬性
您現在可以透過「樣式」窗格的新搜尋框搜尋屬性名稱、值或規則選取器。當您輸入查詢時，系統會即時醒目顯示搜尋結果。[crbug.com/278852]
控制台訊息旁邊的時間戳記
快速連續記錄訊息時，查看訊息的確切記錄時間可能會很有幫助。您可以透過開發人員工具的實驗功能啟用這項功能。[crbug.com/131714]
堆積快照的記憶體統計資料細目
查看記錄的堆積區快照時，請留意 stastics 圓餅圖，這張圖表會以視覺化、以顏色編碼的方式概略說明 JavaScript 的哪個部分占用最多記憶體。目前為實驗功能，請啟用「堆積快照統計資料」來試用。[crbug.com/346335]
查看 console.log 的原始來源，而非包裝版本
您可能有 console.log 包裝函式，但很遺憾，在主控台中，您的所有訊息都是來自類似 util.js:46 的訊息。您現在可以透過開發人員工具解析原始位置。在「略過逐步執行含有特定名稱的來源」輸入方塊中，輸入用於將控制台記錄訊息納入計算的檔案，以便使用開發人員工具黑邊建立方塊，然後顯示記錄陳述式的真正來源。[crbug.com/231007]
新增幾個小功能，但功能強大
在動態新增或移除 JavaScript 事件監聽器後，在元素面板中重新整理「事件監聽器」窗格。[crbug.com/341044]
您可以使用
Ctrl+將焦點放在控制台輸入內容上，這在開發人員工具中可用於僅使用鍵盤的工作流程。[crbug.com/144943]針對值 (虛線、虛線、雙線、溝紋) 的邊框樣式自動完成建議，我們已更新為符合規格。[crbug.com/349998]
「還原預設設定並重新載入」按鈕 **已新增至「設定」面板，可反映切面說明。[crbug.com/135451]
固定在左側目前為實驗功能，你可以試試看是否適合你的工作流程。其他版面配置模式會固定到主視窗 (右側或底部)，並從獨立視窗取消固定。[crbug.com/134282]
除了一般點擊、滑鼠移動、按下滑鼠等事件外，現在也提供「wheel」做為事件監聽器中斷點。[crbug.com/347562]
以上就是本次說明的全部內容，感謝您的閱讀！