我不希望别人可以随意调试我的网站代码

起因

在某次爬虫（科学获取网站资讯数据）的时候，我打开了该网站的控制台，通过Network 和Sources 两个Tab选项，我发现很容易就调试出了它的接口请求参数，当时就整个一洋洋得意。
但是我转念一想，如果是我自己的网站，我不希望别人也可以这样轻而易举地调试我的页面，我应该怎么防止呢？

预防手段

在开发过程中，我们通常会在页面上打很多断点用来调试，我突发奇想，如果有人打开页面的控制台，我让他一直处于debugger当中，这样不就让他没法进行下一步了吗？

这个简单，几行代码的事情

(() => {
  setInterval(() => {
    debugger;
  }, 100);
})();

这段代码的作用是：通过一直处于debugger状态来阻塞你程序的执行，没办法在Source Tab中对js进行加断点，没办法继续调试程序的执行逻辑。
但是
Sources Tab选项中，我们可以添加Ignore List来过滤掉我们加的debugger

这样设置，页面中的debugger就不生效了…

但是，只要思想不滑坡，困难总比方法多

(() => {
  setInterval(() => {
    Function("debugger")();
  }, 100);
})();

Function生成的debugger会在每一次执行的时候都开启一个临时的js文件，而你的Ignore List只能遇到一次加一次，永远落后我的脚步😛

说干就干

既然这样，我不如直接写个webpack插件，给每个.js文件都加上这段话，岂不是美滋滋~

核心代码：

const { ConcatSource } = require('webpack-sources')

class AddDbugJs {
  constructor () {}

  apply (compiler) {
    compiler.hooks.afterCompile.tapAsync({
      name: 'AddDbugJs',
    }, (compilation, callback) => {
      let assetNames = Object.keys(compilation.assets)
      for (const name of assetNames) {
        if (name.endsWith('.js')) {
          let dbug = `setInterval(() => {(function () {return false;}["constructor"]("debugger")["call"]());}, 100);`
          compilation.updateAsset(
            name,
            old => new ConcatSource(old, '\n', dbug),
          )
        }
      }
      callback()
    })
  }
}

module.exports = AddDbugJs

在项目中使用它：

const AddDbugJs = require('add-dbug-js')
module.exports = {
  devServer: {},
  configureWebpack: {
    plugins:
      process.env.NODE_ENV !== 'production'
        ? []
        : [new AddDbugJs()],
  },
}

这就成了 🥳