使用调试器语句进行Vue 2生产代码调试

Question

我想要能够检测用户是否在我的Vue 2 webapp中打开了开发者工具。 我使用@vue/cli 5.0.8以默认配置创建和构建应用程序。

我找到了这段代码，应该能解决问题 -

const minimalUserResponseInMilliseconds = 100;
const before = Date.now();
debugger;
const after = Date.now();
if (after - before > minimalUserResponseInMilliseconds) {
  //Action
}

我的问题是，Vue的默认生产构建会从代码中清除debugger语句。

有没有选项可以保留这个特定的debugger关键字？或者甚至保留所有debugger语句不变？

我尝试将以下内容添加到我的Vue.config中，但debugger仍然被移除了

configureWebpack: {
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_debugger: false // 用于检查用户是否打开了开发者工具

任何帮助将不胜感激，谢谢！

Answer 1

也许你可以使用"outHeight,outWidth/innerHeight,innerWidth"来实现你的需求。