Submit or Manage Extensions

Debugging

This article explains how to use the Firefox developer tools to debug extensions.

An extension can consist of several components—background scripts, popups, options pages, content scripts, sidebars, and alike—and you use slightly different workflows to debug each component. Each component has a section in this article, and you can read each section in isolation. We begin by introducing the developer tools, which you use to debug all the pieces of your extension.

Developer tools toolbox

You use an implementation of the developer tools called Toolbox to debug extensions. To open Toolbox for an extension:

  • enter about:debugging in the URL bar.
  • in the left-hand menu, click This Firefox (or This Nightly).
  • click Inspect next to your extension.

A new tab opens showing Inspector in the Toolbox.

developers tool screenshot

To debug your extension, you use:

  • Inspector to examine and modify the HTML and CSS used to build your extension's pages.
  • Console to view messages logged by the extension and error messages logged by the browser as it runs the extension. It also provides a command line, where you can execute JavaScript in the extension's context.
  • Debugger to set breakpoints and watchpoints in your extension's JavaScript, and examine and modify the extension's state.
  • Storage to view details of data stored by the extension.

This console shows messages from your background script and extension pages; other logs may appear elsewhere.
There is an overview of all relevant places to look for messages at Viewing log output.

For much of the debugging work, it's useful to view Console with Inspector or Debugger. You do this using the split console, press esc to activate this mode.

developers tool split screenshot

You now drag the toolbox tab to a separate window, so you can place it alongside the window where you're executing the extension.