Remote device debugging window display problem

[Boutroux Gilles]

Hi everyone

The title may not be a bit off, but i'm struggling at even explaining what's going wrong.

I use the remote device debugger to debug a cordova app. But since yesterday when I "inspect" the device the window opens somhow bloated on the top right corner. The window match the full size of my screen but only display infos as show below. Also I can't see what is in the tabs. Just the console still displays things.

If anyone could help me with that it would be a life saver.
Thanks

[Simon-Stewart]

Hi Giles and everyone.

I am finding exactly the same fatal problem when debugging javascript on a Cordova project and the problem suddenly started probably around Dec 14th as you stated.  The problem only occurs for debugging the emulator.  When debugging with a device connected by USB the system works fine.
I tried creating a new emulator.  Also reinstalling Chrome.

[Will Chen]

Copied Pavel's response from a related-thread:

The issue is the /deep/ selector that is no longer working in Chrome that was used in DevTools M44. In order to workaround this, you might have to use Chrome prior to M63 to remote debug your app. You should be able to find Chromium of previous versions for all the platforms. Sorry about the inconvenience, but /deep/ removal was a breaking change we could not do anything about.

--
You received this message because you are subscribed to the Google Groups "Google Chrome Developer Tools" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-developer-tools+unsub...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/3d87ca78-c2a5-44ce-852e-4a16878a55cc%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Simon-Stewart]

On Tuesday, December 19, 2017 at 5:44:35 PM UTC, Will Chen wrote:

Copied Pavel's response from a related-thread:

...

Thanks for information.  Any estimate on when this might be fixed?

[Will Chen]

We can't fix this because the platform removed an API that our old versions relied on.

Please use an earlier version of Chromium.

--
You received this message because you are subscribed to the Google Groups "Google Chrome Developer Tools" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-developer-tools+unsub...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/bac9433b-c1ad-4896-82d2-05b225f3a268%40googlegroups.com.

[Simon-Stewart]

Will
Thanks for this information.  When you say "the platform removed an API that our old versions relied on."  what platform are you referring to?  Has something changed in the android emulator or in cordova webview, or where?

[Will Chen]

I'm referring to the Chrome browser that's "hosting" the DevTools window which is remotely debugging the webview / etc. Essentially, the latest Chrome has removed / deprecated shadow DOM deep selector, which is something we used in previous versions of DevTools UI. In other words, we're able to remote debug older versions of Chrome by loading the same old version of Chrome DevTools UI and usually this works since Blink tries very hard to maintain backwards compatibility but occasionally they remove an API that we relied on.

--
You received this message because you are subscribed to the Google Groups "Google Chrome Developer Tools" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-develo...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/42e3905f-e9f4-4d03-8a76-d922bc699362%40googlegroups.com.

[Mussa Khan]

Hello all,

I've been having the exact same problem running chrome 63 on both ubuntu 17.04 and ubuntu 17.10. I can confirm that the issue is resolved by using an older version of chromium. However, I'm just wondering for the future and onwards, are we stuck using an older version of chromium or in the future when debugging cordova/ionic apps, will there be a solution? As I understand from your post Will, this means that since it's a breaking change that ionic and cordova apps relying on remote debugging will never be supported by any incoming chrome or chromium browsers?

Thank you

On Friday, December 22, 2017 at 6:15:09 AM UTC+11, Will Chen wrote:

I'm referring to the Chrome browser that's "hosting" the DevTools window which is remotely debugging the webview / etc. Essentially, the latest Chrome has removed / deprecated shadow DOM deep selector, which is something we used in previous versions of DevTools UI. In other words, we're able to remote debug older versions of Chrome by loading the same old version of Chrome DevTools UI and usually this works since Blink tries very hard to maintain backwards compatibility but occasionally they remove an API that we relied on.

On Wed, Dec 20, 2017 at 1:26 AM Simon-Stewart <si...@simonstewart.ie> wrote:

Will
Thanks for this information.  When you say "the platform removed an API that our old versions relied on."  what platform are you referring to?  Has something changed in the android emulator or in cordova webview, or where?

On Tuesday, December 19, 2017 at 6:07:43 PM UTC, Will Chen wrote:

We can't fix this because the platform removed an API that our old versions relied on.

Please use an earlier version of Chromium.

--
You received this message because you are subscribed to the Google Groups "Google Chrome Developer Tools" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-developer-tools+unsub...@googlegroups.com.

[Geert Dekkers]

I have a similar problem on Chrome 65 on OSX 10.11 -- suddenly, around 2 weeks ago, the emulator started showing just one quarter of the screen. Any ideas?

[Tri Nguyen]

I experienced the same thing too.

Try zooming in / out using Ctrl + Ctrl - or Ctrl Mousescroll. At least you will see Console tabs, network tabs, etc..

I'll try Chromium too. Hopefully Chrome team will fix this.

[Dennis Smolek]

So just to be crystal clear on the issue and where the dev team stands.

1. It's an issue with Shadow DOM in the original dev-tools UI being removed from Chrome

2. The Dev team knows about the issue

3. There is no ticket ( internal or otherwise) on the issue

4. The team has no plans on fixing/repairing the issue

5. They understand that by their own distribution charts roughly 75% of coverage is gone, so webview based apps (like Cordova/React/etc) are screwed for a large portion of their coverage

6. The only advice is to use a previous version of Chrome/Chromium Which they don't offer and is a huge pain and easy to mess up

Are you saying you CAN'T fix the issue as all the chrome data comes from the device itself? Or is the UI too complex and the plan is to wait until coverage moves farther beyond?

If it's not possible / related only to the app I can live with that, but maybe a heads up on this big support page that versions < 7.0 cant work would be super helpful

If it is possible, or perhaps you can link to a page with the last stable release and how to get it running to help folks..

[adamsam...@gmail.com]

Confirmed this problem happened around Dec 2017 while debugging my Android 6 Cordova app (which can not be upgraded). This has caused me considerable headaches and lost time (and still is). I've read warnings saying that reverting back to an old chrome may cause loss of user information (bookmarks, history, etc).

[Chris Eelmaa]

I didn't know if I was dreaming when reading this thread or not. Using older Chromium is not acceptable "solution" nor is it easy.

No replies from devs either on this bug. I hope they understand that this makes developing on Android much much harder than on iOS. It should be the top priority for DevTools - that is if anyone even is working on that.

[John Brock]

I have to agree with everyone else in this thread that it's rather off-putting to just tell someone to go and use an insecure, old release without any pointers or plans for a fix.  And telling developers that you can't fix it because an API was removed is complete garbage as we all had to make that change in our own code to fix things so we know it can be done by the Chromium team as well.  Heck you are the ones that created the problem in the first place for everyone else.

For those that still really need to use this older version and haven't just abandoned Android development yet, I found that you can grab the last available release from this location and the remote debug tools work as expected.

http://commondatastorage.googleapis.com/chromium-browser-continuous/index.html

Select the OS that you are working with, and then scroll all the way to the bottom and click on the last release available.  For Win-64 this will get you Version 51.0.2683.0 (64-bit)

Of course if your app uses newer ES6 features that weren't available in this older browser, you may still run into problems.

Good luck to everyone out there.

--jb