Trace - Debugging Intelligence for Distributed Systems
AI-Powered Web Debugging from the Terminal
Command-line interface for Trace, providing access to all 79 debugging tools. Analyze pages, find errors, check performance, and debug interactively - all from your terminal.
``bash`
npm install -g @trace/cli
Or run with npx:
`bash`
npx @trace/cli analyze https://example.com
`bashBasic analysis
trace analyze https://example.com
Options:
-
-q, --query - Specific question to ask
- --api-url - API endpoint
- --api-key - API key
- --headless / --no-headless - Browser visibility
- --json - Output as JSON
- -v, --verbose - Verbose output$3
`bash
trace debug https://example.com
`Runs a comprehensive debug scan checking console, network, DOM, and performance.
$3
`bash
Show errors
trace errors https://example.comJSON output
trace errors https://example.com --json
`$3
`bash
Full network summary
trace network https://example.comFailed requests only
trace network https://example.com --failedJSON output
trace network https://example.com --json
`$3
`bash
trace perf https://example.com
`Shows:
- DOM Content Loaded time
- First Contentful Paint
- JS Heap Size
- DOM Nodes count
- Layout count
- Performance issues
$3
`bash
trace a11y https://example.com
`Finds accessibility issues like:
- Missing alt text
- Low contrast
- Missing labels
- Keyboard issues
$3
`bash
Check health (exits with code 1 if unhealthy)
trace health https://example.comUse in CI
trace health https://example.com || echo "Site has issues!"
`$3
`bash
trace inspect https://example.com "#my-button"
`Shows:
- Element info (tag, id, class)
- Visibility status
- Box model dimensions
$3
`bash
Run any of the 79 tools
trace tool https://example.com get_console_errors
trace tool https://example.com get_performance_metrics
trace tool https://example.com inspect_element -i '{"selector": "#app"}'
`$3
`bash
trace tools
`Lists all 79 available debugging tools by category.
$3
`bash
Default filename
trace screenshot https://example.comCustom filename
trace screenshot https://example.com page.png
`$3
`bash
Watch for 30 seconds
trace watch https://example.comWatch for 60 seconds
trace watch https://example.com -d 60
`Monitors console errors and failed network requests in real-time.
$3
`bash
trace repl https://example.com
`Opens an interactive debugging session with commands:
`
Commands:
/debug - Full debug scan
/errors - Get console errors
/network - Network summary
/perf - Performance metrics
/a11y - Accessibility check
/tool - Run a specific tool
/eval - Evaluate JavaScript
/nav - Navigate to URL
/reload - Reload page
/screenshot - Take screenshot
/help - Show all commands
/exit - Exit REPLOr just type a question to ask the AI!
`Example REPL session:
`
trace> /errors
[]trace> Why is the page loading slowly?
š Analyzing...
š Analysis Results
āāāāāāāāāāāāāāāāāāāāāāāāā
Summary:
The page has 3 performance issues...
Issues (3):
š [HIGH] Large JavaScript Bundle
The main.js file is 2.5MB uncompressed
Fix: Enable code splitting and tree shaking
trace> /perf
{
"DOMContentLoaded": 1234,
"FirstContentfulPaint": 2100,
...
}
trace> /exit
`CI/CD Integration
$3
`yaml
- name: Check site health
run: |
npx @trace/cli health https://myapp.com
- name: Run debug analysis
run: |
npx @trace/cli analyze https://myapp.com --json > debug-report.json
`$3
-
0 - Success / Healthy
- 1 - Errors found / UnhealthyConfiguration
$3
`bash
export TRACE_API_URL="https://your-api.com"
export TRACE_API_KEY="your-key"
`$3
`bash
trace analyze https://example.com --api-key YOUR_KEY
`All 79 Tools
Run
trace tools` to see all available tools:Console (6): get_console_logs, get_console_errors, get_error_groups, get_exception_details, clear_console, get_log_count
Network (10): get_network_requests, get_network_failed, get_network_summary, get_request_details, get_cached_requests, get_request_timing, get_request_body, get_response_body, get_redirect_chain, replay_request
DOM (16): inspect_element, get_element_styles, get_element_box_model, query_selector, get_dom_tree, get_element_attributes, get_element_events, analyze_visibility, get_element_accessibility, check_accessibility, highlight_element, scroll_to_element, get_element_screenshot, get_computed_style, get_element_hierarchy, measure_element
Debugger (24): get_debug_state, set_breakpoint, remove_breakpoint, get_breakpoints, set_conditional_breakpoint, set_logpoint, pause_execution, resume_execution, step_over, step_into, step_out, get_call_stack, get_scope_variables, get_variable_value, set_variable_value, evaluate_expression, evaluate_on_frame, get_this_object, add_watch, remove_watch, get_watches, enable_debugger, disable_debugger, get_possible_breakpoints
Source (8): get_scripts, get_script_source, search_scripts, get_script_parsed, set_script_source, blackbox_script, unblackbox_script, get_script_coverage
Performance (4): get_performance_metrics, start_performance_profile, stop_performance_profile, get_heap_snapshot
Timeline (5): get_timeline_events, start_timeline, stop_timeline, get_event_listeners_timeline, take_timeline_snapshot
Tracing (3): start_trace, stop_trace, get_trace_events
MIT