Chrome開發者工具審查元素如何使用快捷鍵??

我們知道,Chrome瀏覽器中有許多實用的快捷鍵,而在開發者工具,即我們常說的“審查元素”功能中,也有很多快捷鍵,能幫大家提高效率。

Chrome開發者工具審查元素如何使用快捷鍵?

工具/原料

Chrome瀏覽器

方法/步驟

首先,開啟Chrome開發者工具,有個快捷鍵F12。

反覆按下F12可以切換狀態(開啟或關閉)。

當然,你也可以在原網頁,直接右擊“審查元素”

Chrome開發者工具審查元素如何使用快捷鍵?

或者按下快捷鍵組合:

Ctrl+Shift+I(進入開發者工具)

Ctrl+Shift+J (進入開發者工具,並定位到控制檯Console)

Ctrl+Shift+J (進入開發者工具,或者切換審查元素的狀態)

Chrome開發者工具審查元素如何使用快捷鍵?

同普通網頁一樣,我們可以通過,按下Ctrl,同時滾動滑鼠滾輪,

來對開發者工具頁面進行縮放。

也可以全部使用鍵盤快捷鍵來操作

Ctrl + 放大

Ctrl - 縮小

Ctrl 0 恢復預設大小

Chrome開發者工具審查元素如何使用快捷鍵?

下面來看看如何使用快捷鍵在Chrome開發者工具中搜索。

Ctrl+F (在當前面板搜尋)

Chrome開發者工具審查元素如何使用快捷鍵?

Ctrl+Shift+F (在所有面板搜尋文字,支援區分大小寫、正則表示式)

Chrome開發者工具審查元素如何使用快捷鍵?

Ctrl+O(搜尋檔名,包括網址)

Chrome開發者工具審查元素如何使用快捷鍵?

我們來小結一下剛剛介紹的快捷鍵。

Chrome開發者工具審查元素如何使用快捷鍵?

下面,我們重點介紹一下在控制檯Console中的實用快捷鍵。

Chrome開發者工具審查元素如何使用快捷鍵?

在控制檯中,輸入字元,可以得到Chrome的提示(列出函式名、物件名、變數名等)。

這時我們可以使用上下方向鍵(↑↓),來挑選。

Chrome開發者工具審查元素如何使用快捷鍵?

如果我們輸入JS程式碼時,需要換行,則可以按下快捷鍵Shift+Enter

Chrome開發者工具審查元素如何使用快捷鍵?

按下回車鍵Enter,可以得到程式碼執行結果

Chrome開發者工具審查元素如何使用快捷鍵?

按下Ctrl+L,可以清除控制檯,保持介面清爽。

當然你也可以直接點選清空控制檯的圖示。

Chrome開發者工具審查元素如何使用快捷鍵?

甚至也可以右擊控制檯,點選彈出選單中的Clear console

Chrome開發者工具審查元素如何使用快捷鍵?

在未輸入程式碼的情況下,如果我們使用上下方向鍵(↑↓),可以得到我們之前在控制檯中輸入的一些命令。這個就很像DOS命令列中的功能。

至此,我們來總結一下Chrome瀏覽器中Console控制檯中的常用快捷鍵。

Chrome開發者工具審查元素如何使用快捷鍵?

注意事項

按下快捷鍵Ctrl+Shift+J直接進入Chrome控制檯

使用某些快捷鍵時,需確保開發者工具已開啟且啟用。

工具, 開發者, 元素, 瀏覽器, 快捷鍵,
相關問題答案