如何在webstorm下进行vue项目的断点调试

文章目的:在webstorm下实现像java般的断点调试（从0开始搞起）

1.基本环境

• WebStorm 2017.3.3
• Google 版本 87.0.4280.66（正式版本） （64 位）
• Node.js v12.16.3
• @Vue/cli 4.3.1

2. 项目搭建

# 创建一个默认的vue项目
vue add testDebug
# 一直next

3.配置3步曲(端口要一致：重要）

• 第一步：配置webstorm的端口
  

• 第二步：配置debug的环境
  

• 第三步：谷歌浏览器安装插件，并配置端口

• 插件地址和密码S923: 下载地址
• 安装插件方式：把下载文解压->然后进入谷歌浏览器插件界面()打开开发者)->加载已解压的扩展程序->选择即可

4.启动和运行（3步走）

4.1 启动项目环境

4.2 启动调试环境（看到404不要慌）

4.3 关键一步（在这个地址框输入我们的项目地址：4.1启动之后的地址）

大功告成!!!