HAR Explorer for VS Code

A powerful, native-feeling HTTP Archive (.har) viewer for Visual Studio Code — bringing Chrome DevTools Network Tab experience right into your editor.

🎯 What is HAR Explorer?

HAR Explorer transforms how you analyze network traffic by providing a seamless, high-performance interface for inspecting HAR files directly within VS Code. No more switching between tools — debug API calls, analyze performance bottlenecks, and inspect request/response data without leaving your development environment.

HAR (HTTP Archive) files capture detailed information about web browser interactions with a site. They're essential for debugging, performance analysis, and understanding API behavior.

✨ Key Features

📋 Chrome DevTools-Inspired Interface

• Familiar Split-Pane Layout — Master list on the left, detailed view on the right
• 5 Specialized Tabs — Headers, Payload, Preview, Response, and Timing
• Smart Tab Selection — Automatically opens the most relevant tab based on content type

🔍 Powerful Search & Filtering

• URL Search — Quickly find requests by endpoint path
• Body Search — Deep search through request and response bodies
• Method Filters — Toggle visibility for GET, POST, PUT, DELETE, PATCH, OPTIONS, HEAD
• Dual Search Modes:
  • Filter Mode: Hide non-matching requests
  • Highlight Mode: Show all requests with matches highlighted

⚡ Performance Optimized

• Virtual Scrolling — Handle thousands of requests without performance degradation
• Smart Truncation — Large responses are truncated in the viewer to maintain responsiveness
• "Open in Editor" — One-click to view full response data in VS Code's native editor

🎨 Native VS Code Integration

• Theme Aware — Seamlessly adapts to Light, Dark, and High Contrast themes
• Customizable Fonts — Inherit from VS Code settings or configure separately
• Resizable Panes — Drag to adjust the split between list and details
• State Persistence — Your filters, selected tab, and pane width are remembered across sessions

📊 Detailed Request Analysis

• Headers Tab — View General info, Request Headers, and Response Headers in collapsible sections
• Payload Tab — Inspect Query String Parameters, JSON payloads, and Form Data
• Preview Tab — Rendered JSON tree with expand/collapse controls, images, and formatted text
• Response Tab — Raw response body with syntax hints
• Timing Tab — Visual waterfall breakdown (DNS, SSL, TTFB, Download, etc.)

📦 Installation

From VS Code Marketplace

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
3. Search for "HAR Explorer"
4. Click Install

From VSIX

1. Download the .vsix file from Releases
2. In VS Code, go to Extensions → ... menu → Install from VSIX...
3. Select the downloaded file

🚀 Usage

Opening HAR Files

Option 1: Double-click

• Simply double-click any .har file in VS Code's Explorer

Option 2: Context Menu

• Right-click a .har file → Open with HAR Explorer

Option 3: Editor Title Action

• When viewing a .har file as text, click the preview icon in the editor title bar

Navigating Requests

1. Browse the Request List — Scroll through all captured network requests
2. Select a Request — Click any row to view its details in the right pane
3. Use Keyboard Navigation — Arrow keys (↑/↓) to move between requests
4. Search & Filter — Use the toolbar to find specific requests

Analyzing Details

Keyboard Shortcuts

⚙️ Configuration

Customize HAR Explorer through VS Code Settings (Ctrl+, / Cmd+,):

Example settings.json:

{
  "harExplorer.fontSize": 12,
  "harExplorer.truncation.jsonEntryLimit": 1000
}

📸 Screenshots

Coming soon: Screenshots showing the extension in action

🔧 Requirements

• VS Code version 1.80.0 or higher
• No additional dependencies required

📝 Supported HAR Specification

HAR Explorer supports the HAR 1.2 specification, including:

• Request/Response headers and bodies
• Query string parameters
• POST data (JSON, Form Data, raw text)
• Timing information (blocked, DNS, connect, SSL, send, wait, receive)
• Cookies and cache information

🤝 Contributing

Contributions are welcome! Please see our Contributing Guide for details.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'feat: add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License — see the LICENSE file for details.

🙏 Acknowledgments

• Inspired by Chrome DevTools Network Tab
• Built with React and VS Code Webview API
• Uses react-json-view for JSON visualization
• Uses react-window for virtual scrolling

Made with ❤️ by AddictedGuys