本文會忽略一些過於基礎的知識和細節 持續更新，歡迎關注~
本篇文章介紹Sources皮膚的使用，截圖如下：
左側皮膚
-
Page已載入的全部資源，以域名劃分資料夾。 -
Snippets程式碼片段，不會因為重新整理丟失，使用：新增=>儲存(ctrl+s)=>執行(Run)=>不用則移除(Remove)
注：以下了解即可
Filesystem & Overrides可以載入本地資料夾Content scripts擴充套件工具的指令碼，比如百度翻譯外掛等
js除錯
大家都會用的就略了...
右鍵行號，可以看到其他除錯選單
-
Add conditional breakpoint條件斷點：選擇後讓你輸入一個表示式，這個表示式返回值決定這行程式碼會不會被暫停
-
Blackbox Script黑盒指令碼：跟程式碼時不會走的程式碼的內部，比如第三方框架。一般來說，正確的使用f10 f11 f12不需要使用這個
右側皮膚
-
Watch變數監察：新增個變數後會一直監察這個變數的值，當前作用域無值時顯示< not availble > -
Call Stack函式呼叫棧：略 -
Scope作用域：顯示斷點所在的作用域，級別劃分如下：
Local當前作用域 展開時作用域下的變數Closure (x)閉包作用域，x是函式名稱Script標籤作用域Global全域性作用域Window
-
Breakpoints斷點：略 -
XHR/fetch Breakpoints請求斷點：ajax和fetch請求都可以在這裡打斷點並在Call Stack顯示呼叫棧，很方便追蹤
-
DOM Breakpoints這裡列出的就是上篇中html的斷點 -
Global Listeners全域性監聽器：指的是繫結在 window 物件上的事件 -
Event Listeners Breakpoints所有事件的斷點：勾選指定型別，比如Mouse/click，則所有的click事件都會被斷住