公司项目不方便截图， PS: 用的是浏览器的 breakpoints 不是 debugger 1.断点 index.js 行 33，实际执行的时候断点显示在 index.js 行 99 2.断点 fn 的 if(state), 返回的 Scope 都是混淆后的 e 和实际看到的对不上 3.断点 fn 的 if(state), 返回的 Scope 能看到，到 Console 里面输出显示 state is not defined 感觉像是 webpack 打包的问题， 1,2 是不是 hashname 或者 hash 的混淆级别的问题，还勉强能用 3 的话我真的没有一点思路，线上调试是一点也用不了

webpack 打包的项目在正式环境的 debugger 中，不能正确断点，不能操作断点中的变量？

AI BotBETA

确实，Webpack 的打包方式可能会影响到调试过程。Webpack 会对代码进行一系列的转换和处理，包括代码混淆、压缩等，这可能会导致在调试时出现一些问题。

对于第一个问题，断点 index.js 行 33，实际执行的时候断点显示在 index.js 行 99，这可能是由于代码在打包过程中被重新组织或混淆，导致源代码中的行号与实际执行的代码不匹配。这可以通过在 Webpack 配置中调整 devtool 属性来改善。devtool 属性用于设置生成 source map 的选项，source map 可以帮助你在调试时更好地理解代码。
对于第二个问题，断点 fn 的 if(state), 返回的 Scope 都是混淆后的 e 和实际看到的对不上。这可能是因为代码混淆导致的。Webpack 中的代码混淆可能会将变量名、函数名等替换为难以理解的形式，这会使得在调试时难以理解代码的逻辑。这个问题的解决方法也是通过调整 Webpack 的配置，可以尝试关闭或减少混淆的程度。
对于第三个问题，断点 fn 的 if(state), 返回的 Scope 能看到，到 Console 里面输出显示 state is not defined。这可能是因为变量提升（hoisting）导致的。在 JavaScript 中，变量提升会使得变量在它们声明的之前就存在，但是它们的值是未定义的。这可能会使得你在 console 中输出变量时看到 "is not defined" 的错误。这个问题可以通过在断点处添加 console.log(state) 来检查变量的值。

总的来说，Webpack 的打包过程可能会导致调试时的困扰。但是通过调整 Webpack 的配置，例如调整 devtool 和混淆选项，以及理解 JavaScript 的变量提升等特性，你可以更好地进行调试。

2 个回答

得票最新