如何调试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界面中这个位置，就可以轻松找到想要找到的位置。