This is my participation 8 The fourth of the yuegengwen challenge 3 God , Check out the activity details ： 8 Yuegengwen challenge

People go high , The water flows down

demand

Recently, the leader saw a thing that seems to be very powerful , So I sent a screenshot in the group , Then we want as like as two peas , The effect is as follows ：

When the user clicks F12, A breakpoint appears on the page , Then click to display a blank page , It's that simple ？

Ideas

• Here you can see , Is the use debugger To complete , As for how to use debugger It's finished ？ Just write it directly in the code ？ How to monitor whether the user has turned on debugging mode ？ Put... Directly debugger Will writing to the code cause our web page to be unable to use normally ？
• Sometimes thinking too much is thinking too much , Programming requires more practice , Truth comes from practice . So I hit it again , Then I found that as long as you don't turn on debugging mode , In fact, the code will not execute debugger The operation of , Just press F2 The code runs to debugger Will be suspended , Then you can see debugger Nearby content
• But how should we judge whether the user has turned on debugging mode ？ At first , I just want to execute the code to realize the breakpoint when the window size changes , But is it reasonable ？ When the user clicks the breakpoint, next , May skip the current debugger You lose the interception effect you want , Or when the user opens the debug mode, the page can't listen to the window changes when the page is refreshed , So here we need a timer , It is specially used to loop monitor whether debugger Of .
• Why do we use timers to do debugger？ Mainly because we don't know when to open debugging , At the same time, it can prevent users from clicking bebugger After the jump , Invalid for interception , Using timer is a better interception method at present , Turn on debug mode and loop indefinitely debugger, Even if he clicks, he can't finish clicking .
• We know how to hide the page content when debugging mode is turned on ？ We can use time stamps to determine , Because every time debugger Will pause code execution , We just need debugger Before and after new A timestamp , The difference between the two subtractions is greater than 50 Just explain debugger 了 , This value can be set more as you think , So as to control the page to hide the content you want or display the content you want .

Code tutorial

!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)
}();
 Copy code 

matters needing attention

• debugger Don't write code in your business logic , Otherwise, it's easy to be found that you debugger Nearby code logic
• debugger The code can be encrypted and confused by itself , It's better to become complex or difficult to understand
• In fact, using browser window size and page window size to compare pages is to do whether to open debugging mode , But if you separate the debug mode from the browser, you can't listen
• In fact, some people wrote it online npm The package monitors whether the user turns on debugging mode ：devtools-detect

Crack debugger

Actually know how to play debugger Everyone knows , How to let debugger Not yet , That is to click prohibit debugger Just one symbol of , The whole page doesn't appear debugger, Click the arrow to turn blue Refresh the next page and there will be no debugger, Here's the picture