Console from about:debugging not working with Firefox for Android

RESOLVED FIXED in Firefox 68

Status

defect
P1
normal
RESOLVED FIXED
3 months ago
3 months ago

People

(Reporter: egil, Assigned: jdescottes)

Tracking

(Blocks 1 bug, Regression)

68 Branch
Firefox 69
Points:
---
Dependency tree / graph
Bug Flags:
qe-verify +

Firefox Tracking Flags

(firefox68 fixed, firefox69 fixed)

Details

(Whiteboard: [qa-triaged])

Attachments

(1 attachment)

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:66.0) Gecko/20100101 Firefox/66.0
Firefox for Android

Steps to reproduce:

  1. Open page on Firefox for Android (latest: 66.0.5).
  2. Open about:debugging on Windows (FF Dev 68).
  3. Connect to device and Inspect tab (opened page seem not to be important).
  4. Open Console.

Actual results:

The Console is blank. No output. No filters. Just blank. Sometimes filters are shown very briefly and disappear (as if the panel would crash or something).

When I run WebIDE and connect to FF Mobile it works fine.

Expected results:

Show Console or at least some error message.

Component: Untriaged → about:debugging
Product: Firefox → DevTools

I can't reproduce the issue with the latest Firefox for Android (67 for me now).
Can you test again and check if the issue still occurs for you?

If yes, can you try to open the Browser Console (Tools > WebDeveloper > Browser Console) and see if any error is logged when you try to open the WebConsole tool via about:debugging/about:devtools-toolbox?

Flags: needinfo?(egil)

Same thing both with 68b4 and 68b5. Browser console error below.
Same thing also happens when I open FF dev in safe mode.

TypeError: cssSelectors is undefined
CSSWarning.js:139:21
TypeError: "cssSelectors is undefined"
    render resource://devtools/client/webconsole/components/message-types/CSSWarning.js:139
    finishClassComponent resource://devtools/client/shared/vendor/react-dom.js:10332
    updateClassComponent resource://devtools/client/shared/vendor/react-dom.js:10295
    beginWork resource://devtools/client/shared/vendor/react-dom.js:10894
    performUnitOfWork resource://devtools/client/shared/vendor/react-dom.js:12713
    workLoop resource://devtools/client/shared/vendor/react-dom.js:12730
    renderRoot resource://devtools/client/shared/vendor/react-dom.js:12770
    performWorkOnRoot resource://devtools/client/shared/vendor/react-dom.js:13359
    performWork resource://devtools/client/shared/vendor/react-dom.js:13281
    performSyncWork resource://devtools/client/shared/vendor/react-dom.js:13253
    requestWork resource://devtools/client/shared/vendor/react-dom.js:13153
    scheduleWork$1 resource://devtools/client/shared/vendor/react-dom.js:13022
    enqueueSetState resource://devtools/client/shared/vendor/react-dom.js:8845
    setState React
    Redux 5
    eventTelemetryMiddleware resource://devtools/client/webconsole/middleware/event-telemetry.js:21
    historyPersistenceMiddleware resource://devtools/client/webconsole/middleware/history-persistence.js:33
    thunk resource://devtools/client/webconsole/middleware/thunk.js:14
    throttledDispatchPromise resource://devtools/client/webconsole/webconsole-wrapper.js:609

The code at which it fails:

    return Message({
      attachment,
      collapsible: !!cssSelectors.length,
      dispatch

I'm guessing the page might need to have some CSS warnings then? The page I was inspecting this time was:
https://support.mozilla.org/pl/products/mobile?as=u&utm_source=inproduct

Flags: needinfo?(egil)

thanks for the detailed info, looks like we broke backward compatibility in Bug 1093953. This only happens if you have the "CSS" filter turned on. To unblock the situation, you can:

  • open regular devtools on any page
  • go to webconsole panel
  • disable the "CSS" filter
  • close devtools

After that you should be able to see the console when remote debugging.

Assignee: nobody → jdescottes
Status: UNCONFIRMED → ASSIGNED
Ever confirmed: true
Priority: -- → P1
Regressed by: 1093953

Modified STRs:

  • Open page on Firefox for Android 67
  • Open about:debugging on desktop Firefox 68 or 69
  • Connect to device and Inspect any tab
  • Open Console
  • Enable the "CSS" filter in the console

Expected results: should see CSS warnings
Actual results: console panel becomes blank

Pushed by jdescottes@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/08cc281fa759
add fallback value for pageError.cssSelectors r=pbro
Status: ASSIGNED → RESOLVED
Closed: 3 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 69

Comment on attachment 9068499 [details]
Bug 1553214 - add fallback value for pageError.cssSelectors

Beta/Release Uplift Approval Request

  • User impact if declined: Blank console when using remote debugging to target Firefox 67 from Firefox 68 or 69.
  • Is this code covered by automated tests?: No
  • Has the fix been verified in Nightly?: No
  • Needs manual test from QE?: Yes
  • If yes, steps to reproduce: - Open page on Firefox for Android 67
  • Open about:debugging on desktop Firefox 68 or 69
  • Connect to device and Inspect any tab
  • Open Console
  • Enable the "CSS" filter in the console

Expected results: should see CSS warnings
Actual results: console panel becomes blank

  • List of other uplifts needed: None
  • Risk to taking this patch: Low
  • Why is the change risky/not risky? (and alternatives if risky): Small JS change to fallback to a default value in case an error object doesn't have a cssSelectors property.
  • String changes made/needed:
Attachment #9068499 - Flags: approval-mozilla-beta?
Flags: qe-verify+

Comment on attachment 9068499 [details]
Bug 1553214 - add fallback value for pageError.cssSelectors

devtools fix for 68.0b7

Attachment #9068499 - Flags: approval-mozilla-beta? → approval-mozilla-beta+
Whiteboard: [qa-triaged]
You need to log in before you can comment on or make changes to this bug.