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

遇到这种情况，首先检查是不是某些第三方库自带了 debugger 语句。我之前也踩过这个坑，有些开源库为了调试方便会保留这些代码。

既然你说已经设置了 terser 的 drop_debugger 为 true，但问题依然存在，那可能是配置没生效。建议你直接在 webpack 配置里这么写：

optimization: {

  minimize: true,

  minimizer: [

    new TerserPlugin({

      terserOptions: {

        compress: {

          drop_debugger: true,

          pure_funcs: ['debugger']

        }

      }

    })

  ]

}

记得清除缓存重新打包看看效果。另外别忘了升级到最新版本的 terser 和 webpack，有时候新版本会修复这些问题。

说到 CSS，那段样式确实和 debugger 没关系，不过 debug-overlay 这个类名倒是挺有意思的，可能你们项目组有人专门做了防调试相关的功能？总之先把 js 的问题解决了再说吧，搞这些东西真是费脑子。

遇到这种情况确实挺让人头疼的。首先，官方文档里说 terser 的 drop_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 语句是否还会出现在最终的文件中。希望这些信息对你有帮助。