有一家神奇的公司叫做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
審查審查器 (取消第一個審查器的停靠後再按鍵)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