🥷 console-ninja-web

In-Browser Network Inspector, cURL Copier, API Replayer, Mock Engine & DevTools for React Apps
Add Console Ninja to any React / Vite / Next.js / CRA project in just 2 steps — zero backend required.

🚀 Features

• ⚡ Zero Backend Required — Automatically intercepts fetch and XMLHttpRequest (Axios) directly in the browser. No proxy, no server setup.
• 📋 One-Click cURL Copy — Copy any captured API request as a curl command, fetch() code, or Axios snippet instantly.
• 🔑 Bearer Token Injection — Override or inject a custom JWT token into any copied cURL or replayed request.
• 🔄 API Replay — Re-execute any recorded request directly from the browser and view the live response.
• 🔍 Response Diff Viewer — Side-by-side comparison of the original recorded response vs. the live replay result, with highlighted differences.
• 📮 Postman Collection Export — Select specific requests using checkboxes and export them as a Postman Collection v2.1 file. Import directly into Postman.
• 🎭 Response Mocking — Define mock rules by URL pattern. Matching requests return your fake JSON response instead of hitting the real API.
• ⚡ Slow Request Warnings — Requests exceeding the configured threshold (default: 1000ms) are flagged with an ⚡ SLOW badge and highlighted in orange.
• 🔌 WebSocket Inspector — Captures WebSocket connections and all sent/received messages in real time.
• 🔒 Passcode Protected — Secure developer-only access with a session passcode lock (default: console132).
• 📦 Export as JSON — Download the full network log as a raw JSON file.
• ⚡ Zero Dependencies — Self-contained SVG icons, scoped dark-theme CSS. No Tailwind, no icon libraries.

📦 Installation

npm install console-ninja-web

🛠️ Integration — Just 2 Steps

Step 1 — Initialize in your entry point (main.jsx or index.js)

Add these two lines at the very top of your entry file:

// src/main.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";

// 🥷 Step 1: Initialize Console Ninja
import { initConsoleNinja } from "console-ninja-web";
initConsoleNinja({
  passcode: "console132", // Your custom developer passcode
});

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

Step 2 — Add the Viewer Route (App.jsx)

Add the /console-ninja route to your React Router setup:

// src/App.jsx
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { ConsoleNinjaViewer } from "console-ninja-web";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* Your existing routes */}
        <Route path="/" element={<Home />} />
        <Route path="/dashboard" element={<Dashboard />} />

        {/* 🥷 Step 2: Console Ninja DevTools */}
        <Route
          path="/console-ninja"
          element={<ConsoleNinjaViewer passcode="console132" />}
        />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

🎉 Done! Open in your browser:
👉 http://localhost:5173/console-ninja
Enter passcode: console132

⚙️ Configuration Options (initConsoleNinja)

| Option | Type | Default | Description | | :--- | :--- | :--- | :--- | | passcode | string | "console132" | Passcode required to unlock the DevTools panel | | enabled | boolean | true (in dev) | Toggle the network sniffer on or off | | viewerPath | string | "/console-ninja" | URL path where the viewer component is mounted | | showFloatingButton | boolean | false | Show a floating launcher button on screen | | maxLogs | number | 300 | Maximum number of requests stored in memory | | printInConsole | boolean | true | Print colored, grouped logs in the browser DevTools console | | slowThreshold | number | 1000 | Requests slower than this value (ms) are flagged as slow ⚡ | | beaconUrl | string \| null | null | Optional URL to forward logs via navigator.sendBeacon |

Example with Custom Options

initConsoleNinja({
  passcode: "mySecretDev123",
  slowThreshold: 2000,         // Flag requests slower than 2 seconds
  showFloatingButton: false,   // No floating button; access via URL only
  enabled: import.meta.env.DEV, // Active in development only
});

📮 Postman Collection Export (with Selection)

Select individual requests using the checkboxes in the request list, then click 📮 Postman in the toolbar to export only the selected requests as a Postman Collection v2.1 file.

If no requests are selected, all visible (filtered) requests are exported.

🎭 Response Mocking

Click 🎭 Mocks in the toolbar to open the Mock Rules panel.

1. Enter a URL pattern (e.g. /api/users)
2. Enter the mock response JSON
3. Set the HTTP status code (default: 200)
4. Click Add Mock

From that point on, any fetch or XMLHttpRequest whose URL contains that pattern will return your fake response — the real API will not be called.

Mock rules are persisted in localStorage and synced across tabs in real time.

🔌 Optional: Floating Launch Button

Display a floating button in the corner of your app to open Console Ninja:

import { ConsoleNinjaFloatingButton } from "console-ninja-web";

function MyLayout() {
  return (
    <div>
      {/* Your UI */}
      <ConsoleNinjaFloatingButton passcode="console132" />
    </div>
  );
}

Or enable it directly via config:

initConsoleNinja({
  passcode: "console132",
  showFloatingButton: true,
});

📤 How to Build & Publish to NPM

If you are maintaining a fork or publishing a customized version:

# Navigate to the package folder
cd packages/console-ninja-web

# Build the library
npm run build

# Login to NPM
npm login

# Publish
npm publish --access public

📄 License

MIT © AasPass Tech Team