一次偶然的机会看到了微信读书。心中赞叹，这网站做的不错，尤其好奇图书排版的实现方案。
当我一贯在 Chrome 浏览器中右击的时候，发现没反应，以为鼠标坏了呢！最终确认不是我的鼠标问题。那问题来了如何阻止用户点击右键进行 inspect 调试呢，这背后的原理是什么？
通过下面这种方法可以阻止用户点击 F12 和点击右键：
// 禁止使用 F12
window.onkeydown = window.onkeyup = window.onkeypress = function (event) {
// F12 键码为 123
if (event.keyCode === 123) {
event.preventDefault();
window.event.returnValue = false;
}
}
// 为右键添加自定义事件，可以禁用
window.oncontextmenu = function () {
event.preventDefault();
return false;
}
既然微信读书网站不让点击右键，这就不能进入浏览器的调试模式，这时可以打开一个可以进入调试模式的页面，把微信读书的网站复制进去，即可进入调试模式。进入调试模式后，你会发现微信读书出现了 debugger：
想要阻止这个 debugger，最简单的方法是点击这个按钮：
点击完后，发现可以顺利打开阅读页。
那他这个 debugger 是如何启动的呢？我们看看它的代码，由于代码进行了混淆（你所看到的 _0xxxxx 这些其实是变量名，并不是内存地址，这点需要注意，至于如何混淆我没仔细研究），看的并不是很清楚，可以明确一点是 debugger 是通过函数动态生成的：
不过微信读书这种主要是为了防止爬虫，对于开发者调试来说并不是很难破解。大家加油，思考一下如何在代码中动态加入 debugger。
长按关注
素燕《前端小课》
帮助 10W 人入门并进阶前端