有一家神奇的公司叫做Google，有一個強大的瀏覽器稱為chrome。從以前使用firefox的插件firebug轉戰chrome調試已有些日子，不得不說，chrome的調試簡單、強大，當然如果知道以下的快捷鍵將會使前端開發事半功倍。
快捷鍵
DevTools具有一些內建的快捷鍵，開發者可以在日常的開發過程中使用它們以節約時間。以下列舉的是每個快捷方式在Windows / Linux和Mac下相應的快捷鍵。有些快捷鍵是在全局有效的，而有些只是在某一個面板生效，and are broken up based on where it can be used.
在Google Chrome的任何頁面或者應用中，你可以通過以下的方式打開 DevTools:
打開瀏覽器窗口右上方的 Chrome 菜單 img，選擇工具 > 開發者工具(Tools > Developer Tools).
在任意的頁面元素中鼠標右鍵，選擇審查元素(Inspect Element).
功能Windows / LinuxMac
打開 Chrome DevToolsF12, Ctrl + Shift + I ? ? Cmd + Opt + I
打開／切換 審查元素模式和瀏覽模式Ctrl + Shift + C ? ? Cmd + Shift + C
打開 Chrome DevTools ,并聚焦在 console 上Ctrl + Shift + J ? ?Cmd + Opt + J
審查審查器 (取消第一個審查器的?？亢笤侔存I)Ctrl + Shift + J ? ?Cmd + Opt + J
在Chrome DevTools 窗口是打開時，按下“?”或者“F1”鍵可以打開設置對話（General Settings）框。按下“Esc”可以關閉設置對話框。
功能Windows / LinuxMac
打開 General Settings 對話框?, F1?
下一個面板Ctrl + ] ? ?Cmd + ]
上一個面板Ctrl + [ ? ?Cmd + [
標簽歷史中后退Ctrl + Alt + [ ? ?Cmd + Alt + [
標簽歷史中前進Ctrl + Alt + ] ? ?Cmd + Alt + ]
跳轉至標簽頁 1-9 (需要在設置對話框中開啟服務)Ctrl + 1-9 ? ? Cmd + 1-9
打開/關閉 Console 或 關閉設置對話框EscEsc
刷新頁面F5, Ctrl + R ? ?Cmd + R
強制刷新頁面，清除緩存內容Ctrl + F5, Ctrl + Shift + R ? ?Cmd + Shift + R
當前文件或標簽頁搜索文字Ctrl + F ? ?Cmd + F
所有資源中搜索文字Ctrl + Shift + F ? ?Cmd + Alt + F
搜索文件(除了 Timeline面板)Ctrl + O, ? Cmd + O
恢復默認字體大小Ctrl + 0 ? Shift + 0
放大Ctrl + +Shift + +
縮小Ctrl + -Shift + -
功能Windows / LinuxMac
撤銷改動Ctrl + Z ??
恢復改動Ctrl + Y ? ? ? ?Cmd + Shift + Z
導航Up, DownUp, Down
伸縮展開元素Right, LeftRight, Left
展開元素單擊某個html標簽單擊某個html標簽
編輯元素屬性Enter, 雙擊屬性Enter, 雙擊屬性
隱藏元素 ? ?H
切換編輯為HTML ? ? F2
右鍵單擊某個元素時你可以做：
強制元素在某個偽類狀態: (:active, :hover, :focus, :visited)
為元素設置斷點（子元素修改，屬性更改，元素刪除）
清除 console
功能Windows / LinuxMac
編輯規則單擊單擊
添加新屬性空白處單擊空白處單擊
跳轉到樣式規則屬性在樣式表的行數Ctrl + 單擊某個CSS屬性Cmd + 單擊某個CSS屬性
跳轉到屬性值在樣式表的行數Ctrl + 單擊某個CSS屬性值Cmd + 單擊某個CSS屬性值
循環顏色定義值Shift + 單擊顏色選擇器Shift + 單擊顏色選擇器
查看自動填充建議Ctrl + 空格Cmd + 空格
編輯下一個 / 上一個屬性Tab, ? ?Shift + TabTab, ? ?Shift + Tab
增大 / 減小屬性值Up, DownUp, Down
增大 / 減小屬性值 （最小單位 10 ）Shift + Up, ? Shift + DownShift + Up, ? Shift + Down
增大 / 減小屬性值 （最小單位 10 ）PgUp, ?PgDownPgUp, PgDown
增大 / 減小屬性值 （最小單位 100）Shift + PgUp, ? ?Shift + PgDown ? ?Shift + PgUp, ? ?Shift + PgDown
增大 / 減小屬性值 （最小單位 0.1）Alt + Up, ? ?Alt + Down ? Opt + Up, ? ?Opt + Down
(img)[img]仿真元素偽類 (:active, :hover, :focus, :visited)
(img)[img]添加新的CSS樣式規則
功能Windows / LinuxMac
中斷/恢復腳本執行F8, Ctrl + \F8, Cmd + \
跳過下一個函數F10, Ctrl + 'F10, Cmd + '
跳入下一個函數F11, Ctrl + ;F11, Cmd + ;
跳出當前函數Shift + F11, ?Ctrl + Shift + ; ?Shift + F11, ?Cmd + Shift + ;
Select next call frameCtrl + .Opt + .
Select previous call frameCtrl + ,Opt + ,
切換斷點狀態單擊行數, Ctrl + B單擊行數, Cmd + B
編輯斷點調節右鍵單擊行數右鍵單擊行數
Delete individual wordsAlt + DeleteOpt + Delete
注釋某行或選擇文字Ctrl + /Cmd + /
保存本地的更改Ctrl + S ? ?Cmd + S
保存所有的更改Ctrl + Shift + S ? ?Cmd + Shift + S
跳轉到某行Ctrl + G ? ?Ctrl + G
按文件名搜索文件Ctrl + O ? Cmd + O
跳轉到某行（Jump to line number）Ctrl + P + : ? ? Cmd + P + :
跳轉到某列Ctrl + O + : + : ? ? ? ? Cmd + O + : + :
打開 member ? ?Ctrl + Shift + O ? ? ?Cmd + Shift + O
切換 console 并評估（ evaluate？） Sources 面板中選中的代碼Ctrl + Shift + ECmd + Shift + E
關閉當前激活的標簽Alt + WOpt + W
運行代碼片段Ctrl + Enter ? ? Cmd + Enter
切換注釋Ctrl + / ? ?Cmd + /
(img)[IMG] Don't 暫停 on exceptions
(img)[IMG] 暫停 on All Exceptions (包括那些在try/catch塊中被捕獲的)
(img)[IMG] 暫停 on Uncaught Exceptions (正常情況下是你想要的那個)
功能Windows / LinuxMac
開啟/停止 記錄Ctrl + E ? ?Cmd + E
保存時間軸數據Ctrl + S ? Cmd + S
加載時間軸數據Ctrl + O ? Cmd + O
功能Windows / LinuxMac
開啟/停止 記錄Ctrl + E ? Cmd + E
功能Windows / LinuxMac
下一個建議TabTab
上一個建議Shift + Tab ? ? ? ? ? ? ? ? ? ?Shift + Tab
接受建議RightRight
上一個命令/行Up ? ? ? ? ? ?Up
下一個命令/行Down ? ? ? ?Down
清除控制臺記錄Ctrl + L ? ? ? ? ? ? ? ? ? ? ? Cmd + K, ? ? ? ? ? ? ? ? ? ?Opt + L
多行輸入Shift + Enter ? ? ? ? ? ? ? ? Ctrl + Return
執行Enter ? ? ?Return
console 中右鍵單擊:
XMLHTTPRequest 記錄: 打開后可查看 XHR 記錄
Preserve log upon navigation
過濾: 隱藏或顯示所有來自腳本文件的消息
清除 console: 清除所有的 console 消息
功能Windows / LinuxMac
視圖微調 放大或縮小Alt + Scroll,Ctrl + Cick and drag with two fingersOpt + Scroll, Cmd + Cick and drag with two fingers
審查元素工具Ctrl + Shift + CCmd + Shift + C
功能Windows / LinuxMac
視圖微調 放大或縮小Shift + Scroll ? ? ? ? ? ? ? ?Shift + Scroll
以下的 Chrome 快捷鍵在日常使用中非常有用，它并不是特意為 DevTools開發的，
功能Windows / LinuxMac
尋找下一個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 ? ? ? ? ? ? ? ?Alt + Right
標簽瀏覽歷史中的上一個頁面Backspace, Alt + Left ? ? ? ? ? ? ? ? Backspace, ? Alt + Left
高亮地址欄內容F6, Ctrl + L, Alt + D ? ? ? ? ? ? ? ? ?Cmd + L, Alt + D
在地址欄輸入一個 ? 后可以將它作為你的默認搜索引擎使用Ctrl + K, Ctrl + E ? ? ? ? ? ? ? ? ? ? ? ?Cmd + K, Cmd + E
