本文介绍 WebStorm Debug 调试 Vue 项目

一、启动 Vue 项目

使用 npm run dev 启动项目

二、创建 JavaScript Debug 配置

1. 点击 Edit Configurations...

2. 新建 JavaScript Debug

3. 复制粘贴项目地址

4. 编辑Browser

5. 复制粘贴命令行参数

--remote-allow-origins=* 

然后点击 OK、OK、OK 一路保存

三、测试Debug

在函数里打个断点，访问页面，成功，如下图

四、注意的细节

    1、启动项目 npm run dev 不需要用 idea 的debug 按钮，运行就行；JavaScript Debug 需要运行 Debug 按钮

2、访问页面，必须要用 WebStorm 弹出打开的浏览器窗口才能调试，否则 Debug 无效