Chrome開發(fā)工具 快捷鍵

快捷鍵

DevTools 有許多內(nèi)置快捷鍵，開發(fā)人員可以在他們的日常工作中使用快捷鍵來節(jié)省時(shí)間，提高開發(fā)效率。下面列出的每個(gè)快捷方式和其在 Windows/Linux 和 Mac 相應(yīng)鍵位。一些快捷鍵可用在所有 DevTools，其它的只能用在指定單面板，或者被使用的時(shí)候是被打亂的。

打開 DevTools

要訪問 DevTools，在谷歌 Chrome 瀏覽器里的任何網(wǎng)頁或應(yīng)用程序，你可以使用這些選項(xiàng)之一：

• 打開 Chrome 菜單，在瀏覽器窗口的右上角，然后選擇工具 > 開發(fā)工具。
• 在任何頁面元素右鍵單擊并選擇檢查元素。

所有面板

Element 面板

右擊一個(gè)元素你可以：

• 改變?cè)貭顟B(tài)(:active,:hover,:focus,:visited)；
• 在元素上設(shè)置斷點(diǎn):(修改子元素，修改屬性，刪除節(jié)點(diǎn))
• 清空控制臺(tái)

側(cè)邊欄樣式

• 模擬元素的偽狀態(tài)（:active, :hover, :focus, :visited）
• 添加新的樣式選擇

Source 面板

不能暫停異常

暫停所有異常（包括那些被捕獲 try / catch 塊內(nèi)）

暫停未捕獲的異常（通常是你想要的那個(gè)）

代碼編輯器快捷鍵

TimeLine (時(shí)間軸)面板

Profiles 面板

Console(控制臺(tái))

控制臺(tái)右擊：

• XMLHttpRequest logging: 打開查看 XHR 日志
• Preserve log 在導(dǎo)航欄上
• Filter: 隱藏或顯示腳本文件的消息
• Clear console: 清除控制臺(tái)

截屏

調(diào)試

Console(控制臺(tái))

Chrome 的其他快捷鍵

這里有一些其他的 Chrome 快捷鍵，這些都瀏覽器通用的快捷鍵，并不是 DevTools 內(nèi)的特有的。查看適用于Windows，Mac 和 Linux的Chrome 的所有快捷鍵。