参考资料

  1. 如何检测开发者工具是否被禁用？
  2. HTML 块引用格式化
  3. HTML 文本对齐方式
  4. HTML 颜色
  5. HTML 段落
  6. HTML 布局
  7. HTML高度与宽度设置 Iframe
  8. HTML 符号实体

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');
  }
});

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