Debug Network Enhanced
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.
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 |
| 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
- Install the extension
- Start a Chrome or Edge debug session (
F5)
- Open the Run and Debug sidebar (
Ctrl+Shift+D)
- Find the Network Enhanced panel at the bottom
- 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 :)
License
MIT
| |
