1553214 - Console from about:debugging not working with Firefox for Android

Status: RESOLVED FIXED

(DevTools :: about:debugging, defect, P1)

Description

[Maciej Jaros]

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.

Comment 1

[Julian Descottes [:jdescottes]]

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?

Comment 2

[Maciej Jaros]

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

Comment 3

[Julian Descottes [:jdescottes]]

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.

Comment 4

[Julian Descottes [:jdescottes]]

Attachment: Bug 1553214 - add fallback value for pageError.cssSelectors

Comment 5

[Julian Descottes [:jdescottes]]

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

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/08cc281fa759
add fallback value for pageError.cssSelectors r=pbro

Comment 7

[Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout)]

https://hg.mozilla.org/mozilla-central/rev/08cc281fa759

Comment 8

[Julian Descottes [:jdescottes]]

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:

Comment 9

[Julien Cristau [:jcristau] (back August 18)]

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

devtools fix for 68.0b7

Comment 10

[Alexandru Michis [:malexandru]]

https://hg.mozilla.org/releases/mozilla-beta/rev/e87602ae8d9f