[转]WebStorm用Debug模式调试Vue等前端项目

原文地址:WebStorm用Debug模式调试Vue等前端项目_webstorm怎么debug-CSDN博客

-------------------------------------

首先确保你的Vue项目能生成Source Map，这样断点才能准确映射到源代码上。

1.Webpack需要显式设置:

打开项目根目录下的 vue.config.js 文件（如果没有，可以创建一个）。

module.exports = {
configureWebpack: {
devtool: 'source-map' // 确保Webpack生成source map :cite[3]
}
}

2.vite默认开发环境启用,生产环境可以设置

// vite.config.js
export default {
  build: {
    sourcemap: true, // 生产环境构建时也生成 Source Map，便于生产调试
  },
  server: {
    // 开发环境默认启用 sourcemap，通常无需特殊配置
  }
}

检查 TypeScript 配置：如果你的项目使用 TypeScript，请确保 tsconfig.json 中的 sourceMap 选项设置为 true。

 其他说明:即使如此,有些项目也并无法命中断点,比如我现在的一个项目,按照deepseek等的建议,清除了各种缓存,检查了各种设置,仍然不行,这时候就只能手动了.

其他参考文章:

在 WebStorm 里调试 vue3 项目 - 灵火 - 博客园

WebStorm + Vite + Vue 断点调试（新手版）WebStorm下的Vite+Vue项目断点调试。 一定环 - 掘金

--------------------------------------

问题说明
开发前端时，一直很苦恼调试前端代码的麻烦。
简单的内容可以通过console.log()在控制台打印变量值，来验证预期结果。
涉及到稍复杂的逻辑，就需要在代码中侵入增加debugger，或者在浏览器中找到js文件，再手动添加断点。

非常的麻烦，而且浏览器中对变量的追踪功能也有限，同时我也一直好奇WebStorm中Debug启动方式的作用，今天研究了一下，果然WebStorm提供了更简单的调试方法，记录一下

WebStorm调试步骤
启动前端项目，我这里是Vue项目，执行npm run serve正常启动即可，启动成功控制台会打印前端服务地址和端口

新建JavaScriptDebug

配置调试脚本URL，设置URL为上面控制台打印的前端项目访问地址

启动调试脚本

开始愉快的调试

其他问题
跳转页面url为about:blank问题解决

按下图步骤操作

选择默认浏览器
--remote-allow-origins=*命令的作用是关闭浏览器的跨域限制
————————————————
版权声明：本文为CSDN博主「m0_74825409」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_74825409/article/details/144396438