開發者工具是前端開發者的日常利器，本文將分享一些跨瀏覽器開發者工具中鮮為人知的實用特性，幫助您更高效地進行調試。
為簡便起見，文中將使用“Chromium”指代所有基於Chromium的瀏覽器，如Chrome、Edge和Opera。它們的開發者工具在功能上高度一致。
面對層層嵌套的DOM節點，查找目標節點可能費時費力。使用Cmd F (macOS) 或 Ctrl F (Windows) 可快速搜索DOM樹。
支持CSS選擇器（例如<code>.red）和XPath表達式（例如<code>//div/h1）搜索。
在Chromium瀏覽器中，搜索時會自動跳轉到匹配的節點，這在處理長查詢或大型DOM樹時可能令人困擾。您可以通過前往設置 (F1) → 偏好設置 → 全局 → 搜索時輸入 → 禁用 來關閉此功能。
找到節點後，右鍵點擊節點，選擇“滾動到視圖”即可將其滾動到可視區域。
開發者工具提供多種方法從控制台直接訪問DOM節點：
例如，<code><code> 可訪問當前選擇的DOM節點。 Chromium瀏覽器更進一步，允許使用<code>、<code>、
等依次訪問歷史選擇中的節點。右鍵點擊節點，選擇複製 → 複製JS路徑<code>document.querySelector，即可複制節點路徑作為JavaScript表達式（
形式），方便在控制台中訪問。另一種方法是將節點存儲為臨時變量。右鍵點擊節點，選擇相應選項：
開發者工具可以通過在節點旁邊顯示標記來幫助可視化具有特定屬性的元素。標記是可點擊的，不同瀏覽器提供的標記種類也不同。
在Safari<code>display: grid中，元素面板工具欄中有一個標記按鈕，用於切換特定標記的可見性。例如，如果節點應用了<code>display: inline-grid或
CSS聲明，則會在其旁邊顯示網格標記。點擊標記將突出顯示頁面上的網格區域、軌道大小、行號等。Firefox
開發者工具當前支持的標記列在Firefox源文檔中。例如，滾動標記指示可滾動元素。點擊標記會突出顯示導致溢出的元素，並在其旁邊顯示溢出標記。在Chromium瀏覽器中，您可以右鍵點擊任何節點，然後選擇“標記設置…”，打開一個包含所有可用標記的容器。例如，具有<code>scroll-snap-type的元素在其旁邊會有一個滾動捕捉標記，點擊該標記將切換該元素上的滾動捕捉疊加層。
現在所有主流瀏覽器都支持從開發者工具中截圖，並且提供了新的全頁面截圖方式。
右鍵點擊要捕獲的DOM節點，選擇捕獲節點的選項（不同瀏覽器標籤不同）。
對html節點重複此操作即可進行全頁面截圖。需要注意的是，Safari會保留元素背景色的透明度，而Chromium和Firefox會將其捕獲為白色背景。
還可以進行“響應式”截圖，以特定視口寬度捕獲頁面。不同瀏覽器的操作方法如下：
Chrome允許您可視化和檢查頂層元素，例如對話框、警報或模態框。當元素添加到<code>#top-layer時，會在其旁邊顯示一個頂層標記，點擊該標記會跳轉到位於<code>
以上是一些跨瀏覽器DevTools您可能不知道的功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
