Chrome開發(fā)者工具詳解(1)-Elements、Console自赔、Sources面板
Chrome開發(fā)者工具面板
面板上包含了Elements面板妈嘹、Console面板、Sources面板绍妨、Network面板润脸、
Timeline面板、Profiles面板他去、Application面板毙驯、Security面板、Audits面板這些功能面板灾测。
這些按鈕的功能點如下：
Elements:查找網(wǎng)頁源代碼HTML中的任一元素,手動修改任一元素的屬性和樣式且能實時在瀏覽器里面得到反饋爆价。
Console:記錄開發(fā)者開發(fā)過程中的日志信息，且可以作為與JS進行交互的命令行Shell媳搪。
Sources:斷點調(diào)試JS铭段。
Network:從發(fā)起網(wǎng)頁頁面請求Request后分析HTTP請求后得到的各個請求資源信息（包括狀態(tài)、資源類型秦爆、大小序愚、所用時間等），可以根據(jù)這個進行網(wǎng)絡(luò)性能優(yōu)化等限。
Timeline:記錄并分析在網(wǎng)站的生命周期內(nèi)所發(fā)生的各類事件爸吮，以此可以提高網(wǎng)頁的運行時間的性能芬膝。
Profiles:如果你需要Timeline所能提供的更多信息時，可以嘗試一下Profiles,比如記錄JS CPU執(zhí)行時間細節(jié)拗胜、顯示JS對象和相關(guān)的DOM節(jié)點的內(nèi)存消耗蔗候、記錄內(nèi)存的分配細節(jié)解幼。
Application:?記錄網(wǎng)站加載的所有資源信息互墓，包括存儲數(shù)據(jù)（Local Storage、Session Storage渗鬼、IndexedDB勘畔、Web SQL所灸、Cookies）、緩存數(shù)據(jù)炫七、字體爬立、圖片、腳本万哪、樣式表等侠驯。
Security:判斷當前網(wǎng)頁是否安全。
-
Audits:對當前網(wǎng)頁進行網(wǎng)絡(luò)利用情況奕巍、網(wǎng)頁性能方面的診斷吟策，并給出一些優(yōu)化建議。比如列出所有沒有用到的CSS文件等的止。
注： 這一篇主要講解前三個面板Elements檩坚、Console、Sources诅福。
Elements面板
實時編輯DOM節(jié)點和CSS樣式
- 雙擊DOM樹視圖里面的節(jié)點匾委，可以實時編輯標簽屬性，修改的效果會立刻反應(yīng)在瀏覽器里面
- 點擊右側(cè)Style面板氓润，可以實時修改CSS的屬性值赂乐，這里面的所有樣式Name和Value都是可以編輯的;在?每個屬性后面單擊可以添加新的樣式，如下圖：
- 點擊右側(cè)Computed面板咖气，可以編輯左側(cè)選中的盒子模型參數(shù)沪猴，所有的值都是可以修改的;點擊不同的位置(top、bottom采章、left、right) 就可以修改元素的padding壶辜、border悯舟、margin屬性值。
- 查看網(wǎng)頁的本地修改歷史
- 點擊Styles面板中修改過屬性的文件名砸民，會跳轉(zhuǎn)到Source面板
- 在文件位置右擊選擇Local modifications,可以查看本地的所有修改記錄
- 點擊指定的時間點可以看到粉紅背景的刪除內(nèi)容和綠色背景的添加內(nèi)容
Console面板
控制臺輸出日志
通過JS代碼或者命令行console.log()抵怎、console.warn()
和console.error()可以將?日志信息輸出到控制臺
-
console.log顯示一般的基本日志信息奋救，當要顯示的基本日志太多時可以使用console.group將相關(guān)的日志進行分組 -
console.warn顯示帶有?黃色小圖標的警告信息 -
console.error顯示帶有紅色小圖標的紅色的錯誤信息
-
console.assert當?shù)谝粋€參數(shù)為false時，才會顯示第一個參數(shù)的值
-
可以根據(jù)JS條件判斷輸出不同的日志信息
注： 當需要換到下一行而不是回車的時候反惕，請按
Shift+Enter尝艘。
控制臺交互
- JS表達式計算
在上一小節(jié)，我們已經(jīng)看到可以在控制臺輸入JS表達式點擊Enter即可得到表達式的值姿染，當你在控制臺輸入命令時背亥，會彈出相應(yīng)的智能提示框，你可以用Tab自動完成當前的建議項
- 選擇元素
| 快捷方式 | 描述 |
|---|---|
| $() | 返回與指定的CSS選擇器相匹配的第一個元素悬赏，等同于document.querySelector()
|
| $$() | 返回與指定的CSS選擇器相匹配的所有元素的數(shù)組狡汉，等同于document.querySelectorAll()
|
| $x() | 返回與指定的XPath相匹配的所有元素的數(shù)組 |
注： 我在實際操作過程中發(fā)現(xiàn)$()并沒有按預期返回相匹配的第一個元素，而是返回了所有匹配的元素數(shù)組闽颇，我也給Google提供了這個issue盾戴，等待Google的答復。
Sources面板
你可以在這個面板里面調(diào)試你的JS代碼兵多，也可以在工作區(qū)打開你的本地文件尖啡。
調(diào)試JS代碼
- 你可以點擊JS代碼塊前面的數(shù)字外來設(shè)置斷點，如果當前代碼是經(jīng)過壓縮的話剩膘，可以點擊下方的花括號
{}來增強可讀性衅斩，所有的斷點都會列出右側(cè)的斷點區(qū)。
- 設(shè)置斷點
斷點可以在DOM元素節(jié)點發(fā)生改變時援雇、XHR生命周期狀態(tài)改變時矛渴、指定的事件執(zhí)行時被觸發(fā)
① DOM元素節(jié)點發(fā)生改變時
在Elements面板中指定的DOM節(jié)點上右擊，在彈出的菜單中選擇Break on...惫搏，可以看到三個選擇項具温，比如我們選擇Subtree modifications，
那么當選擇的節(jié)點里面的子節(jié)點被添加筐赔、刪除铣猩、修改，則斷點就會被觸發(fā)茴丰。設(shè)置方式如下圖：
下圖是在我的系統(tǒng)里添加指定省市指定醫(yī)院時由于增加了元素節(jié)點而觸發(fā)的斷點达皿，通過單步調(diào)試可以看到會彈出一個div對話框供用戶添加數(shù)據(jù)。
② XHR生命周期狀態(tài)改變時
當XHR生命周期狀態(tài)發(fā)生改變或者XHR的URL與Sources面板右側(cè)的XHR Breakpoints欄設(shè)置的字符串匹配時贿肩，則斷點就會有觸發(fā)峦椰。
③ 指定的事件執(zhí)行時
在Sources面板右側(cè)的XHR Breakpoints欄下面是Event Listener Breakpoints,列出了各種類型的事件，勾選你要監(jiān)聽的事件汰规，
在指定的事件執(zhí)行時汤功，斷點就會有觸發(fā)。
