netlog-viewer
netlog-viewer is a Visual Studio Code extension for viewing net-export (NetLog) logs captured from Chromium-based browsers.
Table of Contents
Features
- NetLog log viewer: View
.json logs captured with net-export in a custom editor inside VS Code.
- 14-tab layout:
- Import — Export date and time, capture mode, browser/OS information, command line, and user comments, with copy buttons for the command line and comments.
- Events — A list of events grouped by source, with filtering (
type: / id: / is:active|error / sort: / has:<text> for cross-source parameter search, also via sortable column headers) and in-app syntax help, an always-visible error count, keyboard navigation, and searchable event trace details (t= / st= / [dt=]) with Cmd/Ctrl+F, match navigation, case sensitivity, and regular expression toggles. Selecting an HTTP request also shows a Request/Response summary (method, URL, status, headers, timing). A "Sequence Diagram" toggle in the detail pane visualizes the selection (and the sources it references, fetched on demand) as UML 2.5.1 notation, in two modes: Participants (default) shows it as a network conversation whose lifelines are only the genuine communication participants — the Client on the left edge, the remote host endpoint on the right edge, and the DNS resolver, local CACHE, and any forward proxy in between — with directed messages (resolve, cache lookups/reads, proxy connect/tunnel, connect, certificates, request/response, bytes); client-internal processing (CORS, Network Delegate, Privacy, TLS handshake, …) is not a lifeline but is shown as Client self-steps (each tagged with its subsystem on its own line, e.g. [CORS]) plus nested activation bars that reveal the containment — and Sources shows the raw NetLog structure (one lifeline per source, source_dependency arrows, activation bars). Lifelines are click-to-select, messages have hover tooltips and can be clicked to open a popup that highlights the message's key values and renders the underlying event's parameters as a formatted key/value tree, and "Copy as PlantUML" / "Export SVG…" export the current view. Messages are annotated inline with the parameter values behind them — the connect destination address, the net_error result (e.g. ERR_ADDRESS_UNREACHABLE), HSTS verdicts, and the event's other scalar parameters (wrapping onto a second line when needed); message labels are left-aligned to the right side of their lifeline and wrap onto up to two lines so event names line up in a tidy, readable column.
- Timeline — Time-series data such as socket count, request count, and bytes transferred, rendered on a canvas. Scroll or use the keyboard (arrow keys / +- / Home) to zoom and pan, hover for exact values, and see the current zoom level and time range at a glance. Double-click the graph to jump to the Events tab filtered to that point in time.
- Proxy / DNS / Sockets / StreamPool / Alt-Svc / HTTP/2 / QUIC / Reporting / Cache / Modules / Prerender — Status tables for each subsystem, with a free-text row filter and sortable columns.
- Read-only and fully offline: Never writes to files and never communicates over the network.
- No external runtime libraries: Both the parser and the viewer are built entirely from scratch using only the standard library (see DEVELOPMENT.md for details).
- Supports
.json / .netlog / .gz (gzip).
- Handles very large logs: files are streamed from disk as they are parsed, so multi-hundred-MB and multi-GB logs open without hitting the ~512 MB string-size limit. Load progress and any truncation warnings are shown in an in-view banner.
- GitHub Copilot integration: agent mode can analyse a NetLog with read-only Language Model tools (overview, request list, per-source trace, sequence diagram, parameter search, settings sections, transfer timeline) and — on request, with a confirmation — open the viewer and apply a filter, select a source, or switch tabs. See GitHub Copilot Integration.
Requirements
- Visual Studio Code
1.95.0 or later (the GitHub Copilot integration uses the Language Model Tools API introduced in 1.95)
- No additional runtimes or external applications required
Installation
From the Visual Studio Code Marketplace
- Open the Extensions view from the VS Code sidebar (
Ctrl+Shift+X / ⌘+Shift+X).
- Search for
Netlog Viewer.
- Click Install.
From a VSIX file
code --install-extension netlog-viewer-<version>.vsix
Alternatively, run "Extensions: Install from VSIX..." from the Command Palette (Ctrl+Shift+P / ⌘+Shift+P) and select the .vsix file.
Usage
- Capture a log in a Chromium-based browser.
- Chrome:
chrome://net-export/, Microsoft Edge: edge://net-export/
- Click Start Logging To Disk, choose a destination
.json file, reproduce the issue, and then click Stop Logging.
- Open the captured
.json file in VS Code.
- If the file name matches one of the supported file patterns, it opens automatically in Netlog Viewer.
- To open a
.json file that does not match, right-click the file in the Explorer and choose
"Open With…" → Netlog Viewer, or run the "Netlog Viewer: Open File" command.
- Switch between the tabs on the left to inspect the state of each subsystem. On the Events tab, type a filter to narrow down sources, and select a row to display the event trace in the right pane.
Supported Files
The custom editor automatically associates with the following file name patterns (it does not take over every .json file indiscriminately):
*.netlog*.netlog.json (and *.netlog.json.gz)*net-export*.json (and *net-export*.json.gz)*net_log*.json*netlog*.json
.gz (gzip-compressed) files are decompressed automatically. Files that do not match the patterns above can be opened with the "Netlog Viewer: Open File" command.
Commands
The following command is available from the Command Palette (Ctrl+Shift+P / ⌘+Shift+P).
| Command |
Command ID |
Description |
| Netlog Viewer: Open File |
netlogViewer.openFile |
Opens a NetLog log from a file selection dialog. |
Settings
| Setting |
Default |
Description |
netlogViewer.maxEvents |
2000000 |
Maximum number of events loaded from a single file. Larger files are streamed from disk and truncated at this many events (with a warning) so memory stays bounded. Set to 0 to load every event (may exhaust memory on very large logs). |
netlogViewer.maxSourceDetailEvents |
50000 |
Maximum number of events shown in the detail pane for a single selected source. Sources with more events are truncated (with a note) so selecting a very active source stays responsive. |
GitHub Copilot Integration
The extension contributes Language Model tools so that GitHub Copilot's agent mode can analyse NetLog files for you — and, when you ask, drive the viewer. Reference a tool in Copilot Chat with #, or simply ask a question about a NetLog file and let agent mode pick the right tools.
Every analysis tool is read-only: it parses the file and returns JSON, and never modifies anything. Only #netlogShow changes the editor, and it asks for confirmation before doing so.
Tool (#name) |
What it does |
#netlogOverview |
Export metadata, event/source counts, an error summary (failed sources + the most common net_error codes), and which settings sections are present. Start here. |
#netlogRequests |
The sources/requests as rows (URL / method / status, error state, duration), with filters (errors only, source type, text, status class, sort, limit). |
#netlogSource |
One source's full event trace (types, phases, nesting, relative timing) plus its HTTP request/response summary. |
#netlogSequence |
A UML sequence diagram (PlantUML text + a JSON summary) of a request chain, in Participants or Sources view. |
#netlogSearch |
Which sources contain a given text in their event parameters (URL, host, header, error string, IP, …). |
#netlogSettings |
The captured configuration/state sections (proxy, DNS, sockets, HTTP/2, QUIC, reporting, cache, …). |
#netlogTimeline |
A data-transfer summary over time (total bytes received/sent, transfer count, busiest time buckets). |
#netlogShow |
Opens a NetLog file in the viewer and can apply an Events filter, select a source, or switch tabs. Changes the editor UI and asks for confirmation first. |
Each analysis tool takes an absolute filePath to the NetLog file. A parsed log is cached (and reused from an already-open viewer) so a multi-step investigation on one file stays fast.
Example prompts
Point agent mode at a NetLog file (its absolute path, or drag the file into chat) and ask in plain language — it picks the tools for you. Some starting points for an investigation:
- Get oriented: "Give me an overview of
net-export.json and tell me what stands out."
- Find failures: "Which requests in
net-export.json failed, and why? Group them by net_error."
- Investigate one request: "Show the full event trace for source 42 in
net-export.json and summarise its HTTP request and response."
- Follow a request chain: "Draw a sequence diagram of the failing request to
example.com in net-export.json."
- Search the whole log: "Find every source in
net-export.json whose parameters mention content-type: application/grpc."
- Diagnose slowness: "Summarise data transfer over time in
net-export.json and point out any stalls or throughput spikes."
- Check configuration: "What proxy and DNS settings were captured in
net-export.json?"
- Reproduce in the viewer: "Open
net-export.json in the viewer, filter to errors, and select the first failing source."
You can also target a specific tool with #, for example #netlogRequests errors only in net-export.json or #netlogSequence for source 1 in net-export.json. The read-only tools just need the file's absolute path; #netlogShow opens/updates the viewer and asks for confirmation first.
Limitations
- For viewing exported logs only. Real-time connection to and capture from a live browser (as with
net-internals) is not supported. (The information tabs display the polledData included in the log, and tabs with no data are hidden automatically.)
- The only supported compression format is gzip (
.gz); .zip is not supported.
- Some information tabs (Proxy settings / DNS settings / Reporting clients and NEL) currently display formatted JSON.
- On the Events tab, the free-text filter matches a source's id, type, and description; it does not search within event parameters. Details for a selected source are loaded on demand.
- The Events tab's sequence diagram covers a subset of UML 2.5.1 notation (lifelines, messages, activation bars, creation/destruction, found/lost messages); combined fragments (alt/opt/loop/par) are not supported, and it renders at most 30 related sources, 400 messages, and 300 activation bars, with a note when a limit is reached. The Participants mode is interpreted from event types and parameters (host, addresses, headers, cache operations, byte direction); its lifelines are limited to communication participants (Client, DNS, CACHE, remote endpoints) and client-internal processing is rendered as Client self-steps plus activation bars. Use the Sources mode for the exact NetLog structure.
- Because it is read-only, logs cannot be edited or saved.
Roadmap
- [ ] User settings (rendering limits, default tab, etc.)
- [x] Virtualization and progressive rendering for large logs
- [ ] More detailed formatting of information tabs and links to event sources
- [ ] Support for the
.zip format
Contributing
For specifications and design as well as build/debug instructions, see DEVELOPMENT.md. For publishing to the Marketplace, see PUBLISHING.md.
If you would like to support the development of this project, contributions via GitHub Sponsors are warmly welcomed.
Your support will be used to improve features and maintain the project over time.
License
This project is released under the MIT License.
| |
