# 👨‍💻 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`:

```ts
  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:

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

👉 Change it to:

```html
<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**.