网页禁止浏览器F12调试怎么办？正常devtool的办法

浏览器的调试面板给开发者带来了很多便利，可以看接口请求、样式布局、加载的资源，这些资源开发者看到没什么，但很多是不想被别人看到的，因此也就诞生了很多的禁止 F12 进行调试的办法。
目前常用的检测手段主要有：正则 toString、元素 toString、函数 toString、debugger 判断时间差等，具体写法大家可以上网查一查，我就不过多说了。网上也有人封装了库可以更方便的使用，比如 devtools-detectoropen in new window

然而，前端没有绝对的安全，无论是限制还是破解都只是技术上的彼此攻防。最近研究了一下，发现一些可以绕过限制的方法，我就站在技术研究的方向和大家分享一下，请合理使用技术、不要用于任何非法目的。

# 1. 直接 Ctrl+U 查看源代码

最简单也是最直的方法，直接Ctrl+U就可以在浏览器中查看源代码，如果是比较简单的网页这样就可以了。

# 2. 动态执行 JS 下载源码

如果是 vue、react 等经过 webpack 打包的单页面网站，使用上面的方法几乎看不到任何信息，不过我们还有办法，因为浏览器地址栏是可以动态执行 JS 脚本的，我们借助这个方法可以执行自己的 Js 脚本拿到想要的信息。

注：浏览器（Chrome）地址栏可以直接执行 JS，也可以使用油猴脚本、浏览器插件机制。后两者功能更强大，但需要一些额外的开发步骤，这里不过多赘述，感兴趣的可以自己上网查询。

// JS代码如下，需要自行压缩到一行执行即可
try {
  function download(filename, text) {
    var element = document.createElement('a')
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text))
    element.setAttribute('download', filename)
    element.style.display = 'none'
    document.body.appendChild(element)
    element.click()
    document.body.removeChild(element)
  }
  const html = document.body.innerHTML
  download('html.html', html)
} catch (err) {
  alert(err)
}

做法：在地址栏先输入 javascript: ，一定要亲自输入，浏览器安全机制限制不能复制粘贴使用。然后把压缩到一行的 js 代码粘贴上去，就可以获取网页主体区域的 dom 结构了。

# 3. 动态执行 JS 解除 F12 限制

上面的办法我们可以拿到网页 HTML，如果还需要监听网络请求、css 等，上面的办法也就不满足了，这时可以使用终极大法，禁用他们的监听操作。

注：该方法未必在所有网页可行，理论上来说绝大部分网页都可以使用。

我们以 devtools-detector 为例，它提供了一个 stop 方法供开发者临时禁用，这里面一个是修改变量、一个是清除定时器，清除定时器的原因是使用了 setTimeout 一直判断结果，而其他库和自己实现的限制大部分也都使用了 setTimeout 判断。
根据 JS 规范我们可以知道，每次 setTimeout 都会返回一个数字，可以配合 clearTimeout 用来清空定时器，而且返回的数字是递增的数字，每次都会+1，那么、我们就可以自己创建一个定时器，拿到一个数字，通过循环，把以往的定时器全部清空，这样就可以结束它的判断了，但也有一个缺点：很有可能会影响网页正常的交互。 具体代码如下，执行方法和上面的差不多。

// 破解禁止F12的代码，该操作同时可能造成网页交互不正常，压缩到一行执行即可
const timeout = setTimeout(() => {}, 2000)
for (let i = 0; i <= timeout; i++) {
  clearTimeout(i)
}
alert('ok，等待2秒即可使用F12查看代码')