如果能多瞭解一些chrome開發者工具調試技巧/功能對於平時開發很與幫助，在實際項目中多使用這些功能，提升自己的工作效率。這裡教你使用chrome開發者工具Sources面板功能，還不會的小夥伴趕緊看過來；
工具/原料
chrome
直接修改js進行調試
在Sources面板中，連js都可以直接修改。主要是在設置斷點(breakpoint)進行單步調試時用的;
ctr+shift+i或者F12打開開發者工具；
打開sources面板;直接給某行js代碼設置斷點。
刷新頁面後，程序就會停在斷點設置的那一行上。
然後我們就可以在斷點那一行代碼的後面添加我們自己的debug代碼了，例如下面這樣：
按下快捷鍵Ctrl + s保存，發現該面板變紅了，即表示保存生效：
此時利用快捷鍵F10，就能最終看到剛剛添加的debug代碼的效果了：
由於單步調試只能往下走而不能回頭，如果要重新測試的話就要刷新頁面，但刷新頁面會導致剛剛保存的調試代碼消失，恢復到線上版本的代碼
在單步調試過程中直接查看變量
查看變量值的方法還是有很多的，下面列舉兩種常用的
1、通過Sources - Watch面板，在這裡設置想要監控的變量，隨著單步調試的進行，這些被監控的變量的值也會隨之更新。
2、通過console打印變量，除了在代碼裡寫console.log()外，其實是可以直接在單步調試的過程中直接用console來打印的，例如下圖：
除了上述的這兩種方法，還有更簡單的方法：在單步調試的過程中，直接把鼠標移到想查看的變量，然後就會彈出個小框把變量的值給顯示出來啦：
