Google Chrome Devtools broken when inspecting Android Webview - android

This worked well and the problem started happenning about two weeks ago.
I run a Chrome on a Windows 10 computer. I have already tried uninstalling, and then reinstalling Chrome since the issue started. No change.
This is what happens:
1) I start Android emulator
2) Run my cordova app in it
3) Go to chrome://inspect and click on the link for my running app on emulator. It is listed ok, that works.
4) The DevTools window opens, but it does not show all the information as it did. I see half of the screen blank. The menu tabs sometimes don't show, I have to minimize, then maximize, then they MAY show.
There are no scrollbars for any of the content panels so I cannot actually see anything useful.
I tried clicking on the gear icon in the top right of the screen, to open Settings, and see if changing something there would fix it. Nothing. The settings window opens but it will ONLY show the links on the left to the settings areas. The right side where the settings controls should be, is completely blank.
I have created a new emulator and the same happened.
I have Android Studio 3.0.1
I tried inspecting the devtools with shift-ctrl-j
It is showing some strange errors. As if it was loading an older version of itself:
Please help, I need to use this to debug my cordova app during development and I don't know what else to do. Thank you.

As explained in Kayce Basques's answer, this is due to a problem with versions of Chrome since 63.
The solution is to use an older version of Chromium.
Here are the download links for the the latest version of Chromium (version 62.0.3202.94, branch base position 499098) which support it:
macOS: https://www.googleapis.com/download/storage/v1/b/chromium-browser-snapshots/o/Mac%2F499098%2Fchrome-mac.zip?generation=1504230238091965&alt=media
Windows 64 bits: https://www.googleapis.com/download/storage/v1/b/chromium-browser-snapshots/o/Win_x64%2F499095%2Fchrome-win32.zip?generation=1504230103809077&alt=media
Feel free to edit this post to add the links for other platforms.

Check out: https://groups.google.com/forum/#!topic/google-chrome-developer-tools/s47cbyLKvxA
I haven't digested the thread fully, but I think it's due to a deprecation in Chrome that is outside of the DevTools team's control.
Please let us know if this is indeed the same issue that you're seeing.

Related

Android Chrome Inspect Devices Blank Screen

I'm dealing with a problem since a few days. In normally Chrome Inspect property was working properly but suddenly that broke down. I didn't understand why happened. I'm seeing devices in page. When I clicked to inspect, It opens blank page. I uninstalled and reinstalled chrome but it doesn't work. If you have any idea about this situation, could you help me please?
I think it's a bug in the latest Chrome version, try to downgrade to an older version of Chrome.
Here is how can you downgrade Chrome version:
https://support.google.com/chrome/a/answer/7125792?hl=en
EDIT:
Use Microsoft Edge browser: edge://inspect/#devices - it's work fine for me.

cordova app blanks out in chrome inspector

Have a most bizarre issue that just started happening two days ago for no reason. It seems to be getting worse too. I remote into my home computer routinely to develop my cordova app. Connected to my computer is a Samsung phone for testing. After compiling my app to the phone, i launch chrome inspector to see the app and do debugging, UI development, etc
I have been doing this setup for 3 months now and it all works fine. About two days ago when I compile my app chrome inspector is just showing blank - it says its loaded the project/index.html file - but everything is blank. No resources, no elements...nothing. However when I compile and deploy the app to the device, I see the "app name" in Chrome disappear and reappear after that attaches and deploys...I then click the "app name" to open it up in Inspector. So Chrome see's it deployed, but inspector is just completely blank.
I recompile, redeploy and then it works again. But more and more lately, even after recompile/redeploy its showing blank again. I have no idea whats caused this - I didn't do any updates or plugin changes....I was literally testing CSS values when all this started. And I can't seem to find any references to this issue in google searches.
Anyone seen this before?
I had the same problem after some time researching I found that:
You can't debug the release APK!
you can just use the debug APK
for more ref
The problem turned out to be using a css style on an Ionic Modal or Popover. Specifically, using border-radius:1px. If defined, the web UI portion of Chrome Inspector would black out. So to troubleshoot my app development using Chrome Inspector I would have to disable that css style until it was ready to deploy the final app.
However, since then...and within the last 2 weeks or so, it appears that Chrome has fixed this issue. If you use border-radius with an Ionic Modal or Popover, you can see the bottom corners have the radius applied, but the top corners are square. Seems to me Chrome's fix for the problem was to simply remove top border-radius for rendering in Chrome Inspector.

Chrome remote debugging: empty inspect tab

I'm using Google Chrome v35.0.1916.114 and followed the steps to enable remote debugging on my Samsung Trend Plus GT-S7580 which runs Chrome v35.0.1916.122.
I can effectively view the opened tabs, close them and all, but inspecting a tab gives me a blank console.
Any reason why it doesn't work?
I have faced same problem. In my case I have found that version of chrome browser on windows system was 44.x but on android mobile device has 54.x. I just updated my windows chrome. And everything started working fine.
Remote debugging with Chrome downloads files from https://chrome-devtools-frontend.appspot.com.
Test your connection: Try to open https://chrome-devtools-frontend.appspot.com
If it doesn't work, that's why you're getting an empty window.
In this case, maybe you need a VPN.
I had the crasiest workaround:
Press CTRL+SHIFT+I, which opens a new developer tool for the developer tool.
Go to console and run: window.location.reload()
This reloads the first developer window and attaches to the original process.
Check with desktop chrome
1) Goto help => About Google Chrome
Check with version number
Check with Mobile Chrome go to Help & feedback
1) right side option => version info
Check with version number
If both are same ... Remote device debugging will work
Try using chrome Version 37.0.2041.4 canary or latest on your computer. I just had the same issue with the version you have but installed the latest canary and got it working. Hope that helps.
I have the problem even with Chrome 46, here is my workaround...
On the blank/empty Dev Tools window press 'Ctr+Shift+i'. This opens a 2nd Dev Tools window.
You will see an error in the console “Uncaught TypeError: Cannot read property 'addExtensions'” and on the right one of these 2 links :
A) "VM45:72"
=> bad luck. Close 2nd window and try again.
B) "(program):72"
=> that’s it. click on the link "(program):72" and the 1st debug window will work again !
It may take one to 10 times before the "(program):72" appears
open chrome://appcache-internals/ and clear the manifest cache , then reload the resource
No cross browsing !
Jumping in quite late here, just had a similar issue. Turns out, in my case, I was using Chrome on my computer and Brave on my cellphone. Important to note that Chrome will allow to inspect Chrome!
In my case it was enabled proxy settings
In my case, I can remotely focus and close tabs on the mobile Chrome that were opened directly on the phone. I can also "inspect" those, with a nice screencast on the dev pc.
What does not work is entering a URL on the dev pc and click Open. That new URL is added to the list of tabs on the dev pc, but is not really opened on the phone. The Inspect button on that tab does not show a screencast, or just the blank one that OP asked about.
The solution is to enter the desired URL directly on the phone, then select that tab remotely on the dev pc to get a nice screen cast and debuggin situation.

Emulator is already running but not able to see it in ubuntu

I am using ubuntu 12.04,and Eclipse Platform Version: 3.7.2, I have one issue which i observed occasionally on my system I dont know whether this issue is common and did't find any related question so asked.. problem is - "when I tried to launch android application using emulator(API level 17 Nexus 4),it runs fine no problem and emulator is in front of me, But the moment i open other window like browser,editor it hides and i am not able to see it.." Log says that emulator is ruuning but dont know where it hide.
If someone else is facing this problem, it could be due to memory overwhelming. To solve, in Ubuntu, go to Home/.android/avd/Pixel_X_API_XX.avd
and delete the *lock files, then Run the emulator as usually.
Where I wrote Pixel_X_API_XX.avd it means, for example : Pixel_2_API_32.avd
Bye bye

Android Emulator icon Does not show in Taskbar ,Why?

Android Emulator Icon in windows 7 does not show in TaskBar..see my Image...
I tried but cant get solution only this found http://code.google.com/p/android/issues/detail?id=21709
But cant Solve problem ...
According the link you posted it appears to be a known bug. Most likely the only solution is to wait for the next version of the ADK Tools to be released by Google.
But after all, it is just a missing icon and doesn't affect the ability to develop using the emulator.

Categories

Resources