大家好，在開發人員工具摘要的上一版中，我們來看看了強大的非同步呼叫堆疊和其他幾種工具。在這個版本中，我們會看到改良的網路面板篩選功能 (啟用自動完成功能)、具備 Shadow DOM 內容的編輯權限，以及 CodeMirror 4 更新等功能。
網路面板篩選
您現在可以依「網域」等特定欄位篩選資源。其中一個篩選器格式為：Domain:website.com。除了篩選之外，系統還會針對有效的篩選器值提供自動完成建議。系統會在您輸入查詢時即時更新該篩選器值。如要找出特定網域提供的所有資源，這項功能就非常實用。[crbubg.com/258421]
編輯 Shadow DOM 內容
開發人員工具一直致力在「Elements」面板中編輯一般 HTML，這些功能現已延伸至 Shadow DOM 的元素部分。[crbug.com/348991]
升級至 CodeMirror 4.0
CodeMirror 中，來源面板所用的 JavaScript 文字編輯器已升級至第 4 版。因此，新增了一些新功能。crbug.com/356878]
快速搜尋 CSS 資源
你現在可以在「樣式」面板的新搜尋框中搜尋屬性名稱、值或規則選取器。系統會在您輸入查詢時即時醒目顯示結果。[crbug.com/278852]
控制台訊息旁邊的時間戳記
快速連續記錄訊息時，查看記錄訊息的確切時間會有所幫助。您可以透過開發人員工具實驗來啟用這項功能。[crbug.com/131714]
堆積快照的記憶體統計資料明細
查看記錄的堆積快照時，請留意「彈性圓餅圖」。這張圖表會以不同顏色區分，方便您瞭解 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]
以上就是我們的說明，感謝閱讀！