使用Webstorm和Chrom调试Vue项目

系统环境：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，此时就可以在需要调试的代码处打断点了