Service worker and messaging
Debug each context
Open the correct DevTools target for popup, service worker, content script, and page instead of looking for every log in one console.
8 minute lesson
Each extension context has its own console, lifecycle, and source environment.
Inspect the popup by right-clicking it, the service worker from chrome://extensions, and content scripts from the target page’s DevTools. Use the extension errors panel for manifest and runtime failures. Reload the extension after background or manifest changes.
Choose the DevTools execution context before evaluating code. The page console and isolated content-script console can both appear in one tab, while only one has extension globals. Popup DevTools keeps that popup open for inspection, which changes its usual close-on-blur lifecycle, so repeat important checks without DevTools too.
The worker inspector can keep or wake the worker and therefore hide lifecycle bugs. Record evidence, close the inspector, wait for termination, and reproduce the event from a cold worker. Use chrome.storage inspection and the extension Errors view to distinguish durable state from logs belonging to an old instance.
Add a small correlation ID to one user action and include it in popup, worker, and content-script logs. This turns several isolated consoles into one trace without logging the note or complete sensitive URL. Clear the logs and reproduce from a known extension version before drawing conclusions.
Trigger one deliberate error in each context plus a missing receiver after extension reload. Record the target, extension version, action ID, visible symptom, console or Errors-panel evidence, and exact reload sequence required to fix it.
Lesson completed