为了防止别人调试代码，禁止打开控制台。

转载:
https://segmentfault.com/a/119000021459140

1.禁止右击源代码和F12。

//禁止F12键盘事件document.addEventListener('keydown', function(event){ return 123 != event.keyCode || (event.returnValue = false)});//禁止右键、选择、***document.addEventListener(‘'contextmenu'’, function(event){ return event.returnValue = false})

破解:也可以使用浏览器菜单中的开发者工具打开控制台。

2.通过页面宽度变化监控控制台

浏览宽度和高度变化监控主要监控浏览器可视区域的宽度和高度之差:window . inner width/window . inner height(滚动条和内容区)和浏览器的宽度和高度:window . outer width/window . outer height(工具栏的宽度和高度是在inner的基础上增加的)。

因为我们不知道浏览器是否打开了工具栏，也不知道工具栏的宽度和高度，所以我们设置了一个阈值，比如200。如果outer-inner值大于200，我们认为控制台已打开。

function resize(){ var threshold = 200; var widthThreshold = window.outerWidth - window.innerWidth > threshold; var heightThreshold = window.outerHeight - window.innerHeight > threshold; if(widthThreshold || heightThreshold){ console.log('控制台打开了') }}window.addEventListener('resize', resize);resize()

关于检测窗口大小，有人专门为此写了一个库:
https://github.com/sindresorh …有兴趣的可以看看。

破解:监控浏览器宽度和高度的缺点非常明显，因为这种监控只能针对嵌入式控制台，但是很多浏览器都支持独立的窗口控制台。

3.使用控制台功能将对象重写为字符串。

对于某些浏览器，如果控制台输出一个对象，则保留该对象的引用。每次打开控制台时，如果对象类型是函数、日期等。(以前有regexp，现在无效了)，再次调用对象的toString()方法，返回的结果打印在控制台上。

经过测试:1)、先声明对象，再重写toString，最后打印对象，那么toString会在开头再运行一次，所以可以用计数器来判断哪个时间有效。2)，先声明对象，再打印对象，最后重写toString，那么如果初始化时控制台是打开的，就不会检测到此时的状态。3)，先声明对象，再重写toString，最后打印对象，但不把对象作为第一个参数，这样就可以成功监控每一个控制台状态。4)、console.log、console.info、console.error等。都有效。5)，只在chrome内核浏览器有效，firefox和ie无效。

var devtools = new Date(); //function(){};devtools.toString = function() { console.log('控制台打开了'); //或执行一段死循环 window.open("about:blank", "_self"); }console.log('', devtools);

破解:可以通过标签注入js代码clear 空控制台(添加一个网页标签，URL为JavaScript:console . clear()；，进入网页后，点击标签页运行里面的代码)。如果定时器执行上述代码，就需要重写clear空控制台(JavaScript:console . clear())；for(控制台中的变量k){ if(控制台类型[k]= = ‘函数’){ console[k]= function(){ } }；)。

4.使用控制台功能来监视dom属性。

大部分浏览器打印dom元素时，如果控制台关闭，不会获取元素的属性，但如果控制台打开，会自动获取dom的属性，从而触发**事件。

function observerConsole(){ //这里使用dom元素，在打开控制台时才会计算id var dom = document.createElement("div") Object.defineProperty(dom, "id", { get: function(){ console.log('控制台打开了') } }) //ie不支持console.table //console.info(dom); console.log(dom);}

除了console.log，我们还可以使用console.info、console.dir和console.error等。需要注意的是ie不支持console.table

破解:通过标签将js代码注入clear 空控制台。如果定时器执行打印dom的操作，还需要重写clear空控制台。

以上方法需要注意浏览器对defineProperty的支持，另外在firefox浏览器中会失效，因为firefox浏览器不会取对象中被监控属性的值，只有手动点击才会触发。所以火狐需要别的东西。在这里，我选择使用调试器语句来实现它。debugger语句调用任何可用的调试函数，这可能会阻止代码执行。如果没有可用的调试功能，该语句将不起作用。这样我们就可以记录下调试器之前的时间。如果不触发调试器，运行几条语句的时间几乎为零，但如果触发，间隔时间不是几十毫秒就是几百毫秒。

function observerConsole(){ var obj = Object.create(null), t = Date.now(); Object.defineProperty(obj, "a", { get: function() { if(Date.now() - t > 100){ console.log('控制台打开了') } } }) setInterval(function(){ t = Date.now(); (function(){})["constructor"]("debugger")();//debugger; console.log(obj.a); }, 200)}

缺点:如果浏览器取消了调试器模式，就没有意义了。铬合金:

火狐浏览器:

3，4，可以概括如下:

var observerConsole = { openCallback: function(){ console.log('控制台打开了'); try { window.open("about:blank", "_self") } catch(e) { var btn = document.createElement("button"); btn.onclick = function() { window.open("about:blank", "_self") } btn.click() } }, observer: function(){ //这里使用dom元素，在打开控制台时才会计算id var dom = document.createElement("div"), that = this; Object.defineProperty(dom, "id", { get: function(){ that.openCallback() } }) //ie不支持console.table //console.info(dom); console.log(dom); }, observerF: function(){ var obj = Object.create(null), t = Date.now(), that = this; Object.defineProperty(obj, "a", { get: function() { if(Date.now() - t > 100){ that.openCallback() } } }) setInterval(function(){ t = Date.now(); (function(){})["constructor"]("debugger")();//debugger; console.log(obj.a); }, 200) }, init: function(){ var t = window.navigator.userAgent.toLowerCase(); t.indexOf("firefox") >= 0 ? this.observerF() : this.observer(); }}ConsoleManager.init()

破解:通过标签向控制台注入js代码，[/K0/]取消console.log等。防破解:重写和重新打包console.log等。，比如

let _console = { log : console.log, info : console.info, warn : console.warn, error : console.error};

然后用_console.log等替换上面的console.log。您可以在这里使用闭包来防止其他人重写_console。

代码只测试了firefox、ie、chrome浏览器和部分chrome内核浏览器(如360、qq、UC、搜狗)。

5.利用调试器的特性，无限递归

这种方法不能监控控制台被打开，但是可以达到防止别人浏览你的代码的目的。

上面也说了:调试器语句调用任何可用的调试函数，可以阻塞代码执行。如果没有可用的调试功能，该语句将不起作用。

此外，每个浏览器都有它的最大调用堆栈，如果它超过了最大调用堆栈大小，将抛出错误，程序将被终止。

将上述功能合并到以下代码中:

function check() { function doCheck(a) { (function() {}["constructor"]("debugger")()); //debugger doCheck(++a); } try { doCheck(0) } catch(err) { console.log(err) }};

上面的代码检查运行时，如果控制台没有打开，调试器将无法工作，但doCheck会继续循环，直到堆栈爆炸，抛出错误，停止本次检查运行；如果打开控制台，会继续调试断点，循环调用doCheck，直到堆栈爆炸；如果打开了控制台，但是取消了调试器模式，虽然此时调试器不会工作，但是递归依然存在，网页的性能相比没有打开的控制台会大大降低。严重的情况下浏览器可能会卡死。

未开启控制台时代码运行时间：Chrome：30-50msFirefox：200-400msIe：10-30ms开启控制台但取消debugger时代码运行时间：Chrome：1000-2000msFirefox：页面直接卡死

从上面的测试结果来看，我们可以设置一个间隔为2000ms的定时器来连续执行检查，这样在打开控制台时，无论是否取消调试器模式，页面都会被卡住。此外，我们可以混淆代码，增加阅读的难度。我们也可以使用闭包来完成上述操作，防止别人在控制台重置check: check = function () {}。

!function(){ var _0x1cbb = ["tor", "struc", "call", "ger", "con", "bug", "de", "apply"]; setInterval(check, 2e3); function check() { function doCheck(_0x1834ff) { if (('' + _0x1834ff / _0x1834ff)['length'] !== 0x1 || _0x1834ff % 0x14 === 0x0) { (function() {return !![]}[ _0x1cbb[0x4] + _0x1cbb[0x1] + _0x1cbb[0x0] ]( _0x1cbb[0x6] + _0x1cbb[0x5] + _0x1cbb[0x3] )[_0x1cbb[0x2]]()); } else { (function() {return ![]}[ _0x1cbb[0x4] + _0x1cbb[0x1] + _0x1cbb[0x0] ]( _0x1cbb[0x6] + _0x1cbb[0x5] + _0x1cbb[0x3] )[_0x1cbb[0x7]]()); } doCheck(++_0x1834ff); } try { doCheck(0) } catch(err) { } };}();

优点:兼容性好，不易破解。

缺点:会影响浏览器性能，导致页面卡顿。

破解:尝试重置检查功能。

6.摘要

如果文章和笔记能给你一点帮助或启发，请不要吝啬你的赞和收藏。你的肯定是我前进的最大动力。