如何检测Firefox Inspect Element是否开启？附Chrome检测示例

Great question! Detecting when Firefox's Inspect Element (DevTools) is open is totally doable, though the approaches are a bit different from Chrome's—since Firefox has its own DevTools implementation with unique behaviors. Let's break down some practical, client-side methods that work without relying on external APIs or extended permissions:

Method 1: Viewport Size Discrepancy (Docked DevTools) #

When Firefox DevTools is docked to the bottom or side of the browser window, it reduces the available viewport height/width for your page. You can compare the initial viewport dimensions with real-time values to spot this change:

// Store initial viewport height on page load
const initialViewportHeight = window.innerHeight;
let isDevToolsOpen = false;

window.addEventListener('resize', () => {
  const currentHeight = window.innerHeight;
  // Adjust the threshold based on your use case (100px is a safe starting point)
  const heightDifference = Math.abs(currentHeight - initialViewportHeight);
  isDevToolsOpen = heightDifference > 100;
  
  console.log('Firefox DevTools Status:', isDevToolsOpen ? 'Open' : 'Closed');
});

Pros: Simple, lightweight, no user disruption.
Cons: Doesn't work if DevTools is opened in a separate window (viewport doesn't change).

Method 2: Console Object Signature Check #

Firefox modifies the console object when DevTools is active, adding internal properties or altering method implementations. You can detect these changes by checking the string representation of console methods:

function isFirefoxDevToolsActive() {
  try {
    // When DevTools is closed, console.log returns the native code string
    // When open, it's wrapped with a bound function or modified implementation
    const logMethodString = console.log.toString();
    return !logMethodString.includes('[native code]');
  } catch (error) {
    return false;
  }
}

// Example: Check every second
setInterval(() => {
  console.log('DevTools Active:', isFirefoxDevToolsActive());
}, 1000);

Pros: Works for both docked and separate-window DevTools.
Cons: Might break if Firefox updates how it modifies the console object in future versions.

Method 3: Debugger Statement Timing (Non-Interactive Use Cases) #

When DevTools is open, the debugger statement will pause code execution. You can measure the time between triggering the statement and resuming to detect if DevTools is active:

function checkDevToolsViaDebugger() {
  const startTime = performance.now();
  debugger; // This will pause execution only if DevTools is open
  const endTime = performance.now();
  
  // If the gap is larger than 100ms, DevTools was open and paused the code
  return endTime - startTime > 100;
}

// Note: This will trigger a breakpoint, so use it sparingly or in non-user-facing flows
console.log('DevTools Open:', checkDevToolsViaDebugger());

Pros: Highly reliable when it works.
Cons: Disrupts user experience by triggering a breakpoint, can be bypassed if the user disables breakpoints in DevTools.

Important Notes #

• No method is 100% foolproof: Browser updates can change DevTools behavior, and savvy users can bypass detection (e.g., disabling JavaScript).
• These methods are all client-side and don't require any external dependencies or special permissions, which fits your "limited available parameters" requirement.

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