使用偵錯器語句進行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"來實現你的需求。