2018-6-28更新:
其實有更好的替代方式
首先上面的方式能夠直接用js 中debugger命令來敲斷點 瀏覽器執行到這裏時自動跳出斷點
其次瀏覽器能夠安裝一些react-developer-tools 或者vue-devtools等。方便好用。。。vue
如下爲原文java
用過eclipse的人必定會以爲在該編譯器java的debug模式很是舒服,那麼咱們如何調試本身寫好的js代碼呢?其實谷歌瀏覽器就自帶了這個功能。
這裏就不贅述 網上搜索使用Chrome調試JavaScript一一搜一大把,功能介紹很詳細。簡單說明下:就是當你在你的頁面上按F12打開調試控制檯,在source中找到本身的js代碼,代碼左側能夠單擊添加斷電,顯示爲藍色箭頭react
當你運行到這裏時就會觸發斷電等待你的指示進行操做。瀏覽器上方會出現工具條webpack
其中按f10經過單步步入的方式進行調試;
其實咱們用webpack打包後的代碼也是js代碼理論上來講也一樣能夠用這種方式進行調試, 可是因爲大量js代碼被打包成一個文件咱們並不能知道代碼哪是哪,這個時候我麼就用必定的小技巧就好啦,咱們先在咱們想要斷電的附近加上一個console.log('something');而後經過點擊控制檯自動跳轉過去,如圖所示:web
控制檯報的信息都會跟上文件位置的 這個位置能夠點擊 點擊後自動跳轉到source界面中這個位置,就能夠輕鬆找到想要找到的位置。瀏覽器