This is a more high-level version of a Network tab for easier debugging.
The extension will appear in devtools as a 📜 Net logs tab.
- 🔍 Advanced Search: Filter requests by URL and search within parameters/results.
- ⛰️ Framework Integration: View Next.js & NuxtJS hydration state.
- 🎨 Protocol Presets: Streamlined unpacking for GraphQL and JSON-RPC.
- 📡 WebSocket Listening: Capture and analyze WebSocket traffic in real-time.
- ✨ Log Viewing: Analyze live or import logs from HAR/*.netlogs.zip files.
- 🤝 Collaboration: Export and share logs for team debugging.
You can find a version for Chrome/Edge here.
To install from zip or source, see local development.
You can disable presets in the settings.
Features: query name extraction, result unwrapping, colored tag.
Features: method extraction, result unwrapping, coloring for error responses.
Extension will pull data from window.__NEXT_DATA__ or window.__NUXT__, if available.
You can disable this in settings.
To export logs, click ⬇️ button in the header.
To load logs, simply drag and drop the file in the extension.
Extension supports *.netlogs.zip and *.har files.
If you want to preserve logs on page reload - click expand button in the header, then mark checkbox.
You can send custom events to extension from page with window.netlogs function.
Note that function might not always be available.
Usage:
window.netlogs(event) or window.netlogs('Hello world')
Example:
window?.netlogs({ tag: 'TEST', content: { message: 'Hello world' } }
Event signature is either IItemContentOnlyCfg:
type IItemContentOnlyCfg = {
// by default new Date().getTime() will be used
timestamp?: number;
// small bit of text next to date
tag?: string;
// viewable on date click
meta?: {
key: {
items: [{ name: string, value: string }]
}
}
content: object | string;
}or IItemTransactionCfg
type IItemTransactionCfg = {
// by default new Date().getTime() will be used
timestamp?: number;
// small bit of text next to date
tag?: string;
name?: string;
// viewable on date click
meta?: {
key: {
items: [{ name: string, value: string }]
}
}
params: object;
result: object;
}To get help message in console, invoke window?.netlogs.help().
Open the devtools in any webpage, and navigate to "Net logs" tab. Click the "Options" button to open the Options page.
If something goes wrong:
- Reopen the devtools
- Try to fully close and open browser
If the issue persist - please open new bug report. Make sure to include *.har file if possible.
Extension panel runs in a sandbox environment.
Extension collects anonymous analytics with Google Analytics 4. You can opt out in the Options.
All settings are stored locally.
storage- used to store your custom settings. Does not sync.content_scripts- used to extract NextJS/NuxtJS data from page.contextMenus- used to extract selected text for searchdebugger- used for WebSocket listening.
The list may extend in the future.
Please see the dedicated documentation.
This is software in its early stages of development, which is developed in the free time. You can report a bug or suggestion in the Issues tab. I may or may not fix it 😉.