Chrome開發者工具詳解(1)
id="iframe_0.9280889915856889" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22https://img.shields.io/badge/version-v1.0.0-blue.svg?_=5948448%22%20style=%22border:none;max-width:1021px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.9280889915856889',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 95px; height: 20px;">
Chrome開發者工具面板
面板上包含了Elements、Console、Sources、Network、Timeline、Profiles、Application、Security、Audits這些功能按鈕。
id="iframe_0.45542593781902396" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://odfx4jo3a.bkt.clouddn.com/chrome-devtools-panes.png?_=5948448%22%20style=%22border:none;max-width:1021px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.45542593781902396',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 1021px; height: 378px;">
這些按鈕的功能點如下：
- 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樹視圖裏面的節點，可以實時編輯標籤屬性，修改的效果會立刻反應在瀏覽器裏面
id="iframe_0.9356192782656205" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://odfx4jo3a.bkt.clouddn.com/element1.png?_=5948448%22%20style=%22border:none;max-width:1021px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.9356192782656205',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 1021px; height: 314px;">
- 點擊右側Style面板，可以實時修改CSS的屬性值，這裏面的所有樣式Name和Value都是可以編輯的;在每個屬性後面單擊可以添加新的樣式，如下圖：
id="iframe_0.49002432868194057" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://odfx4jo3a.bkt.clouddn.com/element2.png?_=5948448%22%20style=%22border:none;max-width:1021px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.49002432868194057',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 1012px; height: 900px;">
- 點擊右側Computed面板，可以編輯左側選中的盒子模型參數，所有的值都是可以修改的;點擊不同的位置(top、bottom、left、right) 就可以修改元素的padding、border、margin屬性值。
id="iframe_0.35092392160982433" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://odfx4jo3a.bkt.clouddn.com/element-computed.png?_=5948448%22%20style=%22border:none;max-width:1021px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.35092392160982433',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 1021px; height: 343px;">
- 查看網頁的本地修改歷史
- 點擊Styles面板中修改過屬性的文件名，會跳轉到Source面板
- 在文件位置右擊選擇Local modifications,可以查看本地的所有修改記錄
- 點擊指定的時間點可以看到粉紅背景的刪除內容和綠色背景的添加內容
id="iframe_0.8664485256452648" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://odfx4jo3a.bkt.clouddn.com/source1.png?_=5948448%22%20style=%22border:none;max-width:1021px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.8664485256452648',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 1014px; height: 844px;">
Console面板
控制檯輸出日誌
通過JS代碼或者命令行console.log()、console.warn()、console.error() 可以將日誌信息輸出到控制檯
console.log顯示一般的基本日誌信息，當要顯示的基本日誌太多時可以使用console.group將相關的日誌進行分組console.warn顯示帶有黃色小圖標的警告信息console.error顯示帶有紅色小圖標的紅色的錯誤信息
id="iframe_0.6617346826759642" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://odfx4jo3a.bkt.clouddn.com/console5.png?_=5948448%22%20style=%22border:none;max-width:1021px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.6617346826759642',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 665px; height: 305px;">
console.assert當第一個參數爲false時，纔會顯示第一個參數的值
id="iframe_0.8017542371628239" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://odfx4jo3a.bkt.clouddn.com/console4.png?_=5948448%22%20style=%22border:none;max-width:1021px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.8017542371628239',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 742px; height: 215px;">
- 可以根據JS條件判斷輸出不同的日誌信息
注： 當需要換到下一行而不是回車的時候，請按Shift+Enter。
id="iframe_0.2501400864693424" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://odfx4jo3a.bkt.clouddn.com/console3.png?_=5948448%22%20style=%22border:none;max-width:1021px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.2501400864693424',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 800px; height: 575px;">
控制檯交互
- JS表達式計算
在上一小節，我們已經看到可以在控制檯輸入JS表達式點擊Enter即可得到表達式的值，當你在控制檯輸入命令時，會彈出相應的智能提示框，你可以用Tab自動完成當前的建議項
- 選擇元素
id="iframe_0.1590492469814866" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://odfx4jo3a.bkt.clouddn.com/console6-select.png?_=5948448%22%20style=%22border:none;max-width:1021px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.1590492469814866',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 522px; height: 275px;">
| 快捷方式 | 描述 |
|---|---|
| $() |
返回與指定的CSS選擇器相匹配的第一個元素，等同於document.querySelector() |
| $$() |
返回與指定的CSS選擇器相匹配的所有元素的數組，等同於document.querySelectorAll() |
| $x() | 返回與指定的XPath相匹配的所有元素的數組 |
id="iframe_0.08117928390946383" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://odfx4jo3a.bkt.clouddn.com/console-select-element-issue.png?_=5948448%22%20style=%22border:none;max-width:1021px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.08117928390946383',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 1021px; height: 537px;">
注： 我在實際操作過程中發現$()並沒有按預期返回相匹配的第一個元素，而是返回了所有匹配的元素數組，我也給Google提供了這個issue，等待Google的答覆。
Sources面板
你可以在這個面板裏面調試你的JS代碼，也可以在工作區打開你的本地文件。
調試JS代碼
- 你可以點擊JS代碼塊前面的數字外來設置斷點，如果當前代碼是經過壓縮的話，可以點擊下方的花括號
{}來增強可讀性，所有的斷點都會列出右側的斷點區。
id="iframe_0.13468816441991271" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://odfx4jo3a.bkt.clouddn.com/sources1.png?_=5948448%22%20style=%22border:none;max-width:1021px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.13468816441991271',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 1021px; height: 366px;">
- 設置斷點
斷點可以在DOM元素節點發生改變時、XHR生命週期狀態改變時、指定的事件執行時被觸發
① DOM元素節點發生改變時
在Elements面板中指定的DOM節點上右擊，在彈出的菜單中選擇Break
on...，可以看到三個選擇項，比如我們選擇Subtree
modifications，
那麼當選擇的節點裏面的子節點被添加、刪除、修改，則斷點就會被觸發。設置方式如下圖：
id="iframe_0.9526800104645603" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://odfx4jo3a.bkt.clouddn.com/sources-element-debug2.png?_=5948448%22%20style=%22border:none;max-width:1021px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.9526800104645603',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 1021px; height: 592px;">
下圖是在我的系統裏添加指定省市指定醫院時由於增加了元素節點而觸發的斷點，通過單步調試可以看到會彈出一個div對話框供用戶添加數據。
id="iframe_0.6571726912056342" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://odfx4jo3a.bkt.clouddn.com/sources-dom-changes.png?_=5948448%22%20style=%22border:none;max-width:1021px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.6571726912056342',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 1021px; height: 268px;">
② XHR生命週期狀態改變時
當XHR生命週期狀態發生改變或者XHR的URL與Sources面板右側的XHR Breakpoints欄設置的字符串匹配時，則斷點就會有觸發。
id="iframe_0.41318329576561785" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://odfx4jo3a.bkt.clouddn.com/sources-xhr.png?_=5948448%22%20style=%22border:none;max-width:1021px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.41318329576561785',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 1021px; height: 357px;">
③ 指定的事件執行時
在Sources面板右側的XHR Breakpoints欄下面是Event Listener Breakpoints,列出了各種類型的事件，勾選你要監聽的事件，
在指定的事件執行時，斷點就會有觸發。
id="iframe_0.5322379181985639" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://odfx4jo3a.bkt.clouddn.com/event-listener.png?_=5948448%22%20style=%22border:none;max-width:1021px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.5322379181985639',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 607px; height: 720px;">