【理解chrome開發者工具】 part1 編輯與調試

簡單複習各個面板

Elements

瀏覽DOM樹，瀏覽樣式。

Console

一個REPL。

小技巧： 在任何非Console面板中，按ESC能夠調出一個小的Console窗口，方便開發者Debug。

Sources

相似一個文本編輯器。右邊有一個Debugger，咱們能夠用它來Debug，能夠作比console.log更復雜的事。

Network

顯示請求瀑布流。

Performance

咱們能夠Record一些操做，而後在這個面板中查看一些信息。

Memory

查看頁面的內存佔用具體狀況，能夠定位內存泄漏緣由。

Application

顯示各類瀏覽器儲存狀況，好比local storage， Session Storage，cookie。 查看網站儲存了用戶的哪些信息。

Security

查看安全證書，鏈接是否安全。

Audits

網站性能的總結，整合了google自家的Lighthouse功能。基於平均水平的網絡速度和設備性能做出的評估。

深刻各個面板

編輯 Editing

元素和樣式

咱們能夠點擊Elements面板中的HTML文本，作更改，也能夠點擊CSS屬性，作更改。

在Elements面板，按住option點擊展開一個元素節點的箭頭會展開當前節點下的全部子節點。

在Elements面板，咱們長按一個節點能夠移動該節點在DOM樹中的位置。

右鍵一個DOM節點，選擇Scroll into view，能夠迅速找到頁面中節點的位置。

選擇一個DOM節點，按「H」隱藏這個節點，調整的是visibility屬性。若是visibilty在CSS中被標記了!important則不能被隱藏。按「delete」刪除這個節點，ctrl+z撤銷刪除。

在Style面板中，咱們按住Shift點擊一個顏色塊，咱們能夠更改顏色的表達格式，在HEX，RGB，HSL間切換。

在Style面板中，咱們能夠左鍵點擊一個顏色塊，調出調色板。這個調色板有一個最大的好處就是裏面老是保存了Material Design的配色,方便了開發者選擇顏色。

在DOM樹中選擇一個節點，在右邊樣式面板中點擊:hov，能夠選擇強制觸發各類鼠標事件，方便開發者檢查觸發事件時的CSS屬性。

元素節點

有的時候咱們會發現一個元素節點有好幾個CSS選擇器，好比瀏覽器有默認樣式，你本身寫了一個樣式，你又用了一個CSS庫好比Bootstrap加了另外一個樣式。咱們能夠點擊Computed面板，來檢查最後有用的樣式是哪些。

在Event Listeners面板中，咱們能夠觀察該節點的全部事件。若是咱們點擊旁邊的JS文件名，會跳轉到Source面板展現事件處理函數的實現代碼。

當Source面板中的代碼格式是被壓縮過的時候，咱們點擊左下角的大括號{}「Pretty Print」按鈕，能夠美化代碼樣式。

DOM斷點。右鍵點擊一個元素節點，選擇Break On。咱們有三種Debug的選擇，爲何這個節點被刪除(node removal)，爲何這個節點的某種屬性發生了變化(attribute modification)，或者爲何這個節點的子節點發生了變化(subtree modification)。當代碼觸發斷點的時候，Sources面板會自動打開，展現引起節點變化的具體代碼。

更改本地文件

在Sources面板中，選擇Filesystem面板，咱們能夠打開本地的workspace。而後咱們再前往Elements面板中調試CSS樣式，會發現一些CSS文件圖標被標上了綠色圓點，這就表示如今咱們在Devtool作的調試，本地的文件也會被更改，Sass也有用，可是使用webpack的項目不必定支持這個功能。

可是在Elements面板左邊的DOM樹中作更改，不會改變本地的HTML文件。由於DOM樹只是瀏覽器根據咱們寫的HTML生成的，並無直接更改HTML文件的能力。若是咱們想要更改HTML和JS文件，咱們能夠在Sources面板中作到，就像使用文本編輯器同樣。

選擇元素歷史

在Elements面板中左鍵點擊選擇一個節點，而後進入Console面板，輸入:

$0

就會返回剛纔最近選擇的一個節點。以此類推，$1會返回第二近選擇的一個節點。

說到$符號，Console裏也可使用相似Jquery的$選擇器,輸入$,按回車，就會返回Jquery選擇器函數。

調試 Debug

小技巧：在開發者工具的任意麪板按ctrl+shift+P，咱們能夠打開一個命令行，裏面有不少經常使用Dev Tool操做。方便開發者少用鼠標。而在Sources面板中ctrl+P是打開具體文件。

斷點

在Sources面板中打開一個JS文件，咱們能夠在代碼中加入

debugger;

來打斷點。咱們還能夠直接點擊代碼行數來打斷點，行數會變藍。當代碼運行到斷點的時候，咱們會在調試操做面板中看到「Paused on breakpoint「的提示。注意斷點是在該行代碼執行前斷而不是以後。

除了常見的Step over, Step into功能按鈕，咱們還有一些其餘面板。

• Watch 咱們能夠在Watch中添加任何變量。能夠觀察該變量在當前斷點的做用域中是defined仍是undefined。
• Call Stack 顧名思義，觀察這個斷點發生以前，被調用過的函數。
• Scope 觀察當前做用域中咱們全部能夠調用的變量。若是知道要具體看哪一個變量仍是用Watch比較方便。
• Breakpoints 告訴咱們目前可用的斷點。咱們能夠取消打勾來取消斷點。
• XHR/fetch Breakpoint 加入自定義請求斷點，在特定URL請求發生的時候打斷。而後能夠在Call Stack面板中找到涉及到這個請求的代碼文件。

Blackbox功能

當咱們使用不少庫的時候，好比React，d3.js。若是咱們在調試面板中看到了一些文件名屬於第三方庫，咱們能夠右鍵點擊而後Blackbox它。意思是咱們不須要看到第三方庫的代碼運行過程。在開發者工具的setting中，咱們能夠設置永久Blackbox名單。

條件性斷點

當一個函數被常常調用，可是隻在特定狀況下出錯的時候。咱們可使用條件性斷點。好比咱們只想要在ajax函數被傳入特定參數的時候纔打斷，而不是全部ajax call都打斷讓咱們看。咱們能夠右鍵點擊一個行數，選擇Conditional Breakpoint而後咱們能夠輸入參數條件。這種斷點，行數會變成黃色。

官方文檔
Chrome Developer Tool