I don't understand this report

Can you please provide more detailed STRs?

What exactly do you mean by the following:

The page context for each frame is listed.
None of the extension content script contexts are included in the list.

--

Btw. debugging addon's content scripts works just fine for me. Not sure how iframe target selector is involved...

Honza

closing as we do not have an STR. Happy to re-open w/ an str

What exactly do you mean by the following:

The page context for each frame is listed.
None of the extension content script contexts are included in the list.

I'm looking for a way to switch the context of the developer console from the page's context to a WebExtension's content script's context. As far as I can tell, the devtools doesn't have a way to choose to execute JS from the console in an extension's JS context.

Steps to reproduce:

• Load the attached WebExtension
• Open developer tools
• Attempt to change the console's context to the WebExtension's context, in order to read or modify the contents of window.my_global from the console.

Expected results:

There is some part of the devtools UI that lets you switch the console into an extension context.
Alternatively, there is some part of the browser content toolbox UI that lets you switch its console to a chosen extension context.

Actual results:

There doesn't seem to be any part of the devtools UI or the browser content toolbox UI that lets you select an extension context to switch into.

For completeness:

• You can get into the correct context with the attached WebExtension by

  • opening the devtools
  • clicking in the document while the debugger pane is open

  due to the debugger statement in the content script handler.

• Similarly, on pages with <iframe>s with the attached WebExtension, you can also get into the correct context within an <iframe> by

  • opening the devtools
  • selecting that frame as the 'currently targeted document' in the devtools
  • clicking within the frame

• Chrome devtools features a drop-down menu next to (above and to the left of) their devtools console that lists every frame as a context that can be switched to, and each extension content script context for that frame as a sub-item that may also be switched to.

• The Firefox devtools features a button to switch context which lists all of the frames, but doesn't list the context script contexts for any of those frames or allow them to be switched to.

Btw. debugging addon's content scripts works just fine for me. Not sure how iframe target selector is involved...

The combined iframe and JS context selector in the Chrome devtools is just my preferred UI for this. If there is some other UI for this in the devtools that I've overlooked, I'm very sorry.

Thanks for explaining this in more depth. CCing Yulia and Luca.

This overlaps with some work that I am doing. The larger story is we need a UX for doing this kind of switching across devtools. The bug that is tracking this is here: https://bugzilla.mozilla.org/show_bug.cgi?id=1520790

This will include the ability to switch to a webextension. At the moment, I do not thing that we have a way to do this from the console. Maybe Nicolas has more context.

It is definitely a reasonable enhancement (and there is also Bug 1369557 filed for the same kind of enhancement, we should mark it as a duplicate of this one, as this one has now more context then Bug 1369557).

From what I recall, in chrome the drop-down menu mentioned in comment 3 only switch the webconsole, whereas the frame selector available in Firefox is switching the entire devtools toolbox to target the selected subframe (and so it also affects the inspector and the other devtools panels in the toolbox, in case of a content script the inspector should still point to the webpage on which the content script is attached).

As an additional side note, every subframe in the page may have its own content script instance.

(This doesn't look like a Debugger specific issue, in the debugger the content scripts are listed, a breakpoint works as expected and the webconsole is in the right context while the debugger is paused, and so it looks more like a general DevTools issue or a webconsole one)

Here's a broader document about switching context https://docs.google.com/document/d/1pI4Ool0oxhhZ01dHmRv50DgjO49a5_1NFccbtC-9rKc/edit#heading=h.bn38te3qtxzp
The idea is to have a consistent mechanism in the different panels to do such thing.

We currently have the cd command in the console that allow you to switch to a given iframe context but I guess this isn't discoverable.
We could make it a bit better/general if we provide some autocomplete with the different available context

    +-----------------------------+
    | myWebExtension content      |
    +-----------------------------+
    | iframe https://example.com/ |
    +-----------------------------+
    | worker|script.js            |
    +-----------------------------+
:cd |

that may also be a good idea to test the Resources list function? Not sure.

Has there been any movement on this? I'm a web extension developer, and this is a pretty major pain point in my debugging workflow compared to Chrome. I often end up switching back to Chrome to debug because of the lack of this feature.

Hi, I'm still a little bit confused about what needs to be built. Would you mind sharing a quick video on your workflow with chrome (https://www.loom.com) or a couple of relevant screenshots?

Sure, I've attached a screen recording of me using the Chrome developer console to interact with a content script in the extension I'm developing. First, I try to reference something defined in my content script in the console, and it doesn't exist. Then, I select a new console context with a dropdown menu Chrome has. My extension shows up in this list, I select it, and I then have access to variables defined in the content script.

Currently, Firefox is missing this dropdown menu or any analogous feature. As stated in above comments, there is a feature for switching into the context of an <iframe>, but not to the context of a web extension's content script.

This is useful for inspecting values we set in the content script at runtime without having to set breakpoints, and for making use of utility methods in the code when inspecting state.

More documentation about the feature as it appears in Chrome: https://developers.google.com/web/tools/chrome-devtools/console/reference#context

Thanks! That helps a lot

Nicolas, this might be nice to do as a precursor to fission.

Any update on this?

As an extension developer trying to support Firefox, not having this ability is extremely limiting / frustrating. And seeing that it is a 4-year old P3 bug, I'm guessing it isn't happening any time soon if ever. :(

(In reply to Michael Leggett from comment #14)

Any update on this?

As an extension developer trying to support Firefox, not having this ability is extremely limiting / frustrating. And seeing that it is a 4-year old P3 bug, I'm guessing it isn't happening any time soon if ever. :(

Must agree with this, I am following this bug for a while and you speak from my heart.

Now that I've gotten pretty far down the road on an extension that does something a lot more sophisticated than adding a red border to every web page, I've gotten very annoyed by the shortcoming reported here. For a week or two I figure I must be overlooking some feature in the developer console... but evidently I'm not.

Matthew, this features is under construction and you can follow the following meta to see the progress.
https://bugzilla.mozilla.org/show_bug.cgi?id=1605153

Honza

@Honza Wonderful!!

This is great news!

Now getting off topic, is there any timeline for implementing the latest Clipboard API features, i.e. placing HTML or an image on the clipboard? Incredibly, this is still a W3C draft specification in 2021, so Firefox isn't exactly a laggard. But Chrome went ahead and implemented it and this functionality would be really nice for my extension. Currently, I shove the HTML as plaintext on the clipboard which works for certain users, e.g, Insert → HTML in Thunderbird, while simultaneously displaying the HTML in a <div> temporarily overlaid on the center of the webpage for manual copy-and-paste (as HTML) purposes. I suppose there are some possible security issues with shoving full HTML onto the clipboard but I just want simple stuff like <div>, <p>, <table>, <span>, etc, i.e. the restricted set of HTML that works for rich text type editors.