📜 Net logs

Install for Chrome/Edge

This is extendable network request viewer extension for Chromium-based browsers.

💡 Features

The extension will appear in devtools as a 📜 Net logs tab.

• 🔍 Search: Filter by url and search by params/result.
• 🎨 Presets: GraphQL & JSON-RPC protocols unpacking.
• ⛰️ Integration: View Next.js & NuxtJS hydration state.
• 🛠️ Customization: Transform name, parameters, and response with javascript.
• ✨ Universality: View live logs or load from *.har file.
• 🤝 Team-oriented: Export logs and share them with others.

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

Custom profiles

If you need custom request/response processing, please refer to the documentation.

⛰️ 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 and functions crash the view, do the following:

1. Export a *.har log from network tab
2. Open options page
3. Drop exported log in the interactive demo
4. Open console

You should see the errors in the console.

Alternatively, you can open a devtools on the devtools. To do so, undock the devtools and press Ctrl+Shift+J, or press right-click and choose Inpsect.

This will open new debugger window, where you can find console log with errors.

🔐 Security & privacy

All your custom javascript runs in a sandbox environment.

Extension does not transmit any data to the servers.

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.

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