firefox extension console log

When you are debugging your javascript code(so called page script) of your website, you may use console.log to write the value of a variable to console. You can press F12, or click the menu Tools/Browser Tools/Web Developer Tools, or press Ctrl+Shift+I to view the console(web console).

Firefox extension can also print to console using console.log. You can also see the log in the F12 console, if the console.log function is called in a content script of the addon. However, some syntax error in firefox extension such as using an undefined variable, may not show in the web console as for page script. Undefined variables in page script will produce an “Uncaught ReferenceError: xx is not defined” in the F12 console. To see this kind of logs, you need to view extension console of Firefox(Tools/Browser Tools/Brower Console, or Ctrl+Shift+J). However, this extension console only shows the syntax errors in extension. To also show logs (console.log and syntax errors) from page script and console.log from content script of addon, you should click the gear icon on the top-right corner of the browser console and tick on “Show Content Messages”.

This Firefox addon debug console is displayed in separated window from the webpage. You need to refresh the webpage then switch to this window to see possible errors of extension, which is inconvenient. So I often write to console in addon using console.log and see the output in the web console. But if you are debugging the background script of an addon, you may find Firefox extension console.log not working, i.e., you cannot see the output in the developer console. This sounds reasonable since firefox extension console.log from background script is not specific to any webpage so you cannot see it in the console for a webpage. You must see it on firefox extension console (Ctrl+Shift+J). The console.log from other parts of a firefox addon such as a browser_action script or an options_ui script also must be viewed on the firefox addon debug console, and you must tick on “Show Content Messages” to see it.

You can also view the console.log from extension such as background script, options script, browser action pop script on the Toolbox – extension tab. To go to the Toolbox – extension tab, click the “Inspect” button beside the extension on the “about:debugging#/runtime/this-firefox” tab. This tab only shows the logs from extension, not from page script, not from content script of extension.

If you are using Firefox developer edition or Firefox nighty edition, you have another option to see the extension logs: Brower Toolbox(click the menu Tools/Browser Tools/Brower Toolbox, or press Ctrl+Shift+Alt+I). This will open a new window, where you can see all console logs from addon and page script. You also need to tick on “Show Content Messages” in the settings, even for console.log from background script of extension.

p.s.: By default, the source code of firefox extensions does not show up in web console for you to debug. You need to tick on the option “Enable browser chrome and add-on debugging toolboxes” in “Advanced settings” of web console. To access the settings, you need to click on the three-dot button on the right corner of the title bar of web console,then click the “Settings” menu item. Alternatively, you can press F1 to enter the settings window.