react-mobile-console

A lightweight, debug console component for React applications that provides an external debugging interface similar to browser developer tools. Perfect for mobile development, testing, and debugging React apps in various environments.

View Demo

How it works:

When the component mounts, the global console object methods (log, info, debug, time, timeEnd) are replaced with MobileConsole methods. When the component unmounts, the original methods are restored. Only for dev and test environments!

Features

• 🚀 External Debug Console - Overlay console that doesn't interfere with your app's UI
• 📱 Mobile-Friendly - Optimized for mobile devices with touch-friendly interface
• 🔧 Interactive REPL - Execute JavaScript code directly in the console
• 💾 Global Temp Storage - Save objects to global scope when clicked (like devtools)
• 🛡️ Failsafe Stringification - Safe stringification of all values

Installation

npm install react-mobile-console
# or
yarn add react-mobile-console

Quick Start

import { MobileConsole } from 'react-mobile-console';

function App() {
  return (
    <>
      <MobileConsole onClose={() => setShowConsole(false)} />
    </>
  );
}

License

MIT © teniryte