👨‍💻 Dev Features

This project includes several developer tools to help debug and optimize your application. These features are disabled by default to keep the production build clean, but can be enabled during development when needed.

---

📱 MobileConsole

Description: mobileConsole enables a floating console button on the screen. When clicked, it opens a third-party JavaScript console that functions similarly to the browser devtools — but works even on mobile devices.

How to Enable: In your config.ts, set mobileConsole to true:

  mobileConsole: false //* if true then there is a extra console you can open on any device (including mobile)

You’ll now see a button on the UI to toggle the console overlay. This is extremely useful for debugging on phones, tablets, or devices without devtools.

---

🔍 React Scan

React Scan is a lightweight visual debugging tool that highlights each component or HTML element as it's re-rendered. It helps you identify unnecessary re-renders and performance bottlenecks.

How to Enable: In index.html, uncomment the following line near the end of the file:

<!-- <script src="https://unpkg.com/react-scan/dist/auto.global.js"></script> -->

👉 Change it to:

<script src="https://unpkg.com/react-scan/dist/auto.global.js"></script>

Now, during app usage, React Scan will visually outline components that re-render in real-time.

⚠️ Only use React Scan during development. It may impact performance and should not be enabled in production.