网页防止打开开发者模式，防止恶意测试或采集方法

为什么要防止被恶意调式？

我们的目的是尽可能的减少资源被盗取，防止爬虫和攻击、以及api ！

第一种方式

禁止F12和右击、审查元素设置中强行打开开发者会直接关闭网页。

		<script>
			//禁用右键（防止右键查看源代码）
			window.oncontextmenu = function() {
				return false;
			}
			//禁止任何键盘敲击事件（防止F12和shift+ctrl+i调起开发者工具）
			window.onkeydown = window.onkeyup = window.onkeypress = function() {
				window.event.returnValue = false;
				return false;
			}
			//如果用户在工具栏调起开发者工具，那么判断浏览器的可视高度和可视宽度是否有改变，如有改变则关闭本页面
			var h = window.innerHeight,
				w = window.innerWidth;
			window.onresize = function() {
				if (h != window.innerHeight || w != window.innerWidth) {
					window.close();
					window.location = "about:blank";
				}
			}
		</script>

第二种方式

使用开源项目ConsoleBan。

Github：https://github.com/fz6m/console-ban/blob/master/README.zh.md

<script src="https://cdn.jsdelivr.net/npm/console-ban@5.0.0/dist/console-ban.min.js"></script>
<script>
	// 第一种防爬虫的方法，打开F12自动重定向
	// ConsoleBan.init({
	// 	redirect: '/404'
	// })
 
	//第二种防爬虫的方法，重写页面元素
	var div = document.createElement('div')
	div.innerHTML = '<h1> 不要偷看啦~</h1>'
	ConsoleBan.init({
	// 重写 body 为字符串
	write: '<h1> 不要偷看啦~ </h1>',
	// 可传入节点对象
	write: div
	})
 
	//第三种防爬虫的方法，打开F12自动走debugger
	ConsoleBan.init({
	debug: true,
	debugTime: 1
	})
</script>

主要是通过ConsoleBan.init()进行实例化，跟Vue实例化用法类似，该对象可传参数如下：

第三种方式

自动清空控制台。

<script>
	var clear = console.clear
	setTimeout(clear, 1)
</script>

三种方式都很好用，具体使用那种方式进行防范可以根据自己实际需求进行选定！