需求

最近领导看见一个好像挺能装逼的玩意，于是在群里发了截图，然后就想让我们也做一个一模一样的玩意，效果如下图：

当用户点击F12，页面就会出现断点，然后点击出现页面空白，就这么简单？

思路

这里一眼可以看见，就是利用debugger来完成的，至于怎么使用debugger完成呢？直接写在代码里面就可以？那怎么监听用户是否打开了调试模式？直接把debugger写到代码里面会不会造成我们网页无法正常使用？
有时考虑太多都是多虑，做编程就需要多实践，实践出真理嘛。于是我上手敲一遍，然后发现只要不打开调试模式，其实代码不会执行debugger的操作，只要按了F2代码运行到debugger就会被暂停，然后就可以看见debugger的附近内容
但是我们应该怎么判断用户是否打开了调试模式呢？刚开始，我也只是想到窗口大小变动的时候执行下代码从而实现断点，但是是否合理？当用户点击断点下一步，可能就会跳过当前debugger就失去了你想要的拦截效果，或者用户打开了调试模式刷新下页面也无法监听到窗口变化，所以这里就需要一个定时器，专门用来循环监听是否debugger的。
为什么我们要用定时器做debugger？主要是因为我们不知道什么时候打开调试，同时可以阻止用户点击bebugger跳过后，对拦截无效，使用定时器目前是比较好的拦截办法，打开调试模式就无限循环debugger，就算等他点击也不能点击完。
我们知道打开调试模式了怎样才能把页面内容隐藏？我们可以使用时间戳来判断，因为每次debugger都会暂停代码执行，我们只需要debugger前和后new一个时间戳，两者相减差值大于50就说明debugger了，这个值可以更加自己认为的设置，从而去控制页面隐藏你想要的内容或者显示你想要的内容即可。

代码教程

!function() {
  var timelimit = 50;
  setInterval(function() {
    var starttime = new Date();
    debugger ;if (new Date() - starttime > timelimit) {
      window.stop();
      $("#app_open_hiden").hide();
      $("#error").show();
      $("#error").html("\u7cfb\u7edf\u68c0\u6d4b\u975e\u6cd5\u8c03\u8bd5\u002c\u8bf7\u5237\u65b0\u91cd\u8bd5\u0021")
    } else {
      $("#app_open_hiden").show();
      $("#error").hide();
    }
  }, 500)
}();

注意事项

debugger代码不要写在你的业务逻辑中去，不然很容易被人发现你debugger附近的代码逻辑
debugger代码可以自己加密混淆等，变得复杂或者不容易看懂为佳
其实使用浏览器窗口大小和页面窗口大小比较页是做是否打开调试模式，但是把调试模式和浏览器分离打开就无法监听了
其实线上也有被人写的npm包监听用户是否打开调试模式：devtools-detect

破解debugger

其实懂得玩debugger的人都知道，怎么让debugger没有还过手之力，那就是点击禁止debugger的一个符号即可，整个页面不在出现debugger，点击箭头变蓝色刷新下页面即可无debugger，如下图

如何使用debugger拦住Ta人查看你的接口及怎样破解debugger拦截？

需求

思路

代码教程

注意事项

破解debugger