0

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!

Haim
  • 321
  • 1
  • 10
  • @EstusFlask I Added more info regarding my build. And I do understand your concern, my web app is used to assess job candidates online, I believe some are trying to mess with the app so I want to check it out. I trigger the debugger only once, if you continue the code execution, it won't bother you again. Regarding debugging the app in production, the debugger is only for certain states, and I do have some url param for disabling the debugger from being triggered. – Haim Jun 28 '23 at 10:46
  • @EstusFlask, regarding the multiple ways to overcome, I understand you can silent breakpoints and it won't trigger the debugger, but since most users won't think of silencing before seeing there is a debugger statement, even if you reload, at least I will be able to know the page has been reloaded. It's not perfect, but it is the best I could come up with – Haim Jun 28 '23 at 10:48
  • There's no Vue-cli 9, please, fix it, just show the relevant dev packages from package.json. I see. It's flaky for dev tools detection as can be easily avoided with proper motivation and no measures can prevent a user from messing with your client code, but it's up to your case if it's ok – Estus Flask Jun 28 '23 at 11:07
  • Fixed, thanks. I know it's flaky, I don't trust it as a protection, just to give me more info for errors that I think are caused by users misbehavior – Haim Jun 28 '23 at 11:35
  • Makes sense then. It's supposed to look exactly this way https://stackoverflow.com/questions/72964536/terser-plugin-doesnt-run-with-vue-cli-5-on-vue-build , it differs in some places from what you posted. If this doesn't help, check if other options affect the output like drop_console, as well as disabling a minimizer at all – Estus Flask Jun 28 '23 at 12:13
  • @EstusFlask You mean the defineConfig, right? This doesn't work well for me since my config function is async, and everything else works without it, so I'm not sure wether this is really the problematic area. I'll try it if I won't get any other answers. Thanks!! – Haim Jun 28 '23 at 13:33

1 Answers1

0

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

Haoyiwen
  • 1
  • 1
  • This is not enough since user can change the window size unexpectedly and it will look like devtool is opened. and if the devtool is undocked, it will not cause any resize to the window – Haim Jun 28 '23 at 10:40
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 29 '23 at 20:49