JS谷歌浏览器断点调试

1、找到对应的文件

按F12打开网页调试工具，默认打开的是Elements，显示的是网页标签元素。选择Source，在左侧找到对应的js代码文件（这里是在page标签上找到的）

1.1、如何找到webpack打包后的文件

用 webpack 打包过后的项目，在本地服务器上运行时，它在 source 上隐藏得比较深，你可以在 top -> webpack://  目录下找到原代码文件，名字和你自己命名的文件名相同。

如上图，在 webpack:// 的目录下可以找到原代码文件（注意，不是在src目录下，而是在 webpack:// 根目录下）

 或者：

你也可以通过在代码文件上写 debugger 语句来打断点，代码会执行到该语句而停止，相当于在该文件的该位置上手动打了断点，并且 source 会自动定位出该文件。

参考：https://blog.csdn.net/feinifi/article/details/8