Chrome開發者工具面板

面板上包含了Elements面板、Console面板、Sources面板、Network面板、
Timeline面板、Profiles面板、Application面板、Security面板、Audits面板這些功能面板。

這些按鈕的功能點如下：

• Elements:查詢網頁原始碼HTML中的任一元素,手動修改任一元素的屬性和樣式且能實時在瀏覽器裡面得到反饋。

• Console:記錄開發者開發過程中的日誌資訊，且可以作為與JS進行互動的命令列Shell。

• Sources:斷點除錯JS。

• Network:從發起網頁頁面請求Request後分析HTTP請求後得到的各個請求資源資訊（包括狀態、資源型別、大小、所用時間等），可以根據這個進行網路效能優化。

• Timeline:記錄並分析在網站的生命週期內所發生的各類事件，以此可以提高網頁的執行時間的效能。

• Profiles:如果你需要Timeline所能提供的更多資訊時，可以嘗試一下Profiles,比如記錄JS CPU執行時間細節、顯示JS物件和相關的DOM節點的記憶體消耗、記錄記憶體的分配細節。

• Application:記錄網站載入的所有資源資訊，包括儲存資料（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、快取資料、字型、圖片、指令碼、樣式表等。

• Security:判斷當前網頁是否安全。

• Audits:對當前網頁進行網路利用情況、網頁效能方面的診斷，並給出一些優化建議。比如列出所有沒有用到的CSS檔案等。

  注：這一篇主要講解前三個面板Elements、Console、Sources。

Elements面板

實時編輯DOM節點和CSS樣式

• 雙擊DOM樹視圖裡面的節點，可以實時編輯標籤屬性，修改的效果會立刻反應在瀏覽器裡面

• 點選右側Style面板，可以實時修改CSS的屬性值，這裡面的所有樣式Name和Value都是可以編輯的;在每個屬性後面單擊可以新增新的樣式，如下圖：

• 點選右側Computed面板，可以編輯左側選中的盒子模型引數，所有的值都是可以修改的;點選不同的位置(top
  、bottom、left、right) 就可以修改元素的padding、border、margin屬性值。

• 檢視網頁的本地修改歷史
  • 點選Styles面板中修改過屬性的檔名，會跳轉到Source面板
  • 在檔案位置右擊選擇Local modifications,可以檢視本地的所有修改記錄
  • 點選指定的時間點可以看到粉紅背景的刪除內容和綠色背景的新增內容

Console面板

控制檯輸出日誌

通過JS程式碼或者命令列console.log()、console.warn()
和console.error()可以將日誌資訊輸出到控制檯

• console.log顯示一般的基本日誌資訊，當要顯示的基本日誌太多時可以使用console.group將相關的日誌進行分組
• console.warn顯示帶有黃色小圖示的警告資訊
• console.error顯示帶有紅色小圖示的紅色的錯誤資訊

• console.assert當第一個引數為false時，才會顯示第一個引數的值

• 可以根據JS條件判斷輸出不同的日誌資訊

  注：當需要換到下一行而不是回車的時候，請按Shift+Enter。
  

控制檯互動

• JS表示式計算

在上一小節，我們已經看到可以在控制檯輸入JS表示式點選Enter即可得到表示式的值，當你在控制檯輸入命令時，會彈出相應的智慧提示框，你可以用Tab自動完成當前的建議項

• 選擇元素

注：我在實際操作過程中發現$()並沒有按預期返回相匹配的第一個元素，而是返回了所有匹配的元素陣列，我也給Google提供了這個issue，等待Google的答覆。

Sources面板

你可以在這個面板裡面除錯你的JS程式碼，也可以在工作區開啟你的本地檔案。

除錯JS程式碼

• 你可以點選JS程式碼塊前面的數字外來設定斷點，如果當前程式碼是經過壓縮的話，可以點選下方的花括號{}來增強可讀性，所有的斷點都會列出右側的斷點區。

• 設定斷點

斷點可以在DOM元素節點發生改變時、XHR生命週期狀態改變時、指定的事件執行時被觸發

①DOM元素節點發生改變時

在Elements面板中指定的DOM節點上右擊，在彈出的選單中選擇Break on...，可以看到三個選擇項，比如我們選擇Subtree modifications，
那麼當選擇的節點裡面的子節點被新增、刪除、修改，則斷點就會被觸發。設定方式如下圖：

下圖是在我的系統裡新增指定省市指定醫院時由於增加了元素節點而觸發的斷點，通過單步除錯可以看到會彈出一個div對話方塊供使用者新增資料。

②XHR生命週期狀態改變時

當XHR生命週期狀態發生改變或者XHR的URL與Sources面板右側的XHR Breakpoints欄設定的字串匹配時，則斷點就會有觸發。

③指定的事件執行時

在Sources面板右側的XHR Breakpoints欄下面是Event Listener Breakpoints,列出了各種型別的事件，勾選你要監聽的事件，
在指定的事件執行時，斷點就會有觸發。