Scalpel Tags DevTools panel

## Why it matters

The popup gives you a quick summary. The DevTools panel is where you live when debugging. It shows every request with full context, lets you search and filter on any decoded parameter, and splits out the raw wire format from the human-readable decode. This is the only place you can follow the dataLayer timeline with diffs and state.

## How it works

Open Chrome DevTools (F12 or Ctrl+Shift+I) and click the "Scalpel Tags" tab. The panel displays a table of all captured hits. Each row is one network request (or one line of a batched hit). Columns show the time, provider, event name, account ID, and HTTP status. Click a row to open the sidebar and inspect its decoded parameters, raw payload, and status code.

The dataLayer timeline tab shows every push in order, with diffs and accumulated state. You can jump to the push that triggered a specific tag by clicking in the hit table. The panel keeps recording across service-worker restarts because it persists data to chrome.storage.local, so you can reload the page and still see earlier hits.

## What does not matter

The DevTools panel and the popup show the same data. The panel is not a separate capture stream. Mutes and filters you set in the popup apply to the panel as well. You only need the panel when you want to drill into details or watch the dataLayer; the popup is faster for quick checks.

## Code example

Scalpel Tags hooks the dataLayer.push method to intercept pushes. Here is a simplified version of how it captures them:

const originalPush = window.dataLayer.push.bind(window.dataLayer);
window.dataLayer.push = function(...args) {
  // Send push data to the DevTools panel
  chrome.runtime.sendMessage({
    type: "dataLayerPush",
    payload: args[0],
    timestamp: Date.now(),
  });
  return originalPush(...args);
};
Copy

## How Scalpel Tags shows it

Open DevTools and pick the "Scalpel Tags" tab. The hit table on the left shows every request. The provider filter and text filter let you narrow down the view. Click a hit to see its parameters grouped by type (Core, Events, User, Session, Device, etc.), the raw request URL and body, and the full response. The dataLayer tab shows each push with a green/amber/red diff of what changed, plus the accumulated state after that push.