小編精選 - 技術文章翻譯 · 09月28日

關於 Chrome DevTools 你可能不知道的事情

我幾乎每天都使用 Chrome 開發者工具，但有一些事情我希望早點知道

您可以透過右鍵單擊“元素”視圖中的元素並選擇“儲存為全域變數”，從控制台取得對任何已檢查元素的參考。

輕鬆取得任何已檢查元素的引用

您可以建立一個即時表達式，該表達式會不斷評估並固定在控制台頂部。這對於觀察您知道應該在頁面上更新的某些元素非常有用。

Chrome 中的即時表達

您可以直接從「網路」標籤模擬不同的網路速度。當程式碼需要幾秒鐘加載時，查看程式碼的反應非常有用。

測試不同的網速

我遇到過很多問題，結果證明根本不是錯誤，只是錯誤載入的快取程式碼。為了防止這種情況，您可以從網路選項卡關閉所有快取。（請注意，它只會在 DevTools 視窗開啟時停用快取）

保留日誌是另一個有用的功能，可在您瀏覽不同頁面時防止日誌/控制台輸出被清除。

禁用快取並保留日誌

Chrome devtools 有一個內建的螢幕截圖工具。若要使用它，請鍵入ctrl+shift+p （開發工具視窗開啟），然後鍵入「螢幕截圖」。

直接從開發者工具截圖

我們都使用 console.log 進行偵錯輸出，但您還有更多選擇：

控制台.警告，控制台.錯誤

console.warn列印不同顏色的訊息，您可以過濾日誌等級。

控制台警告，控制台錯誤

控制台表

如果您有資料的結構化列表， console.table將以漂亮的表格格式列印它。

控制台.表（資料）

還有其他幾個，例如console.assert 、 console.group ，你可以在這裡看到其餘的：

使用$_引用控制台中執行的上一個動作的回傳值。

您可以使用$從控制台快速選擇元素，無需使用 jquery。
類似地， $$是document.querySelectorAll的快捷方式

懸停狀態可能很難檢查，因為您必須將滑鼠移到元素上，但有一個簡單的方法：在「樣式」下，您可以強制使用元素樣式。

強制某些元素狀態

有沒有想過某個 css 規則到底是在哪裡定義的？這很容易找到，您只需在規則上按住 ctrl+單擊（在 Mac 上按住 cmd+單擊）即可。

Ctrl+點擊會將您帶到定義 css 規則的位置

您還有其他 DevTools 技巧嗎？請在評論中告訴我:)

2個讚 0留言 9瀏覽

按讚的人：

共有 0 則留言

登入之後發表留言

文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式

精選技術文章翻譯，幫助開發者持續吸收新知。