Blank Debugger panel when using remote debugging on extensions

VERIFIED FIXED in Firefox 68

Status

defect
P3
major
VERIFIED FIXED
2 months ago
2 days ago

People

(Reporter: adrian_sv, Assigned: daisuke)

Tracking

(Blocks 1 bug)

Trunk
Firefox 68
Dependency tree / graph

Firefox Tracking Flags

(firefox66 wontfix, firefox67 wontfix, firefox68 verified, firefox69 verified)

Details

(Whiteboard: high-priority-reserve)

Attachments

(4 attachments)

Reporter

Description

2 months ago

[Environment:]

The below scenario was tested with:
Nightly 68.0a1(server) - Nightly 68.0a1 (client) - Ubuntu 16.04
Beta 67.0b9 (server) - Beta 67.0b9 (client) - Ubuntu 16.04
Beta 67.0b9 (server) - Nightly 68.0a1 (client) - Mac 10.14

[Description:]

(default) The debugger panel is empty when debugging an extension.

[Steps]:

(to reproduce 100%, try on a clean environment, see [Note:] )

  1. Launch Firefox, create a new profile (ex. my-client-profile).
  2. Using the terminal start Firefox adding: -P my-server-profile --start-debugger-server 6080
  3. In the profile prompt, create "my-server-profile" profile and start the server Firefox.
  4. In the "my-server_profile" Firefox, press F12/Settings and enable Browser Chrome and Remote debugging and shutdown and reopen Firefox server.
  5. In the server Firefox install an extension, for example facebook container.
  6. From "my-client-profile" Firefox go to about:debugging and add localhost:6080 to the network connection.
  7. Click on localhost:6080 connection and from extensions click on the Inspect button from facebook container extension.
  8. Select the Debugger tab.

[Actual Result]:

The Debugger tab is empty.

[Expected Result]:

The Debugger tab is empty: -> it contains the extension sources.

[Note]:

Discovered by accident that if you add in This Nightly a temporary extension and you reopen the remote debugger tab, it will contain the expected extension sources.

Priority: -- → P3
Whiteboard: high-priority-reserve
Assignee

Comment 1

Last month

Hello Adrian, thank you for reporting! (It was thank you so much for your QA about the animation inspector at that time :)
And we are sorry for delay to reply.

So, I have tried this on current Nightly though, could not reproduce.
I'm sorry to bother you, but could you confirm again?

Flags: needinfo?(aflorinescu)
Posted image this vs network.jpg

Still reproducible in Nightly 68.0a1 20190507214514 / Ubuntu 16.04.
In the attached screenshot, left is debugger tab from server (this Firefox) and right is what the client (connected) gets.

Flags: needinfo?(aflorinescu)
Assignee

Comment 3

Last month

Thanks Adrian!
However I can not reproduce in my Mac OSX yet..
It might be related to the OS or preference?
I'll check more.
Thanks!

Can you check if you have extension debugging disabled in your client profile?
On the client, open about:debugging#/runtime/this-firefox and check if "Enable extension debugging" is checked?

I initially logged https://bugzilla.mozilla.org/show_bug.cgi?id=1525553 about the same issue but closed it. The debugger recently started hiding webextension sources in the debugger based on the preference devtools.chrome.enabled. I don't know what is the best way to solve this here. I would like to avoid having this Enable extension debugging everywhere, as it is rather useless.

Maybe the debugger could also check if the current target is an extension before hiding webextension sources?

Flags: needinfo?(aflorinescu)

Jason, we could check if the current target is a WebExtension with tabTarget.isWebExtension. But I don't know what is the best way to wire this in the debugger. I don't see debugger reducers usually accessing the tabTarget. Do you have any suggestion on how to check that from:

const queryAllDisplayedSources: ReduceQuery<
  SourceResource,
  {| projectDirectoryRoot: string, chromeAndExtensionsEnabled: boolean |},
  Array<SourceId>
> = makeReduceQuery(
  makeMapWithArgs(
    (
      resource,
      ident,
      { projectDirectoryRoot, chromeAndExtensionsEnabled }
    ) => ({
      id: resource.id,
      displayed:
        underRoot(resource, projectDirectoryRoot) &&
        (!resource.isExtension || chromeAndExtensionsEnabled)
    })
  ),
  items =>
    items.reduce((acc, { id, displayed }) => {
      if (displayed) {
        acc.push(id);
      }
      return acc;
    }, [])
);

(https://searchfox.org/mozilla-central/rev/99a2a5a955960b0e58ceade1db1f7652d9db4ba1/devtools/client/debugger/src/reducers/sources.js#797-821)

Thanks!

Flags: needinfo?(jlaster)

(In reply to Julian Descottes [:jdescottes] from comment #4)

Can you check if you have extension debugging disabled in your client profile?
On the client, open about:debugging#/runtime/this-firefox and check if "Enable extension debugging" is checked?

Yup, just checked and as the STR were run in clean env. there wasn't any reason to enable extension debugging for This Nightly, so it was disabled for my client. I can confirm that if enabling it, the expected content is listed.

Flags: needinfo?(aflorinescu)

As discussed with Daisuke, we will try to fix this before the end of the release. The goal is to remove the checkbox completely to avoid the confusing side effects.

Assignee: nobody → dakatsuka
Status: NEW → ASSIGNED

Julian, you'll want to do the check in firefox/events, firefox/commands. it is the only place we look at the clients/fronts/targets...

Flags: needinfo?(jlaster)

I'd set the tabTarget field in redux via the CONNECT action. I think my preference would be to store the field in the

diff --git a/devtools/client/debugger/src/actions/navigation.js b/devtools/client/debugger/src/actions/navigation.js
index 1f8a0eb2e423..dd60da7c6794 100644
--- a/devtools/client/debugger/src/actions/navigation.js
+++ b/devtools/client/debugger/src/actions/navigation.js
@@ -48,14 +48,20 @@ export function willNavigate(event: Object) {
   };
 }
 
-export function connect(url: string, actor: string, canRewind: boolean) {
+export function connect(
+  url: string,
+  actor: string,
+  canRewind: boolean,
+  isWebExtension: boolean
+) {
   return async function({ dispatch }: ThunkArgs) {
     await dispatch(updateWorkers());
     dispatch(
       ({
         type: "CONNECT",
         mainThread: { url, actor, type: -1, name: "" },
-        canRewind
+        canRewind,
+        isWebExtension
       }: Action)
     );
   };
diff --git a/devtools/client/debugger/src/client/firefox.js b/devtools/client/debugger/src/client/firefox.js
index 5cbd6b0bba5d..e849a0fa0244 100644
--- a/devtools/client/debugger/src/client/firefox.js
+++ b/devtools/client/debugger/src/client/firefox.js
@@ -58,7 +58,8 @@ export async function onConnect(connection: any, actions: Object) {
   await actions.connect(
     tabTarget.url,
     threadClient.actor,
-    traits && traits.canRewind
+    traits && traits.canRewind,
+    tabTarget.isWebExtension
   );
   await actions.newGeneratedSources(sourceInfo);
 
diff --git a/devtools/client/debugger/src/reducers/debuggee.js b/devtools/client/debugger/src/reducers/debuggee.js
index 110ee943a147..6c66fc1954ce 100644
--- a/devtools/client/debugger/src/reducers/debuggee.js
+++ b/devtools/client/debugger/src/reducers/debuggee.js
@@ -20,13 +20,15 @@ import type { Action } from "../actions/types";
 
 export type DebuggeeState = {
   workers: WorkerList,
-  mainThread: MainThread
+  mainThread: MainThread,
+  isWebExtension: Boolean
 };
 
 export function initialDebuggeeState(): DebuggeeState {
   return {
     workers: [],
-    mainThread: { actor: "", url: "", type: -1, name: "" }
+    mainThread: { actor: "", url: "", type: -1, name: "" },
+    isWebExtension: false
   };
 }
 
@@ -38,7 +40,8 @@ export default function debuggee(
     case "CONNECT":
       return {
         ...state,
-        mainThread: { ...action.mainThread, name: L10N.getStr("mainThread") }
+        mainThread: { ...action.mainThread, name: L10N.getStr("mainThread") },
+        isWebExtension: action.isWebExtension
       };
     case "INSERT_WORKERS":
       return insertWorkers(state, action.workers);

Assignee

Comment 10

Last month

Thank you so much Jason, it was super useful for me!
I'll write the patch while referring your code :)

Comment 14

Last month
Pushed by dakatsuka@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/ac87e6ddded6
Show sources regardless devtools.chrome.enabled even in case of web extension. r=jdescottes,jlast
https://hg.mozilla.org/integration/autoland/rev/6a315be5f16f
Remove extension debug setting. r=jdescottes,flod
https://hg.mozilla.org/integration/autoland/rev/67e719e02573
Add a test for extension debugger. r=jdescottes

Comment 16

Last month
Pushed by dakatsuka@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/a61d0f7aa588
Show sources regardless devtools.chrome.enabled even in case of web extension. r=jdescottes,jlast
https://hg.mozilla.org/integration/autoland/rev/edd9b8f1a0ba
Remove extension debug setting. r=jdescottes,flod
https://hg.mozilla.org/integration/autoland/rev/5745d2f2bf46
Add a test for extension debugger. r=jdescottes
Assignee

Updated

Last month
Flags: needinfo?(dakatsuka)
Assignee

Comment 18

Last month

Hello Irene!

We removed a checkbox for enabling extension debugging by this bug.
As we need to update MDN as well, I inform you.
e.g. We can see the checkbox is in this image of MDN as well.

Thank you for always maintaining the MDN!

Flags: needinfo?(ismith)

Comment 19

Last month

(In reply to Daisuke Akatsuka (:daisuke) from comment #18)

Hello Irene!

We removed a checkbox for enabling extension debugging by this bug.
As we need to update MDN as well, I inform you.
e.g. We can see the checkbox is in this image of MDN as well.

Thank you for always maintaining the MDN!

Thanks for the update. I am aware of the change and will be creating new images as quickly as possible.

I've created this issue to make sure that I do a final edit pass and make sure that the checkbox is not mentioned:

MDN/Sprints #1602

Flags: needinfo?(ismith)

Comment 20

15 days ago

Since the checkbox is gone how should I enable extension debugging while connected via network location?

Flags: needinfo?(dakatsuka)
Assignee

Comment 21

15 days ago

Hi Hani!
Although I thought even the extension debugging in network location no need any preferences now, could not do that?

Flags: needinfo?(dakatsuka) → needinfo?(hani.yacoub)

Comment 22

13 days ago

I can't explain why the debugger panel was empty the first time I tried to check if this was fixed. After many tries I confirm that this bug is fixed and I might done something wrong in the first try.

Verified as fixed on Firefox Nightly 69.0a1 and on Firefox 68.0b8 on Windows 10 x 64, Mac OS X 10.14 and on Ubuntu 18.04 x64.

Status: RESOLVED → VERIFIED
Flags: needinfo?(hani.yacoub)

Comment 23

2 days ago

Updating tracking flags.

You need to log in before you can comment on or make changes to this bug.