[JavaScript] 禁用浏览器开发者工具方法探究

浏览器支持开发者工具以便开发者对网页进行调试，但是在很多情况下，我们并不想将自己的网站详细信息暴露给其他人。为此，本文收集了如下几种常见的方法。内容包括，设置 debugger、禁用右键和快捷键、监视 DOM 修改、卡死页面等。其他还有一些方法参考链接资料。

debugger

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();

破解：把 Chrome 浏览器设定为 Deactive breakpoint

禁用右键 （防止右键查看源代码）

window.onkeydown =
  window.onkeyup =
  window.onkeypress =
    function () {
      window.event.returnValue = false;
      return false;
    };

破解：直接按快捷键或菜单开发者工具

禁用按键

在本网页的任何键盘敲击事件都是无效操作 （防止 F12 和 shift+ctrl+i 调起开发者工具）。

var h = window.innerHeight,
  w = window.innerWidth;
window.onresize = function () {
  if (h != window.innerHeight || w != window.innerWidth) {
    window.location = "https://www.baidu.com";
  }
};

破解：在打开之前调出开发者工具，然后在地址栏输入网址即可。

监视窗口大小

如果用户在工具栏调起开发者工具，那么判断浏览器的可视高度和可视宽度是否有改变，如有改变则关闭本页面。

if (window.addEventListener) {
  window.addEventListener(
    "DOMCharacterDataModified",
    function () {
      window.location.reload();
    },
    true
  );
  window.addEventListener(
    "DOMAttributeNameChanged",
    function () {
      window.location.reload();
    },
    true
  );
  window.addEventListener(
    "DOMCharacterDataModified",
    function () {
      window.location.reload();
    },
    true
  );
  window.addEventListener(
    "DOMElementNameChanged",
    function () {
      window.location.reload();
    },
    true
  );
  window.addEventListener(
    "DOMNodeInserted",
    function () {
      window.location.reload();
    },
    true
  );
  window.addEventListener(
    "DOMNodeInsertedIntoDocument",
    function () {
      window.location.reload();
    },
    true
  );
  window.addEventListener(
    "DOMNodeRemoved",
    function () {
      window.location.reload();
    },
    true
  );
  window.addEventListener(
    "DOMNodeRemovedFromDocument",
    function () {
      window.location.reload();
    },
    true
  );
  window.addEventListener(
    "DOMSubtreeModified",
    function () {
      window.location.reload();
    },
    true
  );
}

破解：开发工具设置成独立窗口。

监视 DOM 修改

你的开发者工具是单独的窗口显示，不会改变原来网页的高度和宽度，但是你只要修改页面元素我就重新加载一次数据, 让你无法修改页面元素（不支持 IE9 以下浏览器）。

破解：不修改 dom 页面元素，就不会触发

只要打开控制台，就卡死

参考：

• 爬虫笔记之JS检测浏览器开发者工具是否打开 

Jonsam

一个理科IT宅男，喜欢旅游、分享和美食，做点想做的事情，遇见想见的人。

🍒 美食 | 🌐 FE | 🕌 旅行 | 💻 加班 | ♍ 处女座