常用
文件內搜索 ctrl+f
使用快捷鍵 ctrl+shift+f， 就會進入到全局搜索模式
打開文件：ctrl+o
打開DevTools
你可以通過以下任何一種方式來訪問DevTools：
- 打開瀏覽器右上角的Chrome菜單 ，然后選擇“更多工具”–“開發者工具”。
- 在頁面任何元素處點擊右鍵，然后選擇“審查元素”。
| Windows / Linux | Mac | |
|---|---|---|
| 打開開發者工具 | F12 , Ctrl + Shift + I | Cmd + Opt + I |
| 切換審查元素模式與瀏覽器窗口模式 | Ctrl + Shift + C | Cmd + Shift+ C |
| 打開開發者工具並定位到控制台 | Ctrl + Shift + J | Cmd + Opt + J |
| Inspect the Inspector (undock first one and press) | Ctrl + Shift + I | Cmd + Opt + I |
所有面板
| Windows / Linux | Mac | |
|---|---|---|
| 顯示設置對話框 | ? , F1 | ? |
| 下一個面板 | Ctrl + ] | Cmd + ] |
| 上一個面板 | Ctrl + [ | Cmd + [ |
| 最后一個面板 | Ctrl + Alt + [ | Cmd + Opt + [ |
| 第一個面板 | Ctrl + Alt + ] | Cmd + Opt + ] |
| 更改停靠位置(測試發現與添加書簽沖突) | 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 |
Elements面板
| Windows / Linux | Mac | |
|---|---|---|
| 撤銷更改 | Ctrl + Z | Cmd + Z |
| 重做 | Ctrl + Y | Cmd + Y , Cmd + Shift + Z |
| 導航 | Up , Down | Up , Down |
| 展開/折疊節點 | Right , Left | Right , Left |
| 展開節點 | Single-click on arrow | Single-click on arrow |
| 展開/折疊節點及其子元素 | 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 |
右鍵點擊元素你可以：
- 更改元素狀態(
:active,:hover,:focus,:visited)； - 元素上設置斷點(更改子元素、更改屬性及刪除節點)；
- 清空控制台
樣式側邊欄(Style Sidebar)
| Windows / Linux | Mac | |
|---|---|---|
| 編輯規則 | Single-click | Single-click |
| 插入新屬性 | Single-click on whitespace | Single-click on whitespace |
| 定位到樣式屬性定義處 | Ctrl + Click on property | Cmd + Click on property |
| 定位到屬性值定義處 | Ctrl + Click on property value | Cmd + Click on property value |
| 循環顏色值(rgba,hsl等) | Shift + Click on color picker box | Shift + Click on color picker box |
| 編輯上/下一個屬性 | 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 |
模仿元素偽狀態(:active, :hover, :focus, :visited)
添加新的樣式選擇器
Sources 面板
| Windows / Linux | Mac | |
|---|---|---|
| 暫停/恢復腳本運行 | F8, Ctrl + \ | F8, Cmd + \ |
| Step over next function call | F10, Ctrl + ' | F10, Cmd + ' |
| Step into next function call | F11, Ctrl + ; | F11, Cmd + ; |
| Step out of current function | Shift + F11, Ctrl + Shift + ; | Shift + F11, Cmd + Shift + ; |
| Select next call frame | Ctrl + . | Opt + . |
| Select previous call frame | Ctrl + , | Opt + , |
| Toggle breakpoint condition | Click on line number, Ctrl+ B | Click on line number, Cmd + B |
| Edit breakpoint condition | Right-click on line number | Right-click on line number |
| Delete individual words | Alt + Delete | Opt + Delete |
| Comment a line or selected text | Ctrl + / | Cmd + / |
| Save changes to local modifications | Ctrl + S | Cmd + S |
| Save all changes | Ctrl + Alt + S | Cmd + Opt + S |
| Go to line | Ctrl + G | Ctrl + G |
| Search by filename | Ctrl + O | Cmd + O |
| Jump to line number | Ctrl + P + :<number> | Cmd + P + :<number> |
| Jump to column | Ctrl + O + :<number> + :<number> | Cmd + O + :<number> + :<number> |
| Go to member | Ctrl + Shift + O | Cmd + Shift + O |
| Close active tab | Alt + W | Opt + W |
| Run snippet | Ctrl + Enter | Cmd + Enter |
Don’t pause on exceptions
Pause on All exceptions (including those caught within try/catch blocks)
Pause on uncaught exceptions (usually the one you want)
代碼編輯快捷鍵
| Windows / Linux | Mac | |
|---|---|---|
| 跳轉到匹配位置 | Ctrl + M | |
| 跳轉到指定行 | Ctrl + P + :<number> | Cmd + P + :<number> |
| 跳轉到指定列 | Ctrl + O + :<number> + :<number> | Cmd + O + :<number> + :<number> |
| 切換注釋 | Ctrl + / | Cmd + / |
| 選擇下一個出現位置 | Ctrl + D | Cmd + D |
| 撤銷上一次操作 | Ctrl + U | Cmd + U |
TimeLine 面板
| Windows / Linux | Mac | |
|---|---|---|
| 啟動/停止記錄 | Ctrl + E | Cmd + E |
| 保存timeline數據 | Ctrl + S | Cmd + S |
| 加載timeline數據 | Ctrl + O | Cmd + O |
Profiles 面板
| Windows / Linux | Mac | |
|---|---|---|
| 啟動/停止記錄 | Ctrl + E | Cmd + E |
Console 控制台
| Windows / Linux | Mac | |
|---|---|---|
| Accept suggestion | Right | Right |
| 上一個命令/行 | Up | Up |
| 下一條命令/行 | Down | Down |
| 控制台獲取焦點 | Ctrl + ` | Ctrl + ` |
| 清空控制台 | Ctrl + L | Cmd + K, Opt + L |
| 多行輸入 | Shift + Enter | Ctrl + Return |
| 執行 | Enter | Return |
右鍵點擊控制台：
- XMLHttpRequest記錄：打開查看XHR的日志
- 導航處切換保存日志
- 過濾：隱藏與顯示腳本文件的信息
- 清空控制台：清空控制台所有信息
Screencasting
| Windows / Linux | Mac | |
|---|---|---|
| Pinch zoom in and out | Alt + Scroll,Ctrl + Click and drag with two fingers | Opt + Scroll, Cmd + Click and drag with two fingers |
| Inspect element tool | Ctrl + Shift + C | Cmd + Shift + C |
Emulation
| Windows / Linux | Mac | |
|---|---|---|
| Pinch zoom in and out | Shift + Scroll | Shift + Scroll |
其他Chrome快捷方式
下面是一些瀏覽器中非常有用的額外的快捷方式(附：所有Windows/Linux/Mac快捷方式)
| 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 |
| 地址欄放置一個?供你輸入內容進行搜索(使用你設置的默認搜索引擎) | Ctrl + K, Ctrl + E | Cmd + K, Cmd + E |
參考文獻：
http://9iphp.com/web/javascript/chrome-devtools-shortcuts.html
http://www.cnblogs.com/davidwang456/p/6932452.html