A React debug console tool for logging, network calls, and storage inspection. Developed by @amalxprasad
npm install rocket-devtool
console.log, console.info, console.warn, and console.error.
XMLHttpRequest and fetch).
localStorage, sessionStorage, and cookies.
bash
npm install rocket-devtool
`
or
`bash
yarn add rocket-devtool
`
---
Usage
$3
Wrap your application with the DebugConsoleProvider to enable the debug console.
`tsx
import React from 'react';
import { DebugConsoleProvider } from 'rocket-devtool';
const App = () => {
return (
Welcome to My App
{/ Your app components /}
);
};
export default App;
`
#### Accessing the Debug Console
- A floating button (π) will appear in your app. Click it to open the debug console.
- Use the tabs to view logs, network requests, and storage data.
#### Customizing the Debug Console
You can customize the position and size of the debug console button:
`tsx
buttonSettings={{
position: 'bottomRight', // Options: 'topLeft', 'topRight', 'leftCenter', 'rightCenter', 'bottomLeft', 'bottomRight'
size: 50, // Button size in pixels
}}
>
{/ Your app components /}
`
---
$3
Wrap your components with the ErrorBoundary to catch and handle errors.
`tsx
import React from 'react';
import { ErrorBoundary } from 'rocket-devtool';
const App = () => {
return (
Welcome to My App
{/ Your app components /}
);
};
export default App;
`
#### Custom Fallback UI
You can customize the fallback UI displayed when an error occurs:
`tsx
fallback={({ error, resetErrorBoundary }) => (
Something went wrong
{error.message}
)}
>
{/ Your app components /}
`
---
API Reference
$3
| Prop | Type | Default | Description |
|------------------|-------------------------------|---------------|-----------------------------------------------------------------------------|
| buttonSettings | { position: string; size: number } | { position: 'bottomLeft', size: 40 } | Customize the position and size of the debug console button. |
$3
| Prop | Type | Default | Description |
|------------|-------------------------------|---------------|-----------------------------------------------------------------------------|
| fallback | (props: FallbackProps) => ReactNode | Default fallback UI | Custom fallback UI to display when an error occurs. |
---
Examples
$3
`tsx
import React from 'react';
import { DebugConsoleProvider, ErrorBoundary } from 'rocket-devtool';
const App = () => {
return (
Welcome to My App
{/ Your app components /}
);
};
export default App;
`
$3
``tsx
{error.message}