技术问询：如何实现打开Dev Tools时网页空白？能否适配Firefox？

Great question! This trick relies on detecting when the browser's DevTools is active, then modifying the page to hide content. Let's break down how to implement this for both Chromium-based browsers (Chrome, Edge) and Firefox, since their DevTools behave differently.

1. Basic Implementation for Chromium Browsers #

The core idea here is to detect layout changes that happen when DevTools is docked to the browser window. We can use a hidden fixed-position element to track these shifts:

// Create a hidden detector element
const devToolsDetector = document.createElement('div');
Object.assign(devToolsDetector.style, {
  position: 'fixed',
  top: '0',
  left: '0',
  width: '10px',
  height: '10px',
  opacity: '0',
  pointerEvents: 'none'
});
document.body.appendChild(devToolsDetector);

function togglePageVisibility() {
  // When DevTools is docked, the detector's size stretches beyond its original dimensions
  const isDevToolsOpen = devToolsDetector.offsetHeight > 10 || devToolsDetector.offsetWidth > 10;
  
  document.body.style.visibility = isDevToolsOpen ? 'hidden' : 'visible';
  // Alternatively, completely clear the body (save original content first if needed):
  // document.body.innerHTML = isDevToolsOpen ? '' : originalPageContent;
}

// Check on window resize (triggered when DevTools is opened/closed)
window.addEventListener('resize', togglePageVisibility);
// Periodic check to catch edge cases where resize doesn't fire
setInterval(togglePageVisibility, 500);

This works because docking DevTools alters the viewport size, forcing the tiny fixed element to expand beyond its 10x10 pixel initial size.

2. Firefox-Adapted Script #

Firefox doesn't trigger the same layout shifts as Chromium for docked DevTools, so we need a different approach. The most reliable method is checking the difference between the browser window's outer and inner dimensions—when DevTools is docked, this gap will jump significantly:

function checkFirefoxDevTools() {
  // Adjust this threshold based on typical DevTools height/width (100px works for most cases)
  const threshold = 100;
  const heightDifference = window.outerHeight - window.innerHeight;
  const widthDifference = window.outerWidth - window.innerWidth;
  
  const isDevToolsOpen = heightDifference > threshold || widthDifference > threshold;
  
  document.body.style.visibility = isDevToolsOpen ? 'hidden' : 'visible';
}

// Listen for resize events (fired when DevTools is toggled)
window.addEventListener('resize', checkFirefoxDevTools);
// Fallback periodic check
setInterval(checkFirefoxDevTools, 500);

Cross-Browser Alternative (Works for Both) #

If you want a single script that works across browser families, use a console-based detection method. This leverages the fact that DevTools calls an object's toString() method when logging it:

let isDevToolsOpen = false;
const detectorObj = {};

// Define a getter for toString that triggers when DevTools logs the object
Object.defineProperty(detectorObj, 'toString', {
  get: () => {
    isDevToolsOpen = true;
    return '';
  }
});

setInterval(() => {
  isDevToolsOpen = false;
  console.log(detectorObj); // Log the object to trigger the getter if DevTools is open
  
  setTimeout(() => {
    document.body.style.visibility = isDevToolsOpen ? 'hidden' : 'visible';
  }, 100);
}, 500);

Note: This will add empty entries to the console, and it won't work if the user has disabled console logging.

Caveats #

• These methods won't detect DevTools opened in a separate window (since the main browser window's layout doesn't change).
• Browser updates might break these detection tricks, as DevTools behavior can evolve over time.

内容的提问来源于stack exchange，提问作者newcool