Core API

The @frontend-debugger/core package exports all primitives for programmatic use outside of the MCP server.

Installation

npm install @frontend-debugger/core

Connection

import { connect, disconnect, isConnected, navigateTo, captureScreenshot } from '@frontend-debugger/core';

const client = await connect({ port: 9222 });
await navigateTo(client, 'http://localhost:3000');
const png = await captureScreenshot(client, { fullPage: true });
await disconnect(client);

Export	Description
connect(opts)	Establish CDP connection
disconnect(client)	Close connection
isConnected(client)	Check connection state
getConnectionInfo(client)	Browser and target info
evaluate(client, expr)	Evaluate JS in the page
navigateTo(client, url)	Navigate to URL
captureScreenshot(client, opts)	Capture PNG
setViewport(client, width, height)	Set viewport size
clearViewport(client)	Reset viewport
listTargets(client)	List browser tabs

Framework detection

import { detectFrameworks, hasFramework } from '@frontend-debugger/core';

const result = await detectFrameworks(client);
if (hasFramework(result, 'react')) {
  // React-specific tools available
}

Component inspection

React

import { getComponentTree, inspectReactComponent, getRenderReasons } from '@frontend-debugger/core';

const tree = await getComponentTree(client, { depth: 8 });
const details = await inspectReactComponent(client, 'Header');
const reasons = await getRenderReasons(client, 'Header');

Vue

import { getVueComponentTree } from '@frontend-debugger/core';

const tree = await getVueComponentTree(client, { depth: 8 });

Svelte / Angular

import { getSvelteComponentTree, getAngularComponentTree } from '@frontend-debugger/core';

Accessibility

import { runA11yAudit, checkContrast, checkFocusOrder, auditAria } from '@frontend-debugger/core';

const a11y = await runA11yAudit(client, { tags: ['wcag2aa'] });
const contrast = await checkContrast(client);
const focus = await checkFocusOrder(client);
const aria = await auditAria(client);

Visual regression

import { captureBaseline, compareWithBaseline, listBaselines } from '@frontend-debugger/core';

await captureBaseline(client, 'homepage', { projectRoot: '.' });
const diff = await compareWithBaseline(client, 'homepage', { threshold: 0.1, projectRoot: '.' });

if (!diff.pass) {
  console.log(`${diff.diffPercentage}% changed`);
}

Session recording

import {
  startRecording, stopRecording, getFailureBundle,
  exportSessionToHtml, traceNetworkCause
} from '@frontend-debugger/core';

const session = await startRecording(client);
// ... user actions ...
const summary = await stopRecording(client);
const bundle = await getFailureBundle(session);
const causes = await traceNetworkCause(session);
await exportSessionToHtml(session, { outputPath: 'replay.html', projectRoot: '.' });

Performance

import { auditPerf } from '@frontend-debugger/core';

const vitals = await auditPerf(client);
console.log(`LCP: ${vitals.lcp.value}ms (${vitals.lcp.rating})`);

Types

All result types are exported for TypeScript consumers:

import type {
  ComponentNode, HookInfo, InspectedComponent, RenderReason,
  VueComponentNode, SvelteComponentNode, AngularComponentNode,
  A11yViolation, A11yResult, ContrastIssue, ContrastResult,
  FocusableElement, FocusTrap, FocusOrderResult,
  AriaIssue, AriaAuditResult,
  SnapshotResult, DiffResult, ViewportCapture, ResponsiveIssue,
  WebVitalMetric, LcpElement, PerfResult,
  TokenDefinition, TokenViolation, TokenAuditResult,
  SessionRecording, SessionSummary, NetworkEntry, ConsoleEntry, ErrorEntry,
  SessionDiff, CausalChain, BisectStep, BisectResult,
  StoryEntry, RenderedStory,
  DarkModeResult, AnimationEntry, ReducedMotionResult,
  StoreInfo, StateStoresResult, MutatePropsResult,
  ComponentProfile, ProfileResult,
  FdConfig, DetectionResult, FrameworkInfo, CDPTarget,
} from '@frontend-debugger/core';