Skip to main content

useDevToolsDetector()

The useDevToolsDetector() hook detects if the browser's developer tools are open. It uses a non-blocking Web Worker that is paused by the debugger statement when DevTools is active, allowing the main thread to identify its state.

Import​

import { useDevToolsDetector } from 'react-haiku';

Usage​

This hook can be used to conditionally render components or trigger actions when a user opens the developer console.

General​

This example shows the basic implementation of the hook.

import { useDevToolsDetector } from 'react-haiku';

export const DevToolsStatus = () => {
  const isDevToolsOpen = useDevToolsDetector();

  return (
    <>
      <h1>DevTools Detector 🕵️</h1>
      <p>
        Are DevTools Open?{' '}
        <strong>{isDevToolsOpen ? 'Yes 🧐' : 'No ✅'}</strong>
      </p>
      <p>
        Try opening or closing the developer console to see the status change.
      </p>
    </>
  );
}

Customization​

You can customize the hook's behavior by passing an options object. This allows you to change the check interval and the internal messages used for detection.

import { useDevToolsDetector } from 'react-haiku';

export const CustomizedDetector = () => {
  const isDevToolsOpen = useDevToolsDetector({
    checkIntervalMs: 2000,
    pingMessage: 'are-you-debugging',
    pongMessage: 'no-im-not',
  });

  return (
    <>
      <b>
        {isDevToolsOpen ? 'Debugger Detected!' : 'All Clear!'}
      </b>
    </>
  );
}

How It Works​

The hook's detection method is based on a clever interaction between a Web Worker and the debugger statement.

  1. Background Worker: The hook initializes a Web Worker, which runs a script on a separate background thread. This ensures the detection process never freezes or slows down the user interface.

  2. Ping-Pong Check: The hook sends a ping message to the worker and immediately starts a timer. The worker is designed to reply with a pong message as soon as it gets the ping.

  3. The debugger Trap: Crucially, right before the worker sends its pong reply, there is a debugger; statement in its code. This statement is the key to the detection.

  4. Determining the State:

    • ✅ If DevTools are closed, the browser ignores the debugger; statement. The worker instantly sends back the pong message. The hook receives it, cancels the timer, and knows the DevTools are closed (isDevToolsOpen is false).
    • 🧐 If DevTools are open, the debugger; statement pauses the worker's execution. The worker gets stuck and never sends the pong message. The hook's timer runs out, which signals that the DevTools must be open (isDevToolsOpen is true).

This entire check-and-response cycle repeats at a set interval, providing a live status of the developer console.

API​

This hook accepts a single optional argument:

  • options - An optional configuration object to customize the detector's behavior.

The options object can contain the following properties:

  • checkIntervalMs (optional): A number representing the interval in milliseconds to check for DevTools. Default: 1000.
  • pingMessage (optional): A string for the custom message sent to the worker to initiate a check. Default: 'ping'.
  • pongMessage (optional): A string for the custom message the worker sends back if it is not paused by the debugger. Default: 'pong'.

Returns​

The hook returns a single reactive boolean state:

  • isDevToolsOpen: A boolean that is true if the developer tools are detected as open, and false otherwise.