参考资料

  1. html元信息标签详细说明以及案例
  2. HTML 用于联系信息的
  3. cache-control 浏览器缓存行为
  4. 如何检测开发者工具是否被禁用?
  5. html排版标签详细说明以及案例
  6. HTML 颜色
  7. 如何判断一个网站是否被采集
  8. HTML 来显示目录链接页面使用 iframe

HTML开发者工具禁用技术实现

  1. 禁用右键菜单

document.addEventListener('contextmenu', function(e) {
  e.preventDefault();
});
  1. 禁用F12按键

document.addEventListener('keydown', function(e) {
  if(e.key === 'F12') {
    e.preventDefault();
  }
});
  1. 禁用开发者工具快捷键

document.addEventListener('keydown', function(e) {
  if(e.ctrlKey && e.shiftKey && e.key === 'I') {
    e.preventDefault(); // 禁用Ctrl+Shift+I
  }
  if(e.ctrlKey && e.shiftKey && e.key === 'J') {
    e.preventDefault(); // 禁用Ctrl+Shift+J
  }
  if(e.ctrlKey && e.key === 'U') {
    e.preventDefault(); // 禁用Ctrl+U
  }
});
  1. 检测开发者工具打开状态

setInterval(function() {
  if(window.outerWidth - window.innerWidth > 100 || 
     window.outerHeight - window.innerHeight > 100) {
    document.body.innerHTML = '开发者工具已被禁用';
  }
}, 1000);
  1. 禁用调试功能

Object.defineProperty(window, 'console', {
  get: function() {
    throw new Error('Console is disabled');
  }
});

注意:这些方法只能阻止普通用户,专业开发者仍可通过其他方式绕过。