📜 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:

Export a *.har log from network tab
Open options page
Drop exported log in the interactive demo
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 😉.

Artboomy / netlogs