npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

debug-shell

v0.0.0-alpha.1

Published

A debugging tool for React applications to track and visualize state and event data

Downloads

62

Readme

DebugShell debugging tool to track and visualize state and events in React applications

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

img


How to Use

Side Panel Integration

Wrap your application with <DebugShellSidePanel> to enable a debugging side panel:

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

const App = () => {
  return (
    <DebugShellSidePanel>
      <YourApp />
    </DebugShellSidePanel>
  );
};

Component Integration

Add a debug Shell anywhere in your app to render JSON or any state for debugging purposes:

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

const App = () => {
  const userState = {
    name: 'TestUser',
    age: 23,
    email: '[email protected]',
  };

  return (
    <div>
      <h1>Welcome to the App</h1>
      <DebugShell json={userState} />
    </div>
  );
};

Hook for State Tracking

Use the useDebugValue hook to track specific state values in your app:

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

const MyComponent = () => {
  const userState = {
    name: 'TestUser',
    age: 23,
    email: '[email protected]',
  };

  useDebugValue('userState', userState);

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

Function for Logging Custom Data

Use the debugValue function to log specific events or custom data for debugging:

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

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

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

Key Features

  • State and Event Tracking:
    • Use useDebugValue to monitor and log component state.
    • Use debugValue to log custom events and data.
  • Developer-Friendly: Easy to integrate, no changes to your app's structure.

Installation

npm install debug-shell

API Overview

Components

| Component | Description | |------------------------|----------------------------------------------------------------------------| | <DebugShell /> | Component | | <DebugShellSidePanel> | Wrapper Component |

Hooks and Functions

| API | Description | |------------------|--------------------------------------------------------------------------------------------------| | useDebugValue | Hook for tracking state. | | debugValue | Function for logging custom data or events to the debugging tool. |