DevTools 有許多內(nèi)置快捷鍵，開(kāi)發(fā)人員可以在他們的日常工作中使用快捷鍵來(lái)節(jié)省時(shí)間，提高開(kāi)發(fā)效率。下面列出的每個(gè)快捷方式和其在 Windows/Linux 和 Mac 相應(yīng)鍵位。一些快捷鍵可用在所有 DevTools，其它的只能用在指定單面板，或者被使用的時(shí)候是被打亂的。
打開(kāi) DevTools
要訪問(wèn) DevTools，在谷歌 Chrome 瀏覽器里的任何網(wǎng)頁(yè)或應(yīng)用程序，你可以使用這些選項(xiàng)之一：
- 打開(kāi) Chrome 菜單http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_chrome-menu.png" alt="chrome-menu.png" />，在瀏覽器窗口的右上角，然后選擇工具 > 開(kāi)發(fā)工具。
- 在任何頁(yè)面元素右鍵單擊并選擇檢查元素。
| Windows |
Linux |
Mac |
| 打開(kāi)開(kāi)發(fā)者工具 |
F12, Ctrl + Shift + I |
Cmd + Opt + I |
| 切換審查元素模式與瀏覽器窗口模式 |
Ctrl + Shift + C |
Cmd + Shift + C |
| 打開(kāi) DevTools 將面板放到控制臺(tái) |
Ctrl + Shift + J |
Cmd + Opt + J |
| 檢查（取消?？康谝粋€(gè)，然后按） |
Ctrl + Shift + I |
Cmd + Opt + I |
所有面板
| Windows |
Linux |
Mac |
| 顯示設(shè)置對(duì)話框 |
?, F1 |
? |
| 下一個(gè)面板 |
Ctrl + ] |
Cmd + ] |
| 前一個(gè)面板 |
Ctrl + [ |
Cmd + [ |
| 最后一個(gè)面板 |
Ctrl + Alt + [ |
Cmd + Opt+ [ |
| 第一個(gè)面板 |
Ctrl + Alt + ] |
Cmd + Opt+ ] |
| 更改?？课恢?/td>
| Ctrl + Shift + D |
Cmd+ Shift + D |
| 打開(kāi)設(shè)備(Device)模式 |
Ctrl + Shift + M |
Cmd + Shift + M |
| 切換控制臺(tái)/關(guān)閉設(shè)置對(duì)話框 |
Esc |
Esc |
| 刷新頁(yè)面 |
F5, Ctrl + R |
Cmd + R |
| 忽略緩存內(nèi)容刷新頁(yè)面 |
Ctrl + F5, Ctrl + Shift + R |
Cmd + Shift + R |
| 在選中文件或者面板中進(jìn)行文字搜索 |
Ctrl + F |
Cmd +F |
| 在所有源中進(jìn)行文字搜索 |
Ctrl +Shift + F |
Cmd + Opt + F |
| 根據(jù)文件名搜索（除了時(shí)間軸面板Timeline |
Ctrl + O , Ctrl + O |
Cmd + O , Cmd + O |
| 放大（當(dāng)DevTools獲得焦點(diǎn)時(shí)） |
Ctrl + + |
Shift + + |
| 縮小 |
Ctrl + - |
Shift + - |
| 恢復(fù)默認(rèn)文字大小 |
Ctrl + 0 |
Shift + 0 |
Element 面板
| Windows |
Linux |
Mac |
| 撤銷更改 |
Ctrl + Z |
Cmd +Z |
| 重做更改 |
Ctrl + Y |
Cmd + Y , Cmd + Shift + Z |
| 導(dǎo)航 |
Up, Down |
Up , Down |
| 展開(kāi)/折疊節(jié)點(diǎn) |
Right , Left |
Right , Left |
| 展開(kāi)節(jié)點(diǎn) |
Single-click on arrow |
Single-click on arrow |
| 展開(kāi)/折疊節(jié)點(diǎn)及其所有子集 |
Ctrl + Alt + Click on arrow icon |
Opt + Click on arrow icon |
| 編輯屬性 |
Enter , Double-click on attribute |
Enter , Double-click on attribute |
| 隱藏元素 |
H |
H |
| 切換編輯為HTML |
F2 |
|
右擊一個(gè)元素你可以：
- 改變?cè)貭顟B(tài)(:active,:hover,:focus,:visited)；
- 在元素上設(shè)置斷點(diǎn):(修改子元素，修改屬性，刪除節(jié)點(diǎn))
- 清空控制臺(tái)
側(cè)邊欄樣式
| Windows |
Linux |
Mac |
| 打開(kāi)直尺 |
單擊 |
單擊 |
| 插入新的屬性 |
在空白空間單擊 |
在空白空間單擊 |
| 轉(zhuǎn)至樣式規(guī)則屬性聲明中源行 |
Ctrl + 點(diǎn)擊屬性 |
Cmd + 點(diǎn)擊屬性 |
| 轉(zhuǎn)制屬性值聲明源行 |
Ctrl + 點(diǎn)擊屬性值 |
Cmd + 點(diǎn)擊屬性值 |
| 獲取顏色定義值 |
Shift + 點(diǎn)擊拾色器對(duì)話框 |
Shift + 點(diǎn)擊拾色器對(duì)話框 |
| 編輯前一個(gè)/后一個(gè) |
Tab ,Shift + Tab |
Tab ,Shift + Tab |
| 增加/減小值 |
Up , Down |
Up , Down |
| 以間隔 10 增加/減小值 |
Shift + Up , Shift + Down |
Shift +Up , Shift + Down |
| 以間隔 10 增加/減小值 |
PgUp , PgDown |
PgUp , PgDown |
| 以間隔 100 增加/減小值 |
Shift + PgUp , Shift + PgDown |
Shift + PgUp , Shift + PgDown |
| 以間隔 0.1 增加/減小值 |
Alt + Up , Alt + Down |
Opt + Up , Opt + Down |
- 模擬元素的偽狀態(tài)（:active, :hover, :focus, :visited）
- 添加新的樣式選擇
Source 面板
| Windows |
Linux |
Mac |
| 暫停/恢復(fù)腳本執(zhí)行 |
F8 , Ctrl + \ |
F8 , Cmd + \ |
| 跳過(guò)下一個(gè)函數(shù)的調(diào)用 |
F10 , Ctrl +' |
F10 , Cmd + ' |
| 進(jìn)入下一個(gè)函數(shù)的調(diào)用 |
F11 , Ctrl +; |
F11 , Cmd + ; |
| 跳出當(dāng)前函數(shù) |
Shift + F11 , Ctrl + Shift + ; |
Shift + F11 ,Cmd + Shift + ; |
| 選擇下一個(gè)調(diào)用框架 |
Ctrl + . |
Opt + . |
| 選擇之前的調(diào)用框架 |
Ctrl + , |
Opt + , |
| 切換斷點(diǎn)條件 |
點(diǎn)擊行號(hào) , Ctrl +B |
點(diǎn)擊行號(hào) , Cmd + B |
| 編輯斷點(diǎn)條件 |
右擊行號(hào) |
擊行號(hào) |
| 刪除單組單詞 |
Alt + Delete |
Opt + Delete |
| 注釋一行或注釋選定文本 |
trl + / |
Cmd + / |
| 保存本地修改 |
Ctrl + S |
Cmd + S |
| 跳轉(zhuǎn)到行 |
Ctrl +G |
Ctrl + G |
| 以文件名搜索 |
Ctrl +O |
Cmd + O |
| 跳轉(zhuǎn)至行號(hào) |
Ctrl +P + 行號(hào) |
Cmd + P + 行號(hào) |
| 跳轉(zhuǎn)至列 |
Ctrl + O + 數(shù)字 + 數(shù)字 |
Cmd + O +數(shù)字 + 數(shù)字 |
| 進(jìn)入成員 |
Ctrl + Shift + O |
Cmd + Shift +O |
| 關(guān)閉活動(dòng)的標(biāo)簽 |
Alt + W |
Opt + W |
| 運(yùn)行代碼片段 |
Ctrl + Enter |
Cmd + Enter |
http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_pause-gray.png" alt="pause-gray.png" /> 不能暫停異常
http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_pause-blue.png" alt="pause-blue.png" /> 暫停所有異常（包括那些被捕獲 try / catch 塊內(nèi)）
http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_pause-purple.png" alt="pause-purple.png" /> 暫停未捕獲的異常（通常是你想要的那個(gè)）
代碼編輯器快捷鍵
| Windows |
Linux |
Mac |
| 匹配括號(hào) |
Ctrl +M |
|
| 跳轉(zhuǎn)至某行 |
Ctrl + P + 行號(hào) |
Cmd + P + 行號(hào) |
| 跳轉(zhuǎn)至某列 |
Ctrl +O + 數(shù)字 + 數(shù)字 |
Cmd + O + 數(shù)字 + 數(shù)字 |
| 修改為注釋 |
Ctrl + / |
Cmd + / |
| 找到下一次出現(xiàn)的地方 |
Ctrl + D |
Cmd + D |
| 撤銷最后的選擇 |
Ctrl + U |
Cmd + U |
TimeLine (時(shí)間軸)面板
| Windows |
Linux |
Mac |
| 開(kāi)始/停止記錄 |
Ctrl +E |
Cmd + E |
| 保存時(shí)間線數(shù)據(jù) |
Ctrl +S |
Cmd + S |
| 載入時(shí)間線數(shù)據(jù) |
Ctrl +O |
Cmd + O |
Profiles 面板
| Windows |
Linux |
Mac |
| 開(kāi)始/停止記錄 |
Ctrl + E |
Cmd + E |
Console(控制臺(tái))
| Windows |
Linux |
Mac |
| 接受提示命令 |
鍵盤右 |
鍵盤右 |
| 前一條命令行 |
鍵盤上 |
鍵盤上 |
| 下一條命令行 |
鍵盤下 |
鍵盤下 |
| 聚焦控制臺(tái) |
Ctrl +</kbd> | <kbd> Ctrl</kbd> +<kbd> |
| 清除控制臺(tái) |
Ctrl + L |
Cmd + K , Opt + L |
| 多行輸入 |
Shift + Enter |
Ctrl +Return |
| 執(zhí)行 |
Enter |
Return |
控制臺(tái)右擊：
- XMLHttpRequest logging: 打開(kāi)查看 XHR 日志
- Preserve log 在導(dǎo)航欄上
- Filter: 隱藏或顯示腳本文件的消息
- Clear console: 清除控制臺(tái)
截屏
| Windows |
Linux |
Mac |
| 放大縮小 |
Alt + Scroll ,Ctrl +Click and drag with two fingers |
Opt + Scroll ,Cmd + Click and drag with two fingers |
| 檢查元素的工具 |
Ctrl + Shift + C |
Cmd + Shift + C |
調(diào)試
Console(控制臺(tái))
| Windows |
Linux |
Mac |
| 放大縮小 |
Shift + Scroll |
Shift + Scroll |
Chrome 的其他快捷鍵
這里有一些其他的 Chrome 快捷鍵，這些都瀏覽器通用的快捷鍵，并不是 DevTools 內(nèi)的特有的。查看適用于Windows，Mac 和 Linux的Chrome 的所有快捷鍵。
| Windows |
Linux |
Mac |
| 查找下一個(gè) |
Ctrl + G |
Cmd + G |
| 查找前一個(gè) |
Ctrl + Shift + G |
Cmd + Shift + G |
| 隱身模式打開(kāi)新窗口 |
Ctrl +Shift + N |
Cmd + Shift + N |
| 切換書簽欄開(kāi)關(guān) |
Ctrl + Shift + B |
Cmd +Shift + B |
| 查看歷史頁(yè) |
Ctrl +H |
Cmd + Y |
| 查看下載頁(yè) |
Ctrl + J |
Cmd +Shift + J |
| 查看任務(wù)管理器 |
Shift + ESC |
Shift + ESC |
| 歷史記錄選項(xiàng)卡的下一頁(yè) |
Alt + Right |
Opt + Right |
| 歷史記錄選項(xiàng)卡的前一頁(yè) |
Backspace , Alt + Left |
Backspace , Opt + Left |
| 選中地址欄內(nèi)容 |
F6 , Ctrl + L ,Alt + D |
Cmd + L , Opt +D |
| 在地址欄添加一個(gè) ？ 號(hào)來(lái)執(zhí)行用默認(rèn)搜索引擎的關(guān)鍵字搜索 |
Ctrl + K , Ctrl + E |
Cmd + K , Cmd + E |
