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