📜 Net logs

Install for Chrome/Edge

This is a more high-level version of a Network tab for easier debugging.

💡 Features

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.

🚀 Installation

You can find a version for Chrome/Edge here.

To install from zip or source, see local development.

🎨 Presets

You can disable presets in the settings.

GraphQL

Features: query name extraction, result unwrapping, colored tag.

JSON-RPC

Features: method extraction, result unwrapping, coloring for error responses.

⛰️ Next.js and NuxtJS debugging

Extension will pull data from window.__NEXT_DATA__ or window.__NUXT__, if available.

You can disable this in settings.

💾 Saving and loading logs

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.

⛓️ Preserve log

If you want to preserve logs on page reload - click expand button in the header, then mark checkbox.

🦄 Custom events

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().

🛠️ Configuration

Open the devtools in any webpage, and navigate to "Net logs" tab. Click the "Options" button to open the Options page.

🐜Troubleshooting

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.

🔐 Security & privacy

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.

🤝 Permissions

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 search
debugger - used for WebSocket listening.

The list may extend in the future.

🏗️ Development

Please see the dedicated documentation.

🚧 Disclaimer

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 😉.

Artboomy/netlogs