VS Code Extensions
Debug Network Enhanced

Debug Network Enhanced

by Limbor

An enhanced VS Code Network panel for Chrome and Edge debugging with request search, type filters, tree grouping, detailed inspection, cURL copying, and response previews.

Downloads

71

Rating

— (0)

Version

0.4.5

Last updated

Apr 14, 2026

An enhanced Network panel integrated into VSCode's Debug sidebar. Provides search, type filtering, tree view grouping, and detailed request inspection — features missing from the built-in Network panel.

VSCode License

Features

Search & Filter

  • Text Search — Filter requests by URL, HTTP method, status code, or keywords
  • Type Filter — Quick multi-select filter by request type: XHR, Fetch, Doc, JS, CSS, Img, Font, Media, WS, Other

Tree View

  • Flat Mode — Traditional chronological list (default)
  • Tree Mode — Group requests by hostname with request count
  • Expand / Collapse All — One-click toggle for all groups in tree mode

Request Detail

Click any request to open a detailed view in a new editor tab:

  • General — URL, Method, Status, Type, MIME, Duration, Size
  • cURL — Ready-to-use cURL command, one-click copy
  • Request Headers — Full request headers
  • Request Body — POST/PUT body with JSON formatting
  • Response Headers — Full response headers
  • Response Body — Smart rendering by content type:
    • JSON: formatted with indentation
    • JS / CSS / HTML / XML: syntax display
    • Images: inline preview
    • Audio / Video: embedded player
    • Font / Binary: file info summary

Every section has a Copy button for quick clipboard access.

Other

  • Copy URL — Right-click context menu to copy request URL
  • Auto Merge — Same request events are merged into a single entry with live status updates
  • Performance Optimized — Debounced tree refresh, Map-based lookups, cached filtering

Supported Debug Types

Browser Debug Type
Chrome pwa-chrome, chrome
Microsoft Edge pwa-msedge, msedge

Toolbar Buttons

Icon Action Description
$(search) Search Text search across URL, method, status
$(search-stop) Clear Search Clear active text and type filters
$(filter) Type Filter Multi-select filter by request type
$(list-tree) Tree Mode Toggle between flat list and hostname tree
$(expand-all) Expand All Expand all groups (tree mode only)
$(collapse-all) Collapse All Collapse all groups (tree mode only)
$(clear-all) Clear All Remove all captured requests

Getting Started

  1. Install the extension
  2. Start a Chrome or Edge debug session (F5)
  3. Open the Run and Debug sidebar (Ctrl+Shift+D)
  4. Find the Network Enhanced panel at the bottom
  5. Browse your app — requests appear in real time

Requirements

  • VSCode >= 1.80.0
  • A Chrome or Edge debug configuration in your project

If this extension is helpful to you, consider buying me a coffee :)

Sponsor

License

MIT