本文會忽略一些過於基礎的知識和細節 持續更新，歡迎關注~

本篇文章介紹Sources皮膚的使用，截圖如下：

左側皮膚

---

1. Page 已載入的全部資源，以域名劃分資料夾。

2. Snippets 程式碼片段，不會因為重新整理丟失，使用：新增=>儲存(ctrl+s)=>執行(Run)=>不用則移除(Remove)

   

注：以下了解即可

• Filesystem & Overrides 可以載入本地資料夾
• Content scripts 擴充套件工具的指令碼，比如百度翻譯外掛等

js除錯

---

大家都會用的就略了...

右鍵行號，可以看到其他除錯選單

1. Add conditional breakpoint 條件斷點：選擇後讓你輸入一個表示式，這個表示式返回值決定這行程式碼會不會被暫停

   

2. Blackbox Script 黑盒指令碼：跟程式碼時不會走的程式碼的內部，比如第三方框架。一般來說，正確的使用f10 f11 f12不需要使用這個

右側皮膚

---

1. Watch 變數監察：新增個變數後會一直監察這個變數的值，當前作用域無值時顯示< not availble >

2. Call Stack 函式呼叫棧：略

3. Scope 作用域：顯示斷點所在的作用域，級別劃分如下：

• Local 當前作用域 展開時作用域下的變數
• Closure (x) 閉包作用域，x是函式名稱
• Script 標籤作用域
• Global 全域性作用域Window

  

4. Breakpoints 斷點：略

5. XHR/fetch Breakpoints 請求斷點：ajax和fetch請求都可以在這裡打斷點並在Call Stack顯示呼叫棧，很方便追蹤

   

   

6. DOM Breakpoints 這裡列出的就是上篇中html的斷點

7. Global Listeners 全域性監聽器：指的是繫結在 window 物件上的事件

8. Event Listeners Breakpoints 所有事件的斷點：勾選指定型別，比如Mouse/click，則所有的click事件都會被斷住

參考連結

CompileYouth