This is the 21st day of my participation in the More text Challenge. For more details, see more text Challenge

preface

Hi, everybody. Did you have a good Monday?

Today we’re going to talk about the browser console. As a programmer, you don’t want your code to be debugged over and over again. What if someone debugged a bug? What about malicious attacks by malicious people who get the interface information? Therefore, at this time JavaScript anti – censorship open console is very necessary ~

As you know, there are three ways to open the console,

  • F12
  • Right-click == to check
  • Browser == more Tools == Developer tools (Shortcut: CTRL + Shift + I)

Note that the first two can be prevented by code, but the last way to open the console cannot be prevented. So let’s start from this point of view, a good deal of the process ~

Prevent opening console

Stop it if you can, and kill the opening of the console in the first place

Block the F12 event

window.onkeydown = window.onkeyup = window.onkeypress = function (event) {  
    // Check whether to press F12. The F12 key code is 123
    if (event.keyCode = 123) {  
        event.preventDefault() // Prevent the default event behavior
        window.event.returnValue = false}}Copy the code

The effect is as follows (F12 press no reaction) :I can’t see any effect. Hey!

Blocking right-click events

Add custom events for the right click by disabling the OnContextMenu event that fires when the user right-clicks the mouse on an element and opens the contextmenu.

window.oncontextmenu = function() {  
    event.preventDefault() // Prevent the default event behavior
    return false  
}
Copy the code

The effect is as follows (right-click no reaction) :Still no sign of any effect. Hey!

JS Operation console

Although some of the ways to open the console are blocked, there are still some ways to open the console by using the developer tools (shortcut keys: CTRL + Shift + I), so we need to do some more work with the opened console

Periodically check for browser window changes

Using the fact that the browser window changes when the console is open, we can make the following listener:

let threshold = 160 // Open the console width or height threshold
window.setInterval(function() {  
    if (window.outerWidth - window.innerWidth > threshold ||   
    window.outerHeight - window.innerHeight > threshold) {  
        // Refresh the page if you open the console
        window.location.reload()  
    }  
}, 1000)
Copy the code

This is how it works (you can see that the page keeps refreshing when you open the console) :

Of course, if the user changes the console to hover window mode, the listener will not work, and the user may also touch the function when switching to a non-full-screen mode, so there is a slight drawback to this method, which can be supplemented.

Open the console popover window and enable debug debugging

Console box debug debugging, may be a lot of people do not understand, is actually quite simple function.

The debugger statement is used to stop execution of JS code and to call (if available) debug functions.

Using a Debugger statement is similar to setting a breakpoint in your code.

We can add the following code to the code to debug the debugger:

Debug debug

setInterval(function() {
    check()
}, 1000);
var check = function() {
    function doCheck(a) {
        if (("" + a / a)["length"]! = =1 || a % 20= = =0) {(function() {}
            ["constructor"] ("debugger") ()}else{(function() {}
            ["constructor"] ("debugger")())
        }
        doCheck(++a)
    }
    try {
        doCheck(0)}catch (err) {}
};
check();
Copy the code

(You can see that when you open the console, it becomes debug mode) :

The second type is debug

if(window.location.href.indexOf('#debug') = = -1) {setInterval(function(){(function (a) {return (function (a) {return (Function('Function(arguments[0]+"' + a + '() ")'))})(a)})('bugger') ('de'.0.0, (0.0))},1000)}Copy the code

The effect is as follows (same as the previous debug mode, you can see that when you open the console, you will change to debug mode) :

Although the console popover debug debugging is enabled, the console is still open. You can still view the relevant files and code, and you can clear the debug mode in the console again to perform some debugging. So is there a better way?

Open console prompt (can achieve jump URL or refresh)

function toDevtools(){

    let num = 0
    var devtools = new Date()
    devtools.toString = function() {
        num++;
        if(num>0){
            alert('Console open')
            // You can write refresh or jump logic}}console.log(devtools);
}
toDevtools()
Copy the code

The results are as follows:

The end scatter flowers!!

Afterword.

Today to share the content of the hope for your help, through the above code can listen to the console is open and subsequent logic operation, to prevent others to debug the code, in the practical application of the scene is more ~ today is I insist on more of the 21 days, had a little slow on Monday ~ a little bit of output every day, a little bit more. Where there is a will, there is a way. Come on, everybody

If this post helped you, keep an eye on big ice and give it a like

The list of more challenging articles is as follows:

  • Flex layout container elements and project elements attributes
  • 2021.06.02 how to play with CSS Gradient Background
  • How to Use SVG to create Text Effects along Arbitrary Paths
  • 2021.06.04 “Front-end code specification of 3 categories and 15 subcategories, let the team code be standardized!”
  • Git Commit Specification for team management: How many people don’t write commit records?
  • 2021.06.06 “How to Control CSS mouse Style and Expand mouse Click area | Weekend study”
  • 2021.06.07 “Pure CSS implementation: imitation gold mining account password login, the red panda wu eye action switch small Egg”
  • On Prototypes and Prototype Chains in 11 Aspects
  • A Closer Look at JavaScript scope and Scope Chains
  • What is a closure in JavaScript?
  • 2021.06.11 pure CSS Implementation: Cool Video Text Mask Effects
  • Apply a free API and use native JS to create typewriter-like vertical lines of text
  • Pure CSS implementation: Zebra stripes inside multi-line Text boxes
  • 2021.06.14 “Native JS implementation touch slide listening event”
  • 2021.06.15 “Native JS To achieve mouse wheel triggered page horizontal Scrolling”
  • 2021.06.16 “When the native JS realizes jump or refresh the page, the browser prompts that the current page is not saved”
  • 2021.06.17 “Three Basic Pop-ups of Native JS”
  • Pure CSS implementation: A button fixed at the bottom of the page
  • Pure CSS Implementation: Typewriter Animation for single lines of text
  • Pure CSS Implementation: How to Make a perfect parallelogram