一、Chrome開發者工具面板整體介紹
1、右上工具欄
面板上包含了Elements面板、Console面板、Sources面板、Network面板、Timeline面板、Profiles面板、Application面板、Security面板、Audits面板這些功能面板，具體功能分配如下：
- Elements:查找網頁源代碼HTML中的元素,手動修改任一元素的屬性和樣式、實時反饋。
- Console:記錄開發者開發過程中的日誌信息，且可以作爲與JS進行交互的命令行Shell。
- Sources:斷點調試JS。
- Network:從發起網頁頁面請求Request後分析HTTP請求後得到的各個請求資源信息。
- Performanse:記錄並分析在網站的生命週期內所發生的各類事件，以此可以提高網頁的運行時間的性能。
- Memory:記錄JS CPU執行時間細節、顯示JS對象和相關的DOM節點的內存消耗、記錄內存的分配細節。
- Application:記錄網站加載的所有資源信息，包括存儲數據（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、緩存數據、字體、圖片、腳本、樣式表等。
- Security:判斷當前網頁是否安全。
- Audits:對當前網頁進行網絡利用情況、網頁性能方面的診斷，並給出一些優化建議。比如列出所有沒有用到的CSS文件等
2、小圖標
*點擊箭頭圖標，從網頁中選擇元素
*點擊phone/PC圖標，切換展示窗口，調整頁面上方的尺寸，可展示不同頁面，用於不同設備的屏幕適配調試
*右上更多選項，可以選擇控制檯展示位置
二、各工具細節介紹
此部分在 https://blog.csdn.net/m0_37438418/article/details/80702459 有非常詳細的介紹，故這裏只簡單羅列一下以及補充網頁沒有提及的部分
1、Element
① Style面板，可以實時修改CSS的屬性值，這裏面的所有樣式Name和Value都是可以編輯的;在每個屬性後面單擊可以添加新的樣式
② Computed面板，可以編輯左側選中的盒子模型參數，所有的值都是可以修改的;點擊不同的位置(top、bottom、left、right) 就可以修改元素的padding、border、margin屬性值。
③ Event Listeners 查看對應元素綁定的事件，可以對事件進行編輯和刪除
④DOM Breakpoints:給DOM元素設置斷點，監聽和查看某個元素的變化情況，如下設置好後，在這個頁面就會出現該DOM斷點，一旦要修改時，代碼會停下來
2、Console
控制檯輸出日誌，也可以進行demo測試，常用到的部分如下：
①除了常用的console.log,還有console.warn,警告信息，console.error錯誤信息，方便歸類
②控制檯交互，當在控制檯輸入命令，會彈出智能提示框，可以用tab自動完成當前的建議項
③可以選擇元素 jquery的方式，如下
④ 在console面板中輸入一些js語句換行回車總是會提交，解決辦法如下：
在sources面板，點擊雙箭頭，選擇Snippets,新建new snippet，在右側面板可以隨意進行js代碼編輯，然後點擊右下方Ctrl + Enter運行，即可將結果展示在下方控制檯。
⑥、表格輸出console.table 條件輸出console.assert 計數輸出console.count dom結點輸出console.dir 計時console.time & console.timeEnd 等可查看網頁
https://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.html
3、Sources面板
①查找響應的js源文件 文件太多，一下子找不到時，使用快捷鍵 ctrl + p （cmd+p on mac) ,就能快速搜尋和打開項目的文件
②js斷點調試
用的多，不贅述。基本用法：單擊行數設置斷點，右上控制小圖標控制繼續執行、單行執行，選擇變量或表達式右鍵單擊可選擇watch該結果，然後再右側面板可以看到Watch清單、Call Stack調用堆棧 ,Scope斷點的作用域以及所有的閉包作用域以及全局作用域、 Breakpoints信息
其他還有Dom斷點、XHR斷點、事件監聽器斷點，可見博客：
https://www.cnblogs.com/yzg1/p/5578363.html
4、Network 面板
Network面板主要包括5大塊窗格(Pane)：
- Controls 控制Network的外觀和功能。
- Filters 控制Requests Table具體顯示哪些內容。
- Overview 顯示獲取到資源的時間軸信息。
- Requests Table 按資源獲取的前後順序顯示所有獲取到的資源信息，點擊資源名可以查看該資源的詳細信息。
- Summary 顯示總的請求數、數據傳輸量、加載時間信息。
單擊請求Name可以查看具體的請求信息：請求頭、資源預覽信息、響應、cookie、生命週期耗時。
更具體的說明見 https://blog.csdn.net/m0_37438418/article/details/80702459
5、performance
可以對網頁進行操作，然後紀錄，展示過程中所有活動行爲信息，用來分析網頁的程序性能問題
- Controls 錄製開關和控制錄製過程中需要記錄哪些信息。
- Overview 網頁性能的概要信息。
- Flame Chart CPU堆棧軌跡的可視化圖表(火焰圖)。在圖表裏面有1到3條虛豎線。
- Details 當選擇一個指定的事件後，會顯示這個事件的更多信息；當沒有選擇事件時，會顯示指定的時間幀信息。
其中第二部分：
- FPS 每秒幀數(Frames Per Second)。綠色柱狀條越高，則每秒幀數越高。在FPS圖表上方的紅色塊是標記一個長幀。
- CPU 標記CPU資源的使用情況，這裏的面積圖標記着消耗CPU資源的各類事件。
- NET 各種顏色的柱狀條分別顯示一種資源。柱狀條越長，代表獲取這個資源的時間越長。
（目前還沒有涉及到網頁性能方面，更多的信息，可以再回頭查看參考網頁1介紹）
6、Profiles面板
利用這個面板你可以追蹤網頁程序的內存泄漏問題，進一步提升程序的JavaScript執行性能。
具體見參考網頁1
7、Application面板
記錄網站加載的所有資源信息，包括存儲數據（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、緩存數據、字體、圖片、腳本、樣式表等
如上所示，frames窗格中，頂級的top是一個主文檔，在top下面是主文檔的Fonts、Images、Scripts、Stylesheets等資源。最後一個就是主文件自身。
在資源上右擊後在彈出菜單選擇Reveal in Network Panel，就會跳轉到Network面板並定位到該資源的位置。
8、Security面板
通過該面板可去調試當前網頁的安全和認證等問題並確保您已經在你的網站上正確地實現HTTPS。
9、Audits面板
對當前網頁進行網絡利用情況、網頁性能方面的診斷，並給出一些優化建議。比如列出所有沒有用到的CSS文件等。
三、使用小Tips
1、source面板中，Ctrl+P（cmd+p on mac）,就能快速搜尋和打開你項目的文件
2、在Sources標籤中打開一個文件之後，按Ctrl + G，(or Cmd + L for Mac)，然後輸入行號，chrome控制檯就會跳轉到你輸入的行號所在的行。
3、Element 中編輯Style時，點擊顏色前面的小框，彈出選擇器，停留在頁面，指針會變成一個放大器，方便進行取色
4、單擊3中所說的顏色框，進行顏色表示方式的格式切換rgba、hsl和hexadecimal
5、選中單詞，按下Ctrl + D ,下一個匹配也會被選中
6、瀏覽器在構建如文本框、按鈕和輸入框一類元素時，其它基本元素的視圖是隱藏的。不過，你可以在瀏覽器中設置圖標Settings -> General 中切換成Show user agent shadow DOM，這樣就會在元素標籤頁中顯示被隱藏的代碼。
附：參考引用的源網站包含如下：
1、Chrome開發者工具詳解
https://blog.csdn.net/m0_37438418/article/details/80702459
注：圖文並茂，對每一個面板的使用都進行了詳細的介紹和引例
2、network面板介紹
https://blog.csdn.net/xiaoyida11/article/details/52674792
3、各類斷點調試的方式
https://www.cnblogs.com/yzg1/p/5578363.html
https://www.cnblogs.com/lurensang/p/6515080.html
4、使用技巧
https://www.cnblogs.com/liyunhua/p/4544738.html
5、酷炫的console控制檯
https://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.html
注：玩轉console臺，可以輸出各種分類的、帶樣式甚至動畫效果的信息到控制檯
其他
https://blog.csdn.net/gl0ry/article/details/53915199