簡單複習各個面板
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然後我們可以輸入參數條件。這種斷點，行數會變成黃色。