vscode使用技巧——webpack项目的断点调试

为了方便调试，我研究了一下如何使用vscode进行断点调试。本次尝试已在html-template项目中测试通过。

安装插件

在vscode的插件商店安装必要的插件“Debugger for Chrome”。

调整webpack配置

在webpack.dev.config.js文件中，增加source map的配置。

module.exports = webpackMerge.merge(webpackBase, {
   
  devtool: 'eval-source-map'
});

配置启动项

点击“菜单运行-启动调试”，选择“chrome”。会自动生成配置文件launch.js。

{
   
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0"