2021-05-12 14:32:11
教你使用chrome開發者工具Sources面板功能
2019-12-19 15:03:07
如果能多瞭解一些chrome開發者工具偵錯技巧/功能對於平時開發很與幫助，在實際專案中多使用這些功能，提升自己的工作效率。這裡教你使用chrome開發者工具Sources面板功能，還不會的小夥伴趕緊看過來；
1
在Sources面板中，連js都可以直接修改。主要是在設定斷點(breakpoint)進行單步偵錯時用的;
ctr+shift+i或者F12開啟開發者工具；
開啟sources面板;直接給某行js程式碼設定斷點。
2
重新整理頁面後，程式就會停在斷點設定的那一行上。
3
然後我們就可以在斷點那一行程式碼的後面新增我們自己的debug程式碼了，例如下面這樣：
4
按下快捷鍵Ctrl + s儲存，發現該面板變紅了，即表示儲存生效：
5
此時利用快捷鍵F10，就能最終看到剛剛新增的debug程式碼的效果了：
由於單步偵錯只能往下走而不能回頭，如果要重新測試的話就要重新整理頁面，但重新整理頁面會導致剛剛儲存的偵錯程式碼消失，恢復到線上版本的程式碼
1
檢視變數值的方法還是有很多的，下面列舉兩種常用的
1、通過Sources - Watch面板，在這裡設定想要監控的變數，隨著單步偵錯的進行，這些被監控的變數的值也會隨之更新。
2、通過console列印變數，除了在程式碼裡寫console.log()外，其實是可以直接在單步偵錯的過程中直接用console來列印的，例如下圖：
2
除了上述的這兩種方法，還有更簡單的方法：在單步偵錯的過程中，直接把滑鼠移到想檢視的變數，然後就會彈出個小框把變數的值給顯示出來啦：
相關文章