Using debugger statement in Vue 2 production code

Question

I want to be able to detect if user has devtools open inside my Vue 2 webapp. I use @vue/cli 5.0.8 with default config for creating and building the app.

I found this piece of code that should do the trick -

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

My problem is that the default Vue build for production clears the debugger statement from the code.
Is there an option to leave this specific debugger keyword? Or even leave all of the debugger statements untouched?

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

configureWebpack: {
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_debugger: false // For checking if user opened devtools

Any help will be appreciated, thanks!

Answer 1

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