系统环境:Windows10 企业版
开发工具:Webstorm 2019.3.3
一、安装Chrom插件
在Chrom中安装 JetBrains IDE Support插件,并设置端口号
二、修改配置参数
修改vue.config.js文件中的 devtool 参数,改为 source-map
三、修改Webstore配置
设置Debugger端口号与Chrom插件端口号一致
四、设置 Run / Debugger Configuration
注:其中的 package.json 指向项目的目录下对应的 package.json 文件
其中URL:为 npm server 启动后指定的访问地址,如下图所示:
五、调试应用程序
1、先启动 npm server
2、再启动 Javascript Debug
启动 Javascript Debug 后,会自动打开Chrome,此时就可以在需要调试的代码处打断点了