javascriptfirefoxfirefox-addonfirefox-addon-webextensionsfirefox-developer-tools

How to access add-on content script in Firefox console?


I have developed an add-on for Firefox and Chrome. It has content scripts. I want to access them in the browser tab's console (on Firefox the Web Console). For example, I want to enter a global variable defined in the content script(s) in the console, and it will output its value.

In Chrome, I can open the console by pressing F12, then navigate to the Console tab in the developer tools. It has a dropbox, right after the filter button, to select which context I am in (page/content script):

In Firefox, how to do the same thing?


Solution

  • The ability to do this doesn't exist

    The ability to change the context/scope of the Web Console to that of the an extension's content scripts does not exist. In addition, this capability does not exist in any of the other ways to view a console in Firefox. A bug/RFE is filed on Bugzilla requesting this functionality, with an overall tracking bug for the feature.

    You can change the console's context/scope to an iframe's page scripts

    You can change the console into the context/scope of the iframe's page scripts by selecting the frame from the drop-down menu opened from the frame-selector drop-down:

    Screen capture of changing the console context/scope to an iframe

    If this drop-down icon is not appearing for you, go to the DevTools settings and check "Select an iframe as the currently targeted document". However, doing this:

    JavaScript Debugger

    You can use the JavaScript Debugger with WebExtensions content scripts. The content scripts for the extension are listed in the "Sources" section under the name of the extension, then the filename of the content script. You can view the content of variables, set breakpoints, etc. However, this does not give you the ability to explicitly switch to the context of a child frame. Placing debugger; directives in the JavaScript which is running in the child iframe's content script is ineffective at getting the console context to change to the content script context.

    JavaScript Debugger debugging content script (in top frame) [This screenshot is quite old. While the current general layout is the same, there have been significant improvements.]:

    Screenshot showing Firefox JavaScript Debugger debugging content script (in top frame)

    Console in background script context

    If you were wanting to open a console which was in the context of your WebExtensions' background script, you could do so by navigating to "about:debugging", clicking to use "This Firefox" for debugging extensions and service workers, then clicking on the "Inspect" button for the extension you are interested in debugging. However, this will not get you access to a console in the content script's context.

    Workarounds for seeing variable values in the iframe

    For what you need: unambiguously indicating that values are in the iframe context, not the top frame; I see two methods of doing so: