如何调试webpack打包后的js代码

2018-6-28更新:
其实有更好的替代方式
首先上面的方式能够直接用js 中debugger命令来敲断点 浏览器执行到这里时自动跳出断点
其次浏览器能够安装一些react-developer-tools 或者vue-devtools等。方便好用。。。

如下为原文

---

用过eclipse的人必定会以为在该编译器java的debug模式很是舒服，那么咱们如何调试本身写好的js代码呢？其实谷歌浏览器就自带了这个功能。
这里就不赘述 网上搜索使用Chrome调试JavaScript一一搜一大把，功能介绍很详细。简单说明下：就是当你在你的页面上按F12打开调试控制台，在source中找到本身的js代码，代码左侧能够单击添加断电，显示为蓝色箭头

当你运行到这里时就会触发断电等待你的指示进行操做。浏览器上方会出现工具条

其中按f10经过单步步入的方式进行调试；
其实咱们用webpack打包后的代码也是js代码理论上来讲也一样能够用这种方式进行调试， 可是因为大量js代码被打包成一个文件咱们并不能知道代码哪是哪，这个时候我么就用必定的小技巧就好啦，咱们先在咱们想要断电的附近加上一个console.log('something');而后经过点击控制台自动跳转过去，如图所示：

控制台报的信息都会跟上文件位置的 这个位置能够点击 点击后自动跳转到source界面中这个位置，就能够轻松找到想要找到的位置。