# Console

<!-- ::platform-badge platform="both" -->

Read captured `console.log`, `console.info`, `console.warn`, and `console.error` calls in your app. Filter by level or search the message, then expand structured arguments for context. Capture begins after the tool installs its hooks and account access permits it.

<!-- ::tool-film id="console" -->

<!-- ::console-live-demo -->

## Installation

<!-- ::PM npm="npm install @buoy-gg/console" yarn="yarn add @buoy-gg/console" pnpm="pnpm add @buoy-gg/console" bun="bun add @buoy-gg/console" -->

That's it. The Console tool auto-appears in your `FloatingDevTools` menu, and capture starts automatically at app launch — logs emitted before you open the tool are retained:

```tsx
import { FloatingDevTools } from "@buoy-gg/core";

export default function App() {
  return (
    <>
      {/* your app */}
      <FloatingDevTools />  {/* Console tool auto-detected, capture auto-starts */}
    </>
  );
}
```

It patches `console.*` directly, so logs from your own code and your dependencies are captured — no logger integration or Babel plugin required. Fatal/uncaught JS errors are captured too: the tool hooks React Native's global error handler (chaining any existing one), so a crash — even one during the app's very first render — lands in the log as a `[FATAL]`-tagged error entry instead of disappearing.

> **Upgrading?** Older versions required mounting `<ConsoleRoot />` manually and passing `consoleToolPreset` via `apps`. Both are automatic now; existing manual wiring is harmless and can be deleted.

---

## What You Can Do

- **See every log, live** — `log`, `info`, `warn`, and `error` stream in as they happen, color-coded by level.
- **Filter by level** — Focus on just errors and warnings when you're chasing a bug.
- **Search** — Filter messages by substring to find the exact log you care about.
- **Read production logs** — Because Buoy runs on-device in any build, you can read console output from a release build with no cable and no Metro connection.
- **Expand structured data** — Objects and arrays are formatted and expandable, just like the browser console.

---

## Read the console from your AI

With the [MCP server](../mcp), an AI agent can read the console tail directly with `get_console` — filtering by minimum level or message substring to pull just the errors it needs while debugging.

---

## What's Next

- [Events Timeline](./events) — Console logs alongside network, state, and route events
- [Network Monitor](./network) — Inspect the requests behind an error
- [AI / MCP Server](../mcp) — Let an agent read the console for you

---

## FAQ

### How do I see console logs in a React Native production build?

Install `@buoy-gg/console` — logs are captured in the app itself and viewable from the floating menu. Production use requires Pro and app-controlled access. Logs stripped from the bundle or emitted before capture starts are unavailable.

### Do I still need the Metro terminal or React Native DevTools?

For breakpoints, yes — keep React Native DevTools. For reading logs anywhere (including devices not attached to your machine), the in-app console replaces terminal-watching.

## Web support

Register this package’s /web namespace in FloatingDevTools modules to use its shared panels and actions in a browser app. Import it from the package's `/web` entry (7.0.41 or later). See [Web installation](../web/installation#tool-setup) for registration, dependencies, and browser boundaries.

## Native iOS (Swift)

Console is also part of [Buoy for Swift](../swift/overview) for SwiftUI and UIKit apps. Setup and what the Swift version covers are in the [Swift tools guide](../swift/tools#console).