devtools fix

src/App.jsx

@@ -26,6 +26,7 @@ import useSubscriptionManager from './useSubscriptionManager.js';
 import useSessionManager from './useSessionManager.js';
 import ExtendSubscriptionModal from './Pages/ExtentedModal/ExtendSubscriptionModal.jsx';
 import devtools from 'devtools-detect';
+import { useDevToolsDetection } from './utils/useDevToolsDetection.js';
 
 const isCapacitor = () => !!window.Capacitor?.isNativePlatform?.();
 
@@ -171,45 +172,66 @@ const AppRoutes = () => {
     };
   }, [navigate, location.pathname, location.search]);
   // mohan
-  useEffect(() => {
+  // useEffect(() => {
-    if (isMobile || isIOS) {
+  //   if (isMobile || isIOS) {
-      console.log('📱 Mobile/iOS device → skipping DevTools detection');
+  //     console.log('📱 Mobile/iOS device → skipping DevTools detection');
-      return;
+  //     return;
+  //   }
+  //   const checkDevTools = setInterval(() => {
+  //     if (devtools.isOpen && !devToolsOpen) {
+  //       setDevToolsOpen(true);
+  //       document.body.innerHTML =
+  //         "<h1 style='color: red; text-align: center;'>Close Inspect to continue using the application.</h1>";
+  //     } else if (!devtools.isOpen && devToolsOpen) {
+  //       setDevToolsOpen(false);
+
+  //       setTimeout(() => {
+  //         window.location.reload();
+  //       }, 100);
+
+  //       clearInterval(checkDevTools);
+  //     }
+
+  //     if (!devtools.isOpen) {
+  //       let before = performance.now();
+
+  //       let after = performance.now();
+
+  //       let executionDelay = after - before;
+
+  //       if (executionDelay > 100) {
+  //         setDevToolsOpen(true);
+  //         document.body.innerHTML =
+  //           "<h1 style='color: red; text-align: center;'>Close Inspect to continue using the application.</h1>";
+  //       } else {
+  //         setDevToolsOpen(false);
+  //       }
+  //     }
+  //   }, 1000);
+
+  //   return () => clearInterval(checkDevTools);
+  // }, [devToolsOpen]);
+  const isBlocked = useDevToolsDetection(() => {
+    // optional: log, notify, etc.
+    console.warn('DevTools detected');
+  });
+
+  if (isBlocked) {
+    return (
+      <div style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100vh',
+        flexDirection: 'column',
+        gap: '1rem'
+      }}>
+        <h1 style={{ color: 'red' }}>
+          DevTools detected. Please close it to continue.
+        </h1>
+      </div>
+    );
   }
-    const checkDevTools = setInterval(() => {
-      if (devtools.isOpen && !devToolsOpen) {
-        setDevToolsOpen(true);
-        document.body.innerHTML =
-          "<h1 style='color: red; text-align: center;'>Close Inspect to continue using the application.</h1>";
-      } else if (!devtools.isOpen && devToolsOpen) {
-        setDevToolsOpen(false);
-
-        setTimeout(() => {
-          window.location.reload();
-        }, 100);
-
-        clearInterval(checkDevTools);
-      }
-
-      if (!devtools.isOpen) {
-        let before = performance.now();
-
-        let after = performance.now();
-
-        let executionDelay = after - before;
-
-        if (executionDelay > 100) {
-          setDevToolsOpen(true);
-          document.body.innerHTML =
-            "<h1 style='color: red; text-align: center;'>Close Inspect to continue using the application.</h1>";
-        } else {
-          setDevToolsOpen(false);
-        }
-      }
-    }, 1000);
-
-    return () => clearInterval(checkDevTools);
-  }, [devToolsOpen]);
   if (extendModel) {
     return (
       <ExtendSubscriptionModal

src/utils/useDevToolsDetection.js

@@ -0,0 +1,86 @@
+const DevToolsDetector = {
+    checkWindowSize() {
+        const threshold = 160;
+        return (
+            window.outerWidth - window.innerWidth > threshold ||
+            window.outerHeight - window.innerHeight > threshold
+        );
+    },
+
+    checkConsole() {
+        let detected = false;
+        const element = new Image();
+        Object.defineProperty(element, 'id', {
+            get: () => { detected = true; }
+        });
+        console.log('%c', element);
+        console.clear();
+        return detected;
+    },
+
+    checkDebugger() {
+        if (import.meta.env.DEV) return false;
+        const start = performance.now();
+        // eslint-disable-next-line no-debugger
+        debugger;
+        const end = performance.now();
+        return end - start > 100;
+    },
+
+    checkToString() {
+        let detected = false;
+        const div = document.createElement('div');
+        Object.defineProperty(div, 'id', {
+            get: function () {
+                detected = true;
+                return 'id';
+            }
+        });
+        console.log(div);
+        console.clear();
+        return detected;
+    },
+
+    detect() {
+        return (
+            this.checkWindowSize() ||
+            this.checkConsole() ||
+            this.checkDebugger() ||
+            this.checkToString()
+        );
+    }
+};
+
+export default DevToolsDetector;
+
+
+
+import { useEffect, useState } from 'react';
+
+const isMobileOrIOS = () =>
+    /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+
+export const useDevToolsDetection = (onDetected) => {
+    const [isBlocked, setIsBlocked] = useState(false);
+
+    useEffect(() => {
+        if (isMobileOrIOS()) return;
+
+        const interval = setInterval(() => {
+            const detected = DevToolsDetector.detect();
+
+            if (detected && !isBlocked) {
+                setIsBlocked(true);
+                onDetected?.();
+            } else if (!detected && isBlocked) {
+                setIsBlocked(false);
+                clearInterval(interval);
+                setTimeout(() => window.location.reload(), 100);
+            }
+        }, 1000);
+
+        return () => clearInterval(interval);
+    }, [isBlocked]);
+
+    return isBlocked;
+};