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

Chrome開發(fā)者工具面板

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

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

• Console:記錄開發(fā)者開發(fā)過程中的日志信息，且可以作為與JS進行交互的命令行Shell。

• Sources:斷點調試JS。

• Network:從發(fā)起網頁頁面請求Request后分析HTTP請求后得到的各個請求資源信息（包括狀態(tài)、資源類型、大小、所用時間等），可以根據這個進行網絡性能優(yōu)化。

• Timeline:記錄并分析在網站的生命周期內所發(fā)生的各類事件，以此可以提高網頁的運行時間的性能。

• Profiles:如果你需要Timeline所能提供的更多信息時，可以嘗試一下Profiles,比如記錄JS CPU執(zhí)行時間細節(jié)、顯示JS對象和相關的DOM節(jié)點的內存消耗、記錄內存的分配細節(jié)。

• Application:?記錄網站加載的所有資源信息，包括存儲數據（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、緩存數據、字體、圖片、腳本、樣式表等。

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

• Audits:對當前網頁進行網絡利用情況、網頁性能方面的診斷，并給出一些優(yōu)化建議。比如列出所有沒有用到的CSS文件等。

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

Elements面板

實時編輯DOM節(jié)點和CSS樣式

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

• 點擊右側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表達式計算

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

• 選擇元素

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

Sources面板

你可以在這個面板里面調試你的JS代碼，也可以在工作區(qū)打開你的本地文件。

調試JS代碼

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

• 設置斷點

斷點可以在DOM元素節(jié)點發(fā)生改變時、XHR生命周期狀態(tài)改變時、指定的事件執(zhí)行時被觸發(fā)

① DOM元素節(jié)點發(fā)生改變時

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

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

② XHR生命周期狀態(tài)改變時

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

③ 指定的事件執(zhí)行時

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

個人博客

我的個人博客