debugging-react-native

majiayu000's avatarfrom majiayu000

Use PROACTIVELY when debugging React Native apps. Reads console logs and executes JavaScript in running apps via Metro bundler. Invoke for: app crashes, state inspection, API debugging, error investigation, or running diagnostic code. Requires Metro running (port 8081).

⭐5stars🔀1forks📁View on GitHub🕐Updated Jan 11, 2026
[Debugging]

When & Why to Use This Skill

This Claude skill enables seamless, real-time debugging for React Native applications by interfacing directly with the Metro bundler. It empowers developers to proactively monitor console logs, execute JavaScript expressions within the live app context, and perform deep state inspections, significantly reducing the time required to resolve mobile app crashes and logic errors.

Use Cases

  • Crash Investigation: Capture and analyze real-time console logs and stack traces to identify the root cause of application crashes during development.
  • Live State Inspection: Execute JavaScript commands to inspect Redux stores, global variables, or component states in a running app without needing to recompile or add print statements.
  • Network & API Diagnostics: Run asynchronous fetch requests or diagnostic code directly within the app environment to verify API connectivity and response handling.
  • Log Filtering: Use regex-based filtering to isolate specific error patterns or warnings from the console stream, making it easier to track down intermittent bugs.
namedebugging-react-native
description"Use PROACTIVELY when debugging React Native apps. Reads console logs and executes JavaScript in running apps via Metro bundler. Invoke for: app crashes, state inspection, API debugging, error investigation, or running diagnostic code. Requires Metro running (port 8081)."
Connect to running React Native apps via Metro bundler to read console logs and execute JavaScript. Provides three tools for app discovery, log streaming, and JS execution in the app context. **Prerequisite:** `pip install websocket-client` **Assume a single app is connected.** Just call `read_logs.py` or `execute_in_app.py` directly - they auto-select the app when only one is connected (the typical case). 
# Read recent logs
python scripts/read_logs.py

# Execute JS in app
python scripts/execute_in_app.py "Date.now()"

Only use discover_apps.py or --app-id when you get an error about multiple apps being connected.

Stream console logs from app. 
python scripts/read_logs.py [--max-logs 100] [--filter "error|warn"] [--timeout 5]
  • --filter: Regex to filter log messages
  • --timeout: Seconds to collect logs (default: 5)
  • --app-id: Only needed if multiple apps connected
  • --metro-url: Override Metro URL (default: http://localhost:8081)

Errors and warnings include stack trace location.

Run JavaScript in the app's context (REPL-style). 
python scripts/execute_in_app.py "expression" [--no-await] [--timeout 10]

# Or pipe expression
echo "globalThis.myVar" | python scripts/execute_in_app.py
  • --no-await: Don't await Promise results
  • --app-id: Only needed if multiple apps connected
  • --metro-url: Override Metro URL (default: http://localhost:8081)
  • Supports any JS: variable access, function calls, IIFEs, etc.
Find React Native apps connected to Metro. **Only use this as a fallback** when `read_logs.py` or `execute_in_app.py` report multiple apps connected. 
python scripts/discover_apps.py [--metro-url URL] [--json]
**Check component state:** ```bash python scripts/execute_in_app.py "globalThis.__REDUX_DEVTOOLS_EXTENSION__ && globalThis.__REDUX_DEVTOOLS_EXTENSION__.getState()" ```

Filter for errors:

python scripts/read_logs.py --filter "error|Error|ERROR"

Run diagnostic code:

python scripts/execute_in_app.py "(async () => { const resp = await fetch('http://api.example.com/health'); return resp.status; })()"
Debugging is successful when: - Connected to the running app via Metro (no connection errors) - Able to read console logs that help identify the issue - Able to execute JS to inspect state or run diagnostics - Root cause identified or issue reproduced