chrome devtools使用進階——Sources

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

本篇文章介紹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