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

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

Chrome開發者工具面板

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

Elements面板

實時編輯DOM節點和CSS樣式

• 雙擊DOM樹視圖裏面的節點，能夠實時編輯標籤屬性，修改的效果會馬上反應在瀏覽器裏面

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

在上一小節，咱們已經看到能夠在控制檯輸入JS表達式點擊Enter便可獲得表達式的值，當你在控制檯輸入命令時，會彈出相應的智能提示框，你能夠用Tab自動完成當前的建議項

• 選擇元素

快捷方式	描述
$()	返回與指定的CSS選擇器相匹配的第一個元素，等同於document.querySelector()
$$()	返回與指定的CSS選擇器相匹配的全部元素的數組，等同於document.querySelectorAll()
$x()	返回與指定的XPath相匹配的全部元素的數組

注： 我在實際操做過程當中發現$()並無按預期返回相匹配的第一個元素，而是返回了全部匹配的元素數組，我也給Google提供了這個issue，等待Google的答覆。

Sources面板

你能夠在這個面板裏面調試你的JS代碼，也能夠在工做區打開你的本地文件。

調試JS代碼

• 你能夠點擊JS代碼塊前面的數字外來設置斷點，若是當前代碼是通過壓縮的話，能夠點擊下方的花括號{}來加強可讀性，全部的斷點都會列出右側的斷點區。

• 設置斷點

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

① DOM元素節點發生改變時

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

下圖是在個人系統裏添加指定省市指定醫院時因爲增長了元素節點而觸發的斷點，經過單步調試能夠看到會彈出一個div對話框供用戶添加數據。

② XHR生命週期狀態改變時

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

③ 指定的事件執行時

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

我的博客

個人我的博客