Chrome開發者工具詳解(1)-Elements、Console、Sources面闆

面闆上包含了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。

輕按兩下DOM樹視圖裡面的節點，可以實時編輯标簽屬性，修改的效果會立刻反應在浏覽器裡面

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

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

檢視網頁的本地修改曆史

點選Styles面闆中修改過屬性的檔案名，會跳轉到Source面闆

在檔案位置右擊選擇Local modifications,可以檢視本地的所有修改記錄

點選指定的時間點可以看到粉紅背景的删除内容和綠色背景的添加内容

通過JS代碼或者指令行<code>console.log()</code>、<code>console.warn()</code>

和<code>console.error()</code>可以将日志資訊輸出到控制台

<code>console.log</code> 顯示一般的基本日志資訊，當要顯示的基本日志太多時可以使用<code>console.group</code>将相關的日志進行分組

<code>console.warn</code> 顯示帶有黃色小圖示的警告資訊

<code>console.error</code> 顯示帶有紅色小圖示的紅色的錯誤資訊

<code>console.assert</code> 當第一個參數為false時，才會顯示第一個參數的值

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

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

JS表達式計算

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

選擇元素

快捷方式

描述

$()

傳回與指定的CSS選擇器相比對的第一個元素，等同于<code>document.querySelector()</code>

$$()

傳回與指定的CSS選擇器相比對的所有元素的數組，等同于<code>document.querySelectorAll()</code>

$x()

傳回與指定的XPath相比對的所有元素的數組

注： 我在實際操作過程中發現<code>$()</code>并沒有按預期傳回相比對的第一個元素，而是傳回了所有比對的元素數組，我也給Google提供了這個issue，等待Google的答複。

你可以在這個面闆裡面調試你的JS代碼，也可以在工作區打開你的本地檔案。

你可以點選JS代碼塊前面的數字外來設定斷點，如果目前代碼是經過壓縮的話，可以點選下方的花括号<code>{}</code>來增強可讀性，所有的斷點都會列出右側的斷點區。

設定斷點

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

① DOM元素節點發生改變時

在Elements面闆中指定的DOM節點上右擊，在彈出的菜單中選擇<code>Break on...</code>，可以看到三個選擇項，比如我們選擇<code>Subtree modifications</code>，

那麼當選擇的節點裡面的子節點被添加、删除、修改，則斷點就會被觸發。設定方式如下圖：

下圖是在我的系統裡添加指定省市指定醫院時由于增加了元素節點而觸發的斷點，通過單步調試可以看到會彈出一個<code>div</code>對話框供使用者添加資料。

② XHR生命周期狀态改變時

當XHR生命周期狀态發生改變或者XHR的URL與Sources面闆右側的XHR Breakpoints欄設定的字元串比對時，則斷點就會有觸發。

③ 指定的事件執行時

在Sources面闆右側的XHR Breakpoints欄下面是Event Listener Breakpoints,列出了各種類型的事件，勾選你要監聽的事件，

在指定的事件執行時，斷點就會有觸發。

我的個人部落格