> ## Documentation Index
> Fetch the complete documentation index at: https://jam.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# DevTools

> Inspect console logs, network requests, user events, and device info inside every Jam. The same toolkit engineers use in the browser.

Every Jam capture includes developer information to help engineers debug faster. Get instant access to console logs, network data, and environment details without switching between tools or losing context.

## Core Features

<CardGroup cols={2}>
  <Card title="Visual context" img="https://mintcdn.com/jam-1eb4fd26/3Mtv5mLh0Dqadb4R/images/video-player-timeline-markers.png?fit=max&auto=format&n=3Mtv5mLh0Dqadb4R&q=85&s=1051ab1ac4e5b98c6ed8aa5e58626ea4" width="1803" height="951" data-path="images/video-player-timeline-markers.png">
    Screenshots and screen recordings with annotation tools
  </Card>

  <Card title="Custom Logs" img="https://mintcdn.com/jam-1eb4fd26/3Mtv5mLh0Dqadb4R/images/metadata-panel.png?fit=max&auto=format&n=3Mtv5mLh0Dqadb4R&q=85&s=e0a48b04c17ee3d53219ba2608dbca04" width="1803" height="951" data-path="images/metadata-panel.png">
    URL, timestamp, device info, browser version, OS and more
  </Card>

  <Card title="Developer logs" img="https://mintcdn.com/jam-1eb4fd26/3Mtv5mLh0Dqadb4R/images/console-log-stream.png?fit=max&auto=format&n=3Mtv5mLh0Dqadb4R&q=85&s=551b77da78536c7c21c38400f10b83d9" width="1803" height="951" data-path="images/console-log-stream.png">
    Console logs and complete network request details and more
  </Card>

  <Card title="User events" img="https://mintcdn.com/jam-1eb4fd26/3Mtv5mLh0Dqadb4R/images/user-events-timeline.png?fit=max&auto=format&n=3Mtv5mLh0Dqadb4R&q=85&s=4975e16007538fc1137607b25fbd1d8d" width="1803" height="951" data-path="images/user-events-timeline.png">
    Clicks, navigation events, and more
  </Card>

  <Card title="MCP" href="/jam-mcp" img="https://mintcdn.com/jam-1eb4fd26/NaIbWrQ5PJRPHScp/images/apps/mcp-logo-card.png?fit=max&auto=format&n=NaIbWrQ5PJRPHScp&q=85&s=22dd5009b75fa8f2766f4d4e284b7771" alt="MCP logo" width="800" height="630" data-path="images/apps/mcp-logo-card.png">
    Send DevTools context to AI agents so they can inspect logs, network requests, and user events.
  </Card>
</CardGroup>

## Layouts

Switch between side and bottom layouts to fit your workflow:

<Tabs>
  <Tab title="DevTools visible">
    DevTools appear on the right side in the properties panel for wide-screen debugging. Ideal when you need to see both the captured page and technical details simultaneously.
  </Tab>

  <Tab title="Content only">
    Hide DevTools to show only the visual captured content and activity including comments.
  </Tab>
</Tabs>

## FAQs

<AccordionGroup>
  <Accordion title="Do I need to enable DevTools manually?">
    No. DevTools data is automatically captured with every Jam. No setup or configuration required. You can capture additional meta data with [Custom logs](/custom-logs).
  </Accordion>

  <Accordion title="Can I filter console logs by severity?">
    Yes. Use the severity filter to show only errors, warnings, or specific log levels that matter for debugging.
  </Accordion>

  <Accordion title="How detailed is the network timing data?">
    You get complete timing breakdowns including DNS lookup, connection time, and response duration, matching the data engineers expect from Chrome DevTools.
  </Accordion>
</AccordionGroup>
