听说你想用开发者工具调试我的网站?挺可以的啊。25

Posted 梦想橡皮擦

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了听说你想用开发者工具调试我的网站?挺可以的啊。25相关的知识,希望对你有一定的参考价值。

本篇博客重点为大家介绍,如何禁止用户在浏览器中查看源码,禁用开发者工具调试等前端需求
案例已更新到 爬虫训练场

文章目录

禁用右键,禁用 F12

在浏览器中查看源码,常用的方式有两种,鼠标右键和 F12 快捷键,让我们首先屏蔽这两个按键。

禁用 JavaScript 中的右键菜单

// 禁用右键菜单
document.oncontextmenu = function () 
  return false;
;

禁用右键菜单,可以使用 document.oncontextmenu 事件处理函数,这个函数在用户点击鼠标右键时调用。在函数中返回 false,可以禁用右键菜单。

禁用 F12

// 禁用 F12
document.onkeydown = function (e) 
  if (e.which === 123) 
    return false;
  
;

禁用 F12,可以使用 document.onkeydown 事件处理函数,这个函数在用户按下键盘上的任何键时调用。在函数中检测键盘事件的 which 属性是否等于 123,如果是则返回 false,可以禁用 F12 键。

禁用 ctrl + U 查看源代码,禁用 ctrl + shift + i 打开开发者工具

如题所示,这两个快捷键也可以完成查看源码的操作,我们也需要将其禁用掉。

javascript 中可以使用 document.onkeydown 事件处理函数,这个函数在用户按下键盘上的任何键时调用。在函数中检测键盘事件的 ctrlKeyshiftKey 属性是否为 true,以及 which 属性是否等于 85(U)73(i),如果满足条件,则返回 false,这可以禁用 ctrl + Uctrl + shift + i

禁用 ctrl + U

document.onkeydown = function (e) 
  if (e.ctrlKey && e.which === 85) 
    alert("已经禁用");
    return false;
  
;

禁用 ctrl + shift + i

document.onkeydown = function (e) 
  if (e.ctrlKey && e.shiftKey && e.which === 73) 
    alert("已经禁用");
    return false;
  
;

实现开发者工具无限 debugg

debugger 是 JavaScript 中定义的一个专门用于断点调试的关键字,碰到该关键字,JavaScript 的执行便会在此处中断,进入调试模式。

该场景比较常见,当用户打开开发者工具时,就会进入无限 debugg,并且由于 JavaScript 代码中存在死循环或者递归,导致浏览器卡死。

该办法实现的原理是运用定时器实现,利用 setIntervalsetTimeout 开一个线程,间隔固定时间,执行一次 debugger,如果你打开控制台,就会进入 debugger 状态。

setInterval(function () 
  debugger;
, 1000);

setTimeout(function b() 
  debugger;
  setTimeout(b, 1000);
, 1000);

经过检索,在网络上还找到一种相对复杂的实现,代码如下。

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

以上场景,当用户使用开发者工具之后,都会展示如下界面。

调用开发者工具,展示固定页面

在 JavaScript 中可以使用插件来判断开发者工具是否被打开,该插件名称为 devtools-detector,它使用了一些技巧来检测开发者工具的使用,如检测页面的宽度和高度是否发生了变化,检测节点是否被移除等。

首先导入指定的 JS。

<script src="https://cdn.bootcdn.net/ajax/libs/devtools-detector/2.0.14/devtools-detector.min.js"></script>

然后使用下述基本判断代码。

<script type="text/javascript">
    devtoolsDetector.addListener(function(isOpen) 
        if (isOpen)
         $('#school_list').html('<h2>请不要使用开发者工具调试</h2>');
        
    );
    devtoolsDetector.launch();
</script>

当使用其他方式打开开发者工具之后,主页面视图区域会直接被替换掉。如下所示。

本案例到此结束,已更新到 爬虫训练场 欢迎大家访问学习。
项目同步到代码仓库 https://gitcode.net/hihell/spider_playground

📢📢📢📢📢📢
💗 你正在阅读 【梦想橡皮擦】 的博客
👍 阅读完毕,可以点点小手赞一下
🌻 发现错误,直接评论区中指正吧
📆 橡皮擦的第 830 篇原创博客

从订购之日起,案例 5 年内保证更新

以上是关于听说你想用开发者工具调试我的网站?挺可以的啊。25的主要内容,如果未能解决你的问题,请参考以下文章

听说你想学前端开发,一套前端到移动端开发从入门到高级的教程送给你

sql server 和mysql,orcal,db2有什麼不同?

web前端必备的10个HTML5动画开发工具!

如何使用 F12 开发人员工具调试网页

如何使用HTTP访问自己搭建好的FTP服务器?

如何为特定应用添加特定 CSS