@trace/sdk

AI-Powered Web Debugging SDK with 79 Debugging Tools

Full-power debugging SDK that provides programmatic access to all 79 debugging tools from the Trace engine. Connect to any web page, collect debugging data, and get AI-powered analysis.

Installation

npm install @trace/sdk

Quick Start

import { Trace, createTrace } from '@trace/sdk';

// Create and connect
const trace = await createTrace('https://example.com', {
  apiKey: 'your-api-key',
  headless: true
});

// Ask the AI to debug
const result = await trace.query('Why is my page slow?');
console.log(result.analysis);

// Or get quick health check
const health = await trace.healthCheck();
console.log(`Healthy: ${health.healthy}, Issues: ${health.issues}`);

// Cleanup
await trace.disconnect();

79 Debugging Tools

The SDK provides access to all 79 debugging tools across 8 categories:

Console (6 tools)

• get_console_logs - Get all console messages
• get_console_errors - Get error messages only
• get_error_groups - Get errors grouped by type
• get_exception_details - Get detailed exception info
• clear_console - Clear console store
• get_log_count - Get message counts by level

Network (10 tools)

• get_network_requests - Get all network requests
• get_network_failed - Get failed requests only
• get_network_summary - Get summary statistics
• get_request_details - Get specific request details
• get_cached_requests - Get cached requests
• get_request_timing - Get timing breakdown
• get_request_body - Get request body
• get_response_body - Get response body
• get_redirect_chain - Get redirect history
• replay_request - Re-execute a request

DOM (16 tools)

• inspect_element - Inspect DOM element
• get_element_styles - Get computed styles
• get_element_box_model - Get box model info
• query_selector - Query DOM selectors
• get_dom_tree - Get DOM structure
• get_element_attributes - Get element attributes
• get_element_events - Get event listeners
• analyze_visibility - Check visibility
• get_element_accessibility - Get ARIA info
• check_accessibility - Full a11y check
• highlight_element - Highlight in page
• scroll_to_element - Scroll element into view
• get_element_screenshot - Screenshot element
• get_computed_style - Get specific styles
• get_element_hierarchy - Get ancestors/descendants
• measure_element - Get measurements

Debugger (24 tools)

• get_debug_state - Get debugger state
• set_breakpoint - Set breakpoint
• remove_breakpoint - Remove breakpoint
• get_breakpoints - List all breakpoints
• set_conditional_breakpoint - Set conditional
• set_logpoint - Set logpoint
• pause_execution - Pause script
• resume_execution - Resume execution
• step_over - Step over
• step_into - Step into
• step_out - Step out
• get_call_stack - Get call stack
• get_scope_variables - Get variables in scope
• get_variable_value - Get specific variable
• set_variable_value - Modify variable
• evaluate_expression - Evaluate code
• evaluate_on_frame - Evaluate in frame context
• get_this_object - Get this binding
• add_watch - Add watch expression
• remove_watch - Remove watch
• get_watches - Get all watches
• enable_debugger - Enable debugger
• disable_debugger - Disable debugger
• get_possible_breakpoints - Get valid locations

Source (8 tools)

• get_scripts - Get all loaded scripts
• get_script_source - Get script content
• search_scripts - Search in scripts
• get_script_parsed - Get parsed info
• set_script_source - Live edit source
• blackbox_script - Blackbox script
• unblackbox_script - Unblackbox script
• get_script_coverage - Get coverage data

Performance (4 tools)

• get_performance_metrics - Get timing metrics
• start_performance_profile - Start profiling
• stop_performance_profile - Stop and get profile
• get_heap_snapshot - Get memory snapshot

Timeline (5 tools)

• get_timeline_events - Get timeline events
• start_timeline - Start recording
• stop_timeline - Stop recording
• get_event_listeners_timeline - Get event timeline
• take_timeline_snapshot - Take snapshot

Tracing (3 tools)

• start_trace - Start trace
• stop_trace - Stop trace
• get_trace_events - Get trace events

API Reference

Trace Class

const trace = new Trace({
  apiUrl?: string;     // API endpoint (default: https://dev-intelli-api.azurewebsites.net)
  apiKey?: string;     // API key for authentication
  headless?: boolean;  // Run headless (default: true)
  verbose?: boolean;   // Enable verbose logging
});

Connection

// Connect to a URL
await trace.connect('https://example.com');

// Navigate to new URL
await trace.navigate('https://example.com/page');

// Reload page
await trace.reload();

// Disconnect
await trace.disconnect();

AI Queries

// Ask anything
const result = await trace.query('What is causing the memory leak?');

// Quick debug scan
const debug = await trace.debug();

// Analyze performance
const perf = await trace.performance();

Direct Tool Access

// Run any tool directly
const errors = await trace.tool('get_console_errors', {});
const element = await trace.tool('inspect_element', { selector: '#my-button' });
const metrics = await trace.tool('get_performance_metrics', {});

Convenience Methods

// Console
const errors = await trace.getConsoleErrors();
const groups = await trace.getErrorGroups();

// Network
const failed = await trace.getNetworkFailed();
const summary = await trace.getNetworkSummary();

// DOM
const element = await trace.inspectElement('#button');
const visibility = await trace.analyzeVisibility('#modal');
const a11y = await trace.checkAccessibility();

// Debugger
await trace.setBreakpoint('script.js', 42);
const stack = await trace.getCallStack();
const vars = await trace.getScopeVariables();

// Performance
const metrics = await trace.getPerformanceMetrics();

// Page interaction
await trace.click('#button');
await trace.type('#input', 'hello');
const result = await trace.evaluate('document.title');
await trace.screenshot('page.png');

Health Check

const health = await trace.healthCheck();
// { healthy: true, issues: 0, critical: 0 }

Examples

Debug a failing page

import { createTrace } from '@trace/sdk';

const trace = await createTrace('https://myapp.com');

// Ask AI to investigate
const result = await trace.query('Why are there console errors?');

console.log('Summary:', result.analysis.summary);

for (const issue of result.analysis.issues) {
  console.log(`[${issue.severity}] ${issue.title}`);
  console.log(`  Fix: ${issue.fix}`);
}

await trace.disconnect();

Monitor errors

import { createTrace } from '@trace/sdk';

const trace = await createTrace('https://myapp.com');

// Watch for 30 seconds
const interval = setInterval(async () => {
  const errors = await trace.getConsoleErrors();
  const failed = await trace.getNetworkFailed();
  
  console.log(`Errors: ${errors.length}, Failed: ${failed.length}`);
}, 5000);

setTimeout(async () => {
  clearInterval(interval);
  await trace.disconnect();
}, 30000);

Debug with breakpoints

import { createTrace } from '@trace/sdk';

const trace = await createTrace('https://myapp.com');

// Set breakpoint
await trace.setBreakpoint('app.js', 100);

// Trigger action
await trace.click('#submit-button');

// When paused, inspect
const stack = await trace.getCallStack();
const vars = await trace.getScopeVariables();

console.log('Call stack:', stack);
console.log('Variables:', vars);

await trace.disconnect();

License

MIT