DiagramPreview
Vista avanzadaSin IAVista localExportarDepuración

Visor de archivos HAR

Pega contenido para Visor de archivos HAR y genera una vista local revisable para depurar configuración, respuestas de API, archivos SEO y fragmentos generados con AI.

Ejemplos
Detected JSON

This input may work better in the matching tool. Open JSON tool

HAR waterfall previewListo
Your HAR timeline will appear here.

Continúa con una herramienta relacionada

Lleva esta vista previa a un flujo cercano para convertir, depurar o exportar.

Generador de diagramas con IA

Generador de diagramas con IA para vista previa, review y exportación en documentación de desarrollo.

Abrir
Corrector Mermaid con IA

Corrector Mermaid con IA para vista previa, review y exportación en documentación de desarrollo.

Abrir
Architecture Diagram Generator

Generate Mermaid architecture diagrams from product or system notes with AI.

Abrir

Cómo usar

  1. 1Export a HAR file from browser DevTools after reproducing the issue.
  2. 2Paste a sanitized HAR sample and inspect request count, total time, failed calls, hosts, and slowest requests.
  3. 3Look for long waits, repeated calls, 4xx/5xx responses, large payloads, and third-party hosts.
  4. 4Share a screenshot or exported summary after removing cookies, tokens, and private headers.

Casos de uso

Frontend performance debuggingAPI waterfall reviewIncident screenshotsThird-party request auditBrowser network export preview

Herramientas relacionadas

Generador de diagramas con IA

Generador de diagramas con IA para vista previa, review y exportación en documentación de desarrollo.

Corrector Mermaid con IA

Corrector Mermaid con IA para vista previa, review y exportación en documentación de desarrollo.

Architecture Diagram Generator

Generate Mermaid architecture diagrams from product or system notes with AI.

FAQ

Can I paste a production HAR file safely?

Only after sanitizing it. HAR files can contain cookies, Authorization headers, URLs with tokens, and private request bodies.

What should I inspect first?

Start with failed requests, total page time, slowest requests, duplicate calls, and unexpected third-party hosts.

Is HAR Viewer enough for root-cause analysis?

It is a triage surface. Use traces, server logs, and browser performance profiles for deeper root-cause analysis.

HAR File Viewer previews browser network exports as request timelines, status summaries, slowest calls, host breakdowns, and waterfall-style debugging notes.

It helps frontend and API engineers inspect real browser behavior without opening a heavy desktop tool or pasting sensitive logs into an AI chat.

Use it to compare page loads, explain slow endpoints in issues, prepare incident screenshots, and decide which requests deserve deeper tracing.

Demo: turn a browser export into an API debugging note

A good HAR review captures the user action, then explains which request was slow or failed. The viewer helps reduce a raw JSON export into a few facts that belong in an issue.

  • Record only the failing workflow, not a full browsing session.
  • Remove cookies, Authorization, Set-Cookie, and private query parameters.
  • Compare status codes and timings before assuming the frontend is at fault.
1. Reproduce checkout submit
2. Export HAR from DevTools Network panel
3. Remove Cookie and Authorization headers
4. Inspect failed requests and slowest calls
5. Attach screenshot plus sanitized request IDs

This workflow creates a useful bug report without exposing the entire browser session.

Performance debugging: read HAR as a waterfall, not a table

A HAR file is most useful when it explains where time is spent. Sort and group requests by navigation phase, cache behavior, blocking time, and third-party domains instead of only scanning status codes.

  • Look for long queued or blocked times before blaming the backend.
  • Group third-party scripts and fonts to see their total page cost.
  • Compare transferred size with decoded size to catch compression and cache issues.
GET /app.js 200 42ms 18KB cached
GET /api/feed 200 840ms 74KB network
GET https://analytics.example/script.js 200 310ms 92KB third-party

Checklist de revisión para Visor de archivos HAR

Usa Visor de archivos HAR para inspeccionar visualmente contenido fuente antes de publicar documentación, notas de PR, incidentes o handoffs. Visor de archivos HAR: Previsualiza y depura esta fuente en una superficie local para documentación técnica.

Antes de exportar, revisa legibilidad, relaciones, datos sensibles y si la vista sigue teniendo sentido tras editar la entrada.

Límites y solución de problemas

Si la vista falla, reduce la entrada al ejemplo completo más pequeño, valida la sintaxis y agrega secciones gradualmente.

Trata la vista como superficie de revisión, no como fuente de verdad. Los resultados críticos requieren validación humana.

Entradas de ejemplo

  • Checkout HAR: { "log": { "version": "1.2", "creator": { "name": "DiagramPreview" }, "entries": [ { "startedDateTime": "2026-06-16T10:00:00.000Z", "time": 82, "request": { "method": "GET", "url":...
  • Slow API: { "log": { "entries": [ { "time": 1280, "request": { "method": "GET", "url": "https://api.example.com/reports/monthly" }, "response": { "status": 200, "content": { "mimeType": "app...
  • Third-party assets: { "log": { "entries": [ { "time": 42, "request": { "method": "GET", "url": "https://cdn.example.com/app.css" }, "response": { "status": 200, "content": { "mimeType": "text/css" } }...

Madurez de la herramienta

Vista avanzada

Analizador avanzado

Esta herramienta extrae estructura y relaciones de entradas de desarrollo. Los casos complejos deben comprobarse contra la fuente.

La etiqueta indica si la herramienta sirve mejor para exportar, depurar, analizar rápido o generar con AI.