1、Vue项目,配置修改:
打开config/index.js文件, 修改source map属性,从cheap-module-eval-source-map改为source-map
2.编辑调试配置,新建JavaScript调试配置,并设置要访问的url,以及Remote url配置
在URL处填写: http://localhost:8080( 具体的端口看自己的程序写的是监听哪一个)
在src的Remote url处填写: webpack:///src
3.启动server,可以使用WebStorm npm scripts中双击start启动server, 也可以在命令行中执行命令npm run start启动server
4.点击debug,调试DebugTest,这时候会打开chrome,如下图所示 :
5、当我们在chrome中运行vue,WebStorm就会响应断点状态,如下图所示: