chrome開發工具指南（一）

注意：若是你是一個網頁開發者同時想要得到最新版本的開發工具，那麼你應該使用谷歌瀏覽器（金絲雀）Canary 版。

Chrome 開發者工具

打開Chrome 開發者工具

 

• 選擇瀏覽器位於瀏覽器窗口右上方的菜單欄的工具目錄，選擇開發者工具選項。

• 右擊頁面任何位置並選擇審查元素。

開發工具將會在瀏覽器的下方打開。

有一些快捷鍵也能夠用來打開開發工具： Ctrl + Shift + I ( 或在 Mac 上使用 Cmd + Opt+ I)。

Ctrl + Shift + J ( 或在 Mac 上使用 Cmd + Opt + J) 打開開發者工具同時集中焦點於控制檯。

Ctrl + Shift + C (或在 Mac 上使用 Cmd + Shift + C) 在審查模式下打開開發者工具或是在開發者工具已經打開的狀況下開啓查閱選項。

瞭解面板

設備模式

使用設備模式構建徹底響應式，移動優先的網絡體驗。

元素面板

使用元素面板能夠自由的操做DOM和CSS來迭代佈局和設計頁面.

控制檯面板

在開發期間，可使用控制檯面板記錄診斷信息，或者使用它做爲 shell在頁面上與JavaScript交互。

源代碼面板

在源代碼面板中設置斷點來調試 JavaScript ，或者經過Workspaces（工做區）鏈接本地文件來使用開發者工具的實時編輯器。

 

 

網絡面板

使用網絡面板瞭解請求和下載的資源文件並優化網頁加載性能。

性能面板

注意: 在 Chrome 57 以後時間線面板改名爲性能面板.使用時間軸面板能夠經過記錄和查看網站生命週期內發生的各類事件來提升頁面的運行時性能。

內存面板

注意: 在 Chrome 57 以後分析面板改名爲內存面板.若是須要比時間軸面板提供的更多信息，可使用「配置」面板，例如跟蹤內存泄漏。  

應用面板

注意: 在 Chrome 52 以後資源面板改名爲應用面板.使用資源面板檢查加載的全部資源，包括IndexedDB與Web SQL數據庫，本地和會話存儲，cookie，應用程序緩存，圖像，字體和樣式表。

安全面板

使用安全面板調試混合內容問題，證書問題等等

 

 

 

 

 

 

快捷鍵

訪問 DevTools

訪問 DevTools	在 Windows 上	在 Mac 上
打開 Developer Tools	F12、Ctrl + Shift + I	Cmd + Opt + I
打開/切換檢查元素模式和瀏覽器窗口	Ctrl + Shift + C	Cmd + Shift + C
打開 Developer Tools 並聚焦到控制檯	Ctrl + Shift + J	Cmd + Opt + J
檢查檢查器（取消停靠第一個後按）	Ctrl + Shift + I	Cmd + Opt + I

全局鍵盤快捷鍵

下列鍵盤快捷鍵能夠在全部 DevTools 面板中使用：

全局快捷鍵	Windows	Mac
顯示通常設置對話框	?、F1	?
下一個面板	Ctrl + ]	Cmd + ]
上一個面板	Ctrl + [	Cmd + [
在面板歷史記錄中後退	Ctrl + Alt + [	Cmd + Opt + [
在面板歷史記錄中前進	Ctrl + Alt + ]	Cmd + Opt + ]
更改停靠位置	Ctrl + Shift + D	Cmd + Shift + D
打開 Device Mode	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 + P	Cmd + O、Cmd + P
放大（焦點在 DevTools 中時）	Ctrl + +	Cmd + Shift + +
縮小	Ctrl + -	Cmd + Shift + -
恢復默認文本大小	Ctrl + 0	Cmd + 0

按面板分類的鍵盤快捷鍵

Elements

Elements 面板	Windows	Mac
撤消更改	Ctrl + Z	Cmd + Z
重作更改	Ctrl + Y	Cmd + Y、Cmd + Shift + Z
導航	向上鍵、向下鍵	向上鍵、向下鍵
展開/摺疊節點	向右鍵、向左鍵	向右鍵、向左鍵
展開節點	點擊箭頭	點擊箭頭
展開/摺疊節點及其全部子節點	Ctrl + Alt + 點擊箭頭圖標	Opt + 點擊箭頭圖標
編輯屬性	Enter、雙擊屬性	Enter、雙擊屬性
隱藏元素	H	H
切換爲以 HTML 形式編輯	F2

Styles 邊欄

Styles 邊欄中可用的快捷鍵：

Styles 邊欄	Windows	Mac
編輯規則	點擊	點擊
插入新屬性	點擊空格	點擊空格
轉到源中樣式規則屬性聲明行	Ctrl + 點擊屬性	Cmd + 點擊屬性
轉到源中屬性值聲明行	Ctrl + 點擊屬性值	Cmd + 點擊屬性值
在顏色定義值之間循環	Shift + 點擊顏色選取器框	Shift + 點擊顏色選取器框
編輯下一個/上一個屬性	Tab、Shift + Tab	Tab、Shift + Tab
增大/減少值	向上鍵、向下鍵	向上鍵、向下鍵
以 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 + 向上鍵、Alt + 向下鍵	Opt + 向上鍵、Opt + 向下鍵

Sources

Sources 面板	Windows	Mac
暫停/繼續腳本執行	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
編輯斷點條件	右鍵點擊行號	右鍵點擊行號
刪除各個單詞	Ctrl + Delete	Opt + Delete
爲某一行或選定文本添加註釋	Ctrl + /	Cmd + /
將更改保存到本地修改	Ctrl + S	Cmd + S
保存全部更改	Ctrl + Alt + S	Cmd + Opt + 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

在代碼編輯器內

代碼編輯器	Windows	Mac
轉到匹配的括號	Ctrl + M
跳轉到行號	Ctrl + P + 數字	Cmd + P + 數字
跳轉到列	Ctrl + O + 數字 + 數字	Cmd + O + 數字 + 數字
切換註釋	Ctrl + /	Cmd + /
選擇下一個實例	Ctrl + D	Cmd + D
撤消上一個選擇	Ctrl + U	Cmd + U

Timeline

Timeline 面板	Windows	Mac
開始/中止記錄	Ctrl + E	Cmd + E
保存時間線數據	Ctrl + S	Cmd + S
加載時間線數據	Ctrl + O	Cmd + O

Profiles

Profiles 面板	Windows	Mac
開始/中止記錄	Ctrl + E	Cmd + E

控制檯

控制檯快捷鍵	Windows	Mac
接受建議	向右鍵	向右鍵
上一個命令/行	向上鍵	向上鍵
下一個命令/行	向下鍵	向下鍵
聚焦到控制檯	Ctrl + `	Ctrl + `
清除控制檯	Ctrl + L	Cmd + K、Opt + L
多行輸入	Shift + Enter	Ctrl + Return
執行	Enter	Return

Device Mode

Device Mode 快捷鍵	Windows	Mac
雙指張合放大和縮小	Shift + 滾動	Shift + 滾動

抓屏時

抓屏快捷鍵	Windows	Mac
雙指張合放大和縮小	Alt + 滾動、Ctrl + 點擊並用兩個手指拖動	Opt + 滾動、Cmd + 點擊並用兩個手指拖動
檢查元素工具	Ctrl + Shift + C	Cmd + Shift + C