DebugShell

A debugging tool for Web applications that helps developers easily track and visualize state and event data in the development process.

---

Key features

• State and event tracking:
  • Use useDebug to monitor component state.
  • Use debug to monitor events.
  • Use debugStore to monitor stores for nanostores.
• Developer-Friendly: Easy to integrate, no changes to your app's structure. No provider or context required.

---

Installation

npm install debug-shell@0.0.0-alpha.3.6 monaco-editor @monaco-editor/react

How to use

Side panel integration

Wrap your application with <DebugShell> to enable the debug shell as side panel:

import React from 'react';
import { DebugShell } from 'debug-shell';

function App() {
  return (
    <DebugShell>
      <YourApp />
    </DebugShell>
  );
};

---

Component integration

Integrate the <DebugShell> as component in your app. You can place it anywhere in your app:

import React from 'react';
import { DebugShell } from 'debug-shell';

function App(){

  return (
    <div>
        <YourApp />
        <YourSidebar >
          <DebugShell />
        </YourSidebar>
    </div>
  );
};

---

useDebug for state tracking

To monitor state, use the useDebug hook:

import React from 'react';
import { useDebug } from 'debug-shell';

function MyComponent() {
  const userState = useState({
    name: 'TestUser',
    age: 23,
    email: 'test@test.com',
  });

  useDebug('userState', userState);

  return <p>Name: {userState.name}</p>;
};

---

debug for event tracking

To monitor events, use the debugValue function:

import React from 'react';
import { debug } from 'debug-shell';

function MyComponent() {
  const handleClick = (event) => {
    debug('onClickEvent', event);
    alert('Button clicked!');
  };

  return <button onClick={handleClick}>Click Me</button>;
};

debugStore for store tracking from nanostores.

The debugStore function can be used outside of React components to register nanostores:

import { atom } from 'nanostores';
import { debugStore } from 'debug-shell';

const counterStore = atom({ count: 0 })

debugStore("counterStore", counterStore)

setInterval(() => {
  counterStore.set({ count: counterStore.get().count + 1 })
}, 1e3)

API Overview

Components

Component	Description
<DebugShell />	Debugging tool for tracking state and events.

Hooks and functions

API	Description
debug	Function for tracking events.
debugStore	Function for tracking nanostores.
useDebug	Hook for tracking state.

---