参考资料

1. Html转JS有哪些
2. HTML 段落格式化标签
3. HTML 背景颜色
4. HTML 常用1600 万种不同颜色颜色代码表
5. HTML 块引用格式化
6. html表单标签详细说明以及案例
7. HTML 表格高度和宽度
8. HTML id 属性详解

有哪些方法可以防止开发者工具被打开？

1. 禁用右键菜单

   document.addEventListener('contextmenu', function(e) {
     e.preventDefault();
   });

2. 禁用F12键

   document.addEventListener('keydown', function(e) {
     if (e.key === 'F12' || (e.ctrlKey && e.shiftKey && e.key === 'I')) {
       e.preventDefault();
     }
   });

3. 禁用开发者工具快捷键

   document.addEventListener('keydown', function(e) {
     if (e.ctrlKey && e.shiftKey && (e.key === 'C' || e.key === 'J' || e.key === 'I')) {
       e.preventDefault();
     }
   });

4. 检测窗口大小变化

   setInterval(function() {
     if (window.outerWidth - window.innerWidth > 100 || window.outerHeight - window.innerHeight > 100) {
       window.close();
     }
   }, 1000);

5. 重写console方法

   console.log = function() {};
   console.error = function() {};
   console.warn = function() {};

6. 禁用调试断点

   setInterval(function() {
     debugger;
   }, 1000);

7. 检测开发者工具状态

   var devtools = /./;
   devtools.toString = function() {
     window.location.href = 'about:blank';
   };
   console.log(devtools);

8. 禁用元素检查

   document.addEventListener('DOMNodeInserted', function(e) {
     if (e.relatedNode && e.relatedNode.nodeName === 'BODY') {
       document.body.innerHTML = '';
     }
   });

9. 使用全屏API

   document.documentElement.requestFullscreen();

10. 服务端检测

    if (navigator.webdriver) {
      window.location.href = 'about:blank';
    }