Chrome開發者工具介紹 ： 基礎篇

Chrome瀏覽器一款Web開發的利器，具備不易崩潰、速度快、安全等諸多優勢獲得廣大用戶的一直好評，一經推出迅速佔領市場，做爲Web開發者咱們更應該瞭解它強大的功能。

下面列舉出一些經常使用技巧，幫助你們提升效率：

1.打開控制面板（經過右鍵->審查元素或F12快捷鍵)

2.編輯HTML元素

選取百度爲例：

在 Elements 下的元素編輯器中選擇一個Dom元素

雙擊選中的Dom元素，而後進行編輯，回車確認後頁面會有相應的改變

ps:  在元素中進行查找用 Ctrl + F 輸入關鍵字

3.展開全部節點

同上在Elements中，選中一個子節點的元素，按下 ALT + 鼠標點擊該元素，會自動展開全部的子節點

4.快速查找與定位

快速查找：輸入Ctrl + o 快速查詢你要打開的Js文件，然會回車確認，以下圖我輸入a.js，控制檯就會幫我查到與其相關的

快速定位：打開一個js文件，Ctrl +o 後輸入 ：行號 （如：19），會準確的定位到具體的行

5.變換開發工具的位置

鼠標點擊下圖中右上角的圖標或用快捷鍵 Ctrl+shift+D來切換開發工具顯示的位置（浮動，右側，底部），以下圖：

6.觸發僞類

選中一個元素，右鍵->Force Element State 或 點擊下圖中右上角圖標（Toggle Element State圖標）

7.使用$0得到選中元素

在Console標籤下輸入 $0 得到當前選中的元素

同時選中輸出中一行元素，右鍵 選擇Reveal in Elements Panel，定位到相關元素位置

8.查看事件監聽器

選擇Elements面板

右側面板選擇Event Listeners 導航，而後選擇一個事件

對事件鼠標右鍵選擇Show Function Definition，可定位到事件的函數定義

9.複製請求內容

選擇Network面板，選中一個文件，右鍵會有 Copy request header , Copy response headers，Copy response等等

來自爲知筆記(Wiz)