混淆后的代码里为什么还有 debugger 语句?

技术若彤 阅读 3

我用 webpack + terser 做了代码压缩和混淆,但打包后的 JS 里居然还能看到 debugger 语句,这不就等于给逆向的人留了断点入口吗?明明没在源码里写过这个啊。

是不是某些依赖包偷偷加的?或者混淆配置没生效?试过把 terser 的 drop_debugger 设成 true,但还是有。下面是我项目里一段相关的 CSS(虽然可能没关系,但贴出来以防万一):

.anti-debug {
  display: none;
}
.debug-overlay {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: red;
  z-index: 9999;
}
我来解答 赞 2 收藏
二维码
手机扫码查看
1 条解答
迷人的艳青
遇到这种情况确实挺让人头疼的。首先,官方文档里说 terserdrop_debugger 选项是用来移除代码中的 debugger 语句的。既然你已经设置了 drop_debugger: true,但 debugger 语句依然存在,可能是以下几个原因:

1. 检查一下项目的其他配置文件,确保没有覆盖或者重新设置了这个选项。
2. 查看你的项目依赖,有时候第三方库可能会包含 debugger 语句。你可以通过工具分析打包后的文件,找到 debugger 语句的具体来源。
3. 确认一下 terser 版本是否是最新的,旧版本可能存在一些 bug 或者默认行为不符合预期。

如果以上检查都没有发现问题,可以尝试在 webpack 配置中显式地指定 terserPlugin 的选项,确保 drop_debugger 生效:

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
// 其他配置...
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
drop_debugger: true,
},
}),
],
},
};


这样配置之后再重新打包,看看 debugger 语句是否还会出现在最终的文件中。希望这些信息对你有帮助。
点赞
2026-03-21 18:02