📜 Net logs

Install for Chrome/Edge

Web-version to view HAR logs

Better filtering and less clicking than Chrome's Network tab. Built for debugging modern web apps with Next.js/GraphQL support and Jira integration.

📖 Table of Contents

• 💡 Features
• 🚀 Installation
• 🎨 Presets
  • GraphQL
  • JSON-RPC
• 🎫 Jira Integration
• ⛰️ Next.js and NuxtJS debugging
• 💾 Saving and loading logs
• ⛓️ Preserve log
• 🦄 Custom events
• 🛠️ Configuration
• 🐜 Troubleshooting
• 🔐 Security & privacy
• 🤝 Permissions
• 🏗️ Development
• 🤝 Attributions
• 🌐 Translations

💡 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.
• 🎫 Jira Integration: Create detailed bug tickets in one click with HAR files and screenshots.

https://github.com/user-attachments/assets/b5fe746d-671c-434a-8a02-ac2f26f2ed82

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

🎫 Jira Integration

Create comprehensive bug reports directly from the extension with a single click. The integration automatically bundles network logs (HAR format), page screenshots, and contextual metadata into a properly formatted Jira ticket.

https://github.com/user-attachments/assets/7abfed92-1da8-4923-b223-4db981ed0f57

Features:

• Automated Attachment: HAR files and screenshots are automatically attached to tickets
• Template System: Customizable ticket descriptions with dynamic variable substitution
• Metadata Capture: Includes browser info, page URL, timestamp, and user agent
• Field Mapping: Supports custom Jira fields with caching for improved performance
• One-Click Workflow: From debugging to ticket creation in seconds

Configure your Jira instance settings (base URL, API token, project key) in the extension options:

Jira integration works with both Jira Cloud and self-hosted Jira instances. Requires API token (PAT).

⛰️ 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:

1. Reopen the devtools
2. 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.

🤝 Attributions

Left mouse click icon

Middle mouse click icon

Right mouse click icon

🌐 Translations

Translations are LLM-generated. If you are proficient in the language and spot mistakes – feel free to issue a pull request with changes.