How to debug a Chrome extension

Inspect a Chrome extension from chrome://extensions. Monito does not attach to an extension's service worker or popup.

chromeextensionsdevtools

An extension is several pages. Each one has its own DevTools.

  1. Open chrome://extensions.
  2. Turn on Developer mode.
  3. Find the extension. Inspect views lists a service worker, and any page the extension currently has open. Click the service worker link to open DevTools for that worker. The console there is not the console of the tab you were browsing.
  4. Open the popup from the toolbar, then right-click inside it and choose Inspect. That is a third target.
  5. A content script runs in the page. Its logs show up in that tab's console, often under the extension's context. Errors in the worker do not.

Errors on the extension card is the crash list. Reload the extension from the card after a change. A service worker that has gone idle disappears from Inspect views until something wakes it.

What Monito will not do

Monito does not install your extension, attach to its service worker, or open its popup. A check drives a normal page in Chromium.

If the bug is that page — the app the extension is supposed to talk to — a check can run a scenario against the page and keep screenshots, console output, and network method, URL, and status. If the bug is inside the extension, the check never sees it. Use the DevTools targets above.

Sign up for a page check. The command is monito check.