斷點，調試器的功能之一，可以讓程序中斷在需要的地方，從而方便分析。也可以在一次調試中設置斷點，下一次只需讓程序自動運行到設置斷點位置，便可在上次設置斷點的位置中斷下來，極大的方便了操作，同時節省了時間。
簡單地說，斷點調試是指自己在程序的某一行設置一個斷點，調試時，程序運行到這一行就會停住，然後你可以一步一步往下調試，調試過程中可以看各個變量當前的值，出錯的話，調試到出錯的代碼行即顯示錯誤，停下。
Sources面板
Sources面板是chrome developer tool中的斷點調試面板。我們打開Sources面板後其實會在界面中看到如下內容，我們逐一看下都是什麼意思：
1.左上藍色模塊
網站文件目錄樹
2.右上黃色模塊
左側所選文件的具體內容展示區
3.右下綠色模塊
這一模塊有兩個可切換區域
- scope : 顯示當前斷點的作用域
- watch : 點擊+號可添加你所需要監控的變量或者表達式
4.左下紅色模塊
主要核心功能區
- Call Stack : 顯示當前斷點的環境調用棧
- Breakpoints : 當前js斷點列表，添加的每個斷點都會出現在此處，點擊列表中斷點就會定位到內容區的斷點上
- DOM Breakpoints : 當前DOM斷點列表
- XHR Breakpoints : 當前XHR斷點列表，可點擊右側+添加斷點
- Event Listener Breakpoints : 事件監聽器斷點設置處
- Event Listeners : 當前事件監聽斷點列表
設置斷點
斷點調試的首要條件當然是添加斷點，js斷點添加的方式有兩種：
1.JS斷點
- Sources斷點
Sources斷點添加的流程是“F12（Ctrl+Shift+I）打開開發工具”———