Chrome開發者工具詳解（四）之Elements、Console、Sources面板

Elements面板

實時編輯DOM節點和CSS樣式雙擊DOM樹視圖里面的節點，可以實時編輯標簽屬性，修改的效果會立刻反應在瀏覽器里

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

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

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

Console面板

　　console.log：顯示一般的基本日志信息

　　console.group：顯示的基本日志太多時，將相關的日志進行分組

　　console.warn：顯示帶有黃色小圖標的警告信息

　　console.error：顯示帶有紅色小圖標的紅色的錯誤信息

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

　　可以根據JS條件判斷輸出不同的日志信息注：當需要換到下一行而不是回車的時候，請按Shift+Enter

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

　　快捷方式

　　$()：返回與指定的CSS選擇器相匹配的第一個元素，等同於document.querySelector()

　　$$()：返回與指定的CSS選擇器相匹配的所有元素的數組，等同於document.querySelectorAll()

　　$x()：返回與指定的XPath相匹配的所有元素的數組

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

　　① DOM元素節點發生改變時

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

　　下圖是在我的系統里添加指定省市指定醫院時由於增加了元素節點而觸發的斷點，通過單步調試可以看到會彈出一個div對話框供用戶添加數據。

　　② XHR生命周期狀態改變時

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

　　③ 指定的事件執行時

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