[GH-ISSUE #69] launch() doesnt work if we navigate keeping the developer tools already open #141

New issue

Closed

opened 2026-03-13 17:25:21 +03:00 by kerem · 1 comment

kerem commented

2026-03-13 17:25:21 +03:00

Owner

Originally created by @mohiyuddinshaikh on GitHub (Mar 13, 2024).
Original GitHub issue: https://github.com/AEPKILL/devtools-detector/issues/69

The library works perfectly when you open the devtools.
But say in my react app, i am on page A where devtools is allowed. So devtools is open.
I then navigate to page B where devtools is not allowed and where I am using the library, but this time it doesnt detect that devtools was already open and hence user can access dev tools where I dont want them to.

Originally created by @mohiyuddinshaikh on GitHub (Mar 13, 2024). Original GitHub issue: https://github.com/AEPKILL/devtools-detector/issues/69 The library works perfectly when you open the devtools. But say in my react app, i am on page A where devtools is allowed. So devtools is open. I then navigate to page B where devtools is not allowed and where I am using the library, but this time it doesnt detect that devtools was already open and hence user can access dev tools where I dont want them to.

kerem

2026-03-13 17:25:21 +03:00

closed this issue
added the
help wanted
label

kerem commented

2026-03-13 17:25:37 +03:00

Author

Owner

@AEPKILL commented on GitHub (Mar 20, 2024):

You need to remember the previous status of devtools because the message won't trigger unless devtools status has changed.

import { useSyncExternalStore, useEffect } from "react";
import devtoolsDetector from "devtools-detector"; // version: 2.0.16

const devtoolsStatusStore = {
  subscribe(callback: () => void) {
    const isLaunched = devtoolsDetector.isLaunch();
    devtoolsDetector.addListener(callback);
    if (!isLaunched) {
      devtoolsDetector.launch();
    }
    return () => {
      devtoolsDetector.removeListener(callback);
      if (!isLaunched) {
        devtoolsDetector.stop();
      }
    };
  },
  getIsOpen() {
    return devtoolsDetector.isOpen;
  },
};

export function useDevtoolsIsOpen() {
  return useSyncExternalStore(
    devtoolsStatusStore.subscribe,
    devtoolsStatusStore.getIsOpen
  );
}

Example

@AEPKILL commented on GitHub (Mar 20, 2024): You need to remember the previous status of devtools because the message won't trigger unless devtools status has changed. ```ts import { useSyncExternalStore, useEffect } from "react"; import devtoolsDetector from "devtools-detector"; // version: 2.0.16 const devtoolsStatusStore = { subscribe(callback: () => void) { const isLaunched = devtoolsDetector.isLaunch(); devtoolsDetector.addListener(callback); if (!isLaunched) { devtoolsDetector.launch(); } return () => { devtoolsDetector.removeListener(callback); if (!isLaunched) { devtoolsDetector.stop(); } }; }, getIsOpen() { return devtoolsDetector.isOpen; }, }; export function useDevtoolsIsOpen() { return useSyncExternalStore( devtoolsStatusStore.subscribe, devtoolsStatusStore.getIsOpen ); } ``` [Example](https://codesandbox.io/p/sandbox/devtools-detector-launch-92hzrn)