https://github.com/purrseus/react-native-xenon
A powerful in-app debugging tool for React Native.
https://github.com/purrseus/react-native-xenon
android console debugger https inspector ios logger network nsurlsession okhttp react-native xenon
Last synced: 6 days ago
JSON representation
A powerful in-app debugging tool for React Native.
- Host: GitHub
- URL: https://github.com/purrseus/react-native-xenon
- Owner: purrseus
- License: mit
- Created: 2024-12-03T16:38:44.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-06-01T15:59:21.000Z (15 days ago)
- Last Synced: 2025-06-02T00:22:25.084Z (14 days ago)
- Topics: android, console, debugger, https, inspector, ios, logger, network, nsurlsession, okhttp, react-native, xenon
- Language: TypeScript
- Homepage:
- Size: 12.9 MB
- Stars: 52
- Watchers: 3
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# React Native Xenon
### A powerful in-app debugging tool for React Native.
[![GitHub Actions Workflow Status][github-actions-status-badge]][github-actions-status-link]
[![NPM Version][npm-version-badge]][npm-version-link]
[![React Native][react-native-badge]][react-native-link]
[![Runs With Expo][expo-badge]][expo-link]
[![Types Included][typescript-badge]][typescript-link]
[![GitHub License][github-license-badge]][github-license-link]
[![NPM Downloads Per Month][npm-downloads-per-month-badge]][npm-downloads-per-month-link]
[![Buy Me A Coffee][buy-me-a-coffee-badge]][buy-me-a-coffee-link]
## Features
- :iphone: **In-app debugging** – Debug apps in any environment without the need for debug builds.
- :globe_with_meridians: **Network Inspection** – Monitor HTTP(S) requests (XHR, Fetch) and WebSocket connections.
- :page_with_curl: **Log Capture** – Intercept console messages like log, info, warn, and error for enhanced debugging.
- :zap: **Draggable Bubble UI** – Seamlessly debug without disrupting your workflow.
- :sparkles: **React Native & Expo Support** – Built for compatibility across both platforms.
## Screenshots
## Installation
### Expo
If you are using Expo, just run these commands and you're done. No additional configuration required.
```sh
npx expo install react-native-xenon
npx expo install react-native-safe-area-context react-native-screens
```
### React Native
For React Native projects, install the packages and follow the platform-specific setup instructions below.
```sh
yarn add react-native-xenon
yarn add react-native-safe-area-context react-native-screens
```
#### Android
`react-native-screens` package requires one additional configuration step to properly work on Android devices. Edit `MainActivity.kt` file which is located under `android/app/src/main/java//`.
```diff
+ import android.os.Bundle
// ...
class MainActivity: ReactActivity() {
// ...
+ override fun onCreate(savedInstanceState: Bundle?) {
+ super.onCreate(null)
+ }
// ...
}
```
This change is required to avoid crashes related to View state being not persisted consistently across Activity restarts.
#### iOS
Don't forget to install pods when you are developing for iOS.
```sh
cd ios && pod install; cd ..
```
## Usage
Wrap your top-level component with ``.
```tsx
import Xenon from 'react-native-xenon';
function AppContainer() {
return (
);
}
```
Present the debugger by calling the `show` method.
```tsx
Xenon.show();
```
And hide it by calling the `hide` method.
```tsx
Xenon.hide();
```
## Props
| **Prop** | **Type** | **Description** |
| --------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| `disabled` | `boolean` | If true, completely disables the debugger by rendering only the children components without any debugging functionality. Defaults to `false`. |
| `autoInspectNetworkEnabled` | `boolean` | Determines whether the network inspector is automatically enabled upon initialization. Defaults to `true`. |
| `autoInspectConsoleEnabled` | `boolean` | Determines whether the console inspector is automatically enabled upon initialization. Defaults to `true`. |
| `bubbleSize` | `number` | Defines the size of the interactive bubble used in the UI. Defaults to `40`. |
| `idleBubbleOpacity` | `number` | Defines the opacity level of the bubble when it is idle. Defaults to `0.5`. |
| `includeDomains` | `string[]` | Domains to include in network interception. Defaults to all domains. |
> [!IMPORTANT]
> The debugger is enabled by default in all environments including production. To prevent exposing sensitive developer tools to end users, always set disabled={true} in production builds (e.g., disabled={isProduction}).
## Methods
| **Method** | **Return Type** | **Description** |
| ------------- | --------------- | ------------------------------------------------------------------------------------------- |
| `isVisible()` | `boolean` | Checks whether the debugger is currently visible. |
| `show()` | `void` | Makes the debugger visible. If it is already visible, this method has no additional effect. |
| `hide() ` | `void` | Hides the debugger. If it is already hidden, this method has no additional effect. |
## Examples
To try out Xenon, you can run the example project:
```sh
# Clone the repo
git clone https://github.com/purrseus/react-native-xenon.git
cd react-native-xenon
# Install dependencies
yarn install
# Start the Expo development server
yarn example start
```
See the [example](./example) directory for more information.
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
This project is [MIT](./LICENSE) licensed.
[github-actions-status-badge]: https://img.shields.io/github/actions/workflow/status/purrseus/react-native-xenon/ci.yml?style=for-the-badge&logo=github&label=%20&labelColor=1B1B1D
[github-actions-status-link]: ./.github/workflows/ci.yml
[npm-version-badge]: https://img.shields.io/npm/v/react-native-xenon?style=for-the-badge&color=CC3F3E&labelColor=1B1B1D&logo=npm&label=%20&logoColor=CC3F3E
[npm-version-link]: https://www.npmjs.com/package/react-native-xenon
[react-native-badge]: https://img.shields.io/badge/%20React%20Native-67DAFB?style=for-the-badge&logo=react&logoColor=67DAFB&labelColor=1B1B1D
[react-native-link]: https://reactnative.dev
[expo-badge]: https://img.shields.io/badge/Expo-FFFFFF?style=for-the-badge&logo=expo&labelColor=1B1B1D&logoColor=FFFFFF
[expo-link]: https://expo.dev
[typescript-badge]: https://img.shields.io/badge/TypeScript-3077C6?style=for-the-badge&logo=typescript&logoColor=3077C6&labelColor=1B1B1D
[typescript-link]: https://www.typescriptlang.org
[github-license-badge]: https://img.shields.io/badge/License-MIT-44CD11?style=for-the-badge&labelColor=1B1B1D
[github-license-link]: ./LICENSE
[npm-downloads-per-month-badge]: https://img.shields.io/npm/dm/react-native-xenon?style=for-the-badge&labelColor=1B1B1D
[npm-downloads-per-month-link]: https://www.npmjs.com/package/react-native-xenon
[buy-me-a-coffee-badge]: https://img.shields.io/badge/%20-Buy%20me%20a%20coffee-FEDD03?style=for-the-badge&logo=buymeacoffee&labelColor=1B1B1D
[buy-me-a-coffee-link]: https://www.buymeacoffee.com/thiendo261