DiagramPreview
Aperçu avancéSans IAAperçu localExportDébogage

Visionneuse de fichier HAR

Collez du contenu pour Visionneuse de fichier HAR et générez un aperçu local vérifiable pour déboguer configurations, réponses API, fichiers SEO et snippets générés par AI.

Exemples
Detected JSON

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

HAR waterfall previewPrêt
Your HAR timeline will appear here.

Continuer avec un outil lié

Envoyez cette prévisualisation vers un workflow proche pour convertir, déboguer ou exporter.

Générateur de diagrammes IA

Générateur de diagrammes IA pour prévisualisation, review et export dans la documentation développeur.

Ouvrir
Correcteur Mermaid IA

Correcteur Mermaid IA pour prévisualisation, review et export dans la documentation développeur.

Ouvrir
Architecture Diagram Generator

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

Ouvrir

Comment utiliser

  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.

Cas d’usage

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

Outils associés

Générateur de diagrammes IA

Générateur de diagrammes IA pour prévisualisation, review et export dans la documentation développeur.

Correcteur Mermaid IA

Correcteur Mermaid IA pour prévisualisation, review et export dans la documentation développeur.

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 revue pour Visionneuse de fichier HAR

Utilisez Visionneuse de fichier HAR pour inspecter visuellement une source avant documentation, note de PR, post-mortem ou transfert. Visionneuse de fichier HAR: Prévisualisez et déboguez cette source localement pour la documentation technique.

Avant export, vérifiez la lisibilité, les relations, les données sensibles et la cohérence après modification.

Limites et dépannage

Si l'aperçu échoue, réduisez l'entrée au plus petit exemple complet, validez la syntaxe puis réajoutez les sections.

Considérez l'aperçu comme une surface de revue, pas comme une source de vérité. Les résultats critiques doivent être validés.

Exemples à tester

  • 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" } }...

Maturité de l'outil

Aperçu avancé

Analyse avancée

Cet outil extrait la structure et les relations depuis des entrées développeur. Les cas complexes doivent être vérifiés avec la source.

Le libellé indique si l'outil convient surtout à l'export stable, au débogage, à l'analyse rapide ou à la génération AI.