Vue 2 production code debugging using debugger statements

Question

I want to be able to detect if the user has the developer tools opened in my Vue 2 webapp. I created and built the application using @vue/cli 5.0.8 with default configuration.

I found this code, it should solve the problem -

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

My problem is that the default production build of Vue cleans debugger statements from the code.

Is there any option to keep this specific debugger keyword? Or even leave all debugger statements unchanged?

I tried adding the following to my Vue.config but the debugger was still removed

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

Any help would be greatly appreciated, thank you!

Answer 1

Maybe you can use "outHeight,outWidth/innerHeight,innerWidth" to achieve your needs.