intellij-idea+vue前端调试配置

在IntelliJ IDEA中进行Vue前端调试，你需要设置Webpack服务器和Chrome作为浏览器，并配置相应的断点。

1. 设置Webpack服务器:

   • 在package.json中找到scripts部分，确保有dev或类似用于启动Webpack的脚本。
   • 在IDEA中打开Run -> Edit Configurations，点击 + 添加 JavaScript Debug。
   • 在新建的配置中设置 URL 为你的应用的地址，通常是 http://localhost:port/index.html，端口号与webpack-dev-server启动时设置的一致。
   • 设置WebSocket的端口，确保与webpack-dev-server的端口匹配。
   • 应用并关闭设置窗口。

2. 配置Chrome浏览器:

   • 在Run -> Edit Configurations中，选择刚才创建的JavaScript Debug配置。
   • 在Browser选项卡中，选择Google Chrome。
   • 在Additional Chrome flags中，添加--remote-debugging-port=9222（如果你使用的是Chrome 69及以上版本）。

3. 设置断点:

   • 在你的Vue组件文件中设置断点。

4. 启动调试:

   • 点击IDEA中的运行按钮或使用快捷键开始调试。
   • 在Chrome中打开设置的URL，执行到有断点的代码行时，IDEA会自动进入调试模式。

确保你的Chrome浏览器版本支持远程调试，并且你的防火墙设置允许IDEA与Chrome通信。