禁止用户打开浏览器debug调试窗口的方法

禁用方法

以下代码是查看某个网站的时候发现的,的确很管用。

//debug调试时跳转页面
var element = new Image();
Object.defineProperty(element,'id',{get:function(){window.location.href="http://www.xxx.com/aboutus.html"}});
console.log(element);

上面这段代码的意思是：

1. 创建一个<img>标签，
2. 利用Object.defineProperty方法，在这个img上定义了id的getter，
3. 每当打印element(即定义的img)时，就会调用这个getter，跳转到指定页面。
4. 在控制台打印这个元素

破解方法：

以上方法的确在大部分浏览器中都奏效，作为码农的我们当然是很好奇的，该如何破解这个限制呢？
其实破解方法很简单,只要用到浏览器书签栏，万能的书签不仅可以存储链接，还可以执行 JS 代码。

1. 创建一个书签,在地址栏存入如下代码

   javascript:window.addEventListener('beforeunload', function (e) { e.preventDefault();e.returnValue = '' });

2. 通过监听beforeunload事件并指定returnValue，浏览器会在网页跳转前询问是否离开此网页，点击取消即可留在当前页面了。这样当我们打开debug调试时，就可以取消页面跳转了。

console.log 的执行时机

在Chrome中，console.log 在控制台打开后才起作用，它的确是调用了，但是还没打印，也就是还没有触发<img>标签id的getter；因此用书签来毁掉console.log是在调用之后的，无法阻止打开debug时打印<img>标签从而触发getter方法。

刷新页面读取network的数据

用debug调试读取network发过来的数据，必须要刷新页面，一旦刷新，我们对beforeunload的监听就会失效，必定触发重定向，导致无法获取network中资源的请求和响应数据。这时候单纯使用浏览器的debug调试就很难拿到这些数据了。

本作品采用《CC 协议》，转载必须注明作者和本文链接