Advanced

Headless Usage

If you don't want to use the default floating toolkit UI, you can use the toolkit's hooks to build your own entirely custom debugging interface.

tsx

import { useNetworkInterceptor, usePerformanceMetrics } from "devconsole-package";

export function MiniPerformanceDashboard() {
  const { lcp, fcp } = usePerformanceMetrics();
  const { requests } = useNetworkInterceptor();

  return (
    
      LCP: {lcp}ms | FCP: {fcp}ms
      Active Requests: {requests.filter(r => !r.endTime).length}
    
  );
}

PreviousTab Controls Next Integration Examples