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.
Related
I've built an html5-video webpage that uses video-js and its chromecast-plugin. When I use the resulting cast button on video-js player's control-bar, when running on Chrome-browser on Android, it fails to completely transfer over to the TV's screen. The failing symptom is that only a large blue cast-icon is visible in the center of the TV screen. It fails on Android, each and every time I try it. (My Android is version 7.1.1, on a Google Nexus-9 tablet.)
And when it fails to completely cast over to the TV, the cast-icon-button on the video-js control-bar turns red, which I assume means that the chromecast-plugin 'knows' that it failed. (The videojs-chromecast-plugin is version 2.0.8)
My chromecast device is a 2nd-generation chromecast-dongle from Google.
[ From a PC-platform, the video-js chromecast-plugin's cast-button works perfectly every time. That PC-platform is Windows-10, using the newest version of Chrome browser (Version 63.0.3239.132 (Official Build) (64-bit)) ]
So, could someone with Android and a chromecast device please test my
webpage and report whether it works or whether they too fail with a large
blue cast-icon image in center of their TV-screen.
(Note: I've googled for symptom of the blue cast-icon in center of TV, and
find various reports of this exact symptom, on various platforms. But
none of those problem posts ever end with a solution, so I've concluded
that this is a known open issue.)
My webpage that is failing is located here:
https://weasel.firmfriends.us/HTMLVideoFromCloud/
[ You can see the page's html and javascript via "view page source"
in the browser (right-click anywhere on the page, outside of the
video-js viewer) ]
(EDIT#1) Ok, some extra clarification: The problem casting from Android happens ONLY when I use the cast-button at right-end of videojs-viewer's control bar.
But, I have found an alternative cast-button on Android, that CAN successfully cast my page to the TV. I don't recall exactly what I did to get this extra button to start appearing, but it will appear for a few seconds in the upper-left client-area of the video-js player window rendering my webpage. This 'workaround' doesn't completely solve my issue, because the goal is to get videojs-chromecast-plugin's cast-button to work. Also, other people viewing the page from Android may not know how to get that alternate cast-button.
(EDIT#2) I've tested now from two different tablets...both fail.
(1) Android version 7.1.1, on a Google Nexus-9 tablet
(2) Android version 5.1.1, on a Google Nexus-10 tablet
TIA...
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.
I'm working on a Cordova mobile app that uses jQuery Mobile. On this app, we've created buttons using icons from the Font Awesome library. In Chrome, everything works great -- the icons appear as they should. However, if we compile the app and run it on our Android test devices then the icons will start to randomly replace other icons on the same page.
If we use Chrome DevTools to inspect the page while the mobile app is running on the phone, the icons display correctly on the desktop inspector, but not on the mobile device.
Here's a screenshot of the icons displaying correctly. This is from Chrome DevTools inspecting the mobile app while it's running live on the mobile device.
Here's a capture of the same screen taken from the device. I've indicated in red where the differences in icons are.
More pertinent observations and facts:
Our primary test devices are Samsung S7s running Android 7.0 -- all of these devices have this same problem.
The icons do not start to replace one another until we've changed pages a couple times.
It's not consistent which icons get replaced. It will vary each time we fire up the app. One icon that gets replaced one time might be left untouched the next time.
This problem does not occur on our older Android test device (Droid Razr Maxx HD running Android 4.4.2).
I've tried re-compiling the app with the android-targetSdkVersion removed, set to 22 and set to 25. In all instances, the icons continue to swap randomly on the newer Androids.
We've upgraded cordova-android to the latest version (6.2.3 as of writing) and the issue remains.
If I use Chrome DevTools to manually remove the Font Awesome icon CSS class (e.g., fa-user-plus) and then re-add it again, the icon will then display correctly on the device.
We've noticed that sometimes (as you can see in the screenshot below) a small white line might appear underneath an icon that has been replaced.
Does anyone know what might be causing this? Any theories on how it's possible for Chrome DevTools to show one thing while the device shows another would also be helpful.
I stumbled across a solution for this problem while debugging a separate issue on the same app where position:relative elements would disappear while I was scrolling on a mobile device.
While I haven't been testing on an iPad, the solution provided in this question iPad Safari scrolling causes HTML elements to disappear and reappear with a delay fixed both issues.
What I did was apply -webkit-transform: translate3d(0,0,0) to the class .ui-btn (the jQuery Mobile class for buttons). After a re-compile, the icons would no longer randomly swap with one another.
I have little insight as to why -webkit-transform: translate3d(0,0,0) fixes this apparent WebView rendering bug. If anyone has a deeper understanding of what's going on, please leave a comment!
I am trying to use Remote Debugging Android Devices on chrome. But I can not resize my mobile screen fit to 100% or any on Chrome(PC).
On mobile it looks like
But on Chrome (PC) it looks like
Now the problem is : I can not either resize mobile screen on Chrome (PC) nor scroll to bottom (I can only scroll only if I can on mobile)
I tried by zoom in/out but it's not working. But I can see the remaining part by resizing window but I can not see on full size window.
I am using Chrome Version 50.0.2661.102 m on Windows 10 Pro(64bit), Android 5.1 on Moto G (1st Gen)
UPDATE : Now I have updated chrome to Version 51.0.2704.84 m But still same problem
Press ctrl++ several times it will resize automatically, I found this solution by chance:)
Looks like you found a bug. Please file an issue on the Chromium Issue Tracker so the team can triage the problem and address it.
I had the same problem debugging Ionic with Crosswalk, but I was able to resolve the issue by pressing Ctrl and scrolling down.
Unfortunately, this changes the size of the text—but at least you can see all of the mobile screen.
I will try to answer it in best possible way.
When you resize the Chrome in Desktop Screen, try to resize the screen from divider screen between remote device and elements sections. Also use the resize from top of the Chrome as well if needed.
You will find scrolling issue in Google website landing screen (as in your case).
Try another website and check.
Remote debugging requires your version of desktop Chrome to be newer than the version of Chrome for Android on your device. Try using Chrome Canary (Mac/Windows) or the Chrome Dev channel release (Linux) on desktop.
See here for technical issue. Android Remote Debugging Troubleshooting
Below are my observations for two tabs:
I have opened two different tabs in Chrome in my Android device.
Now in left side has active Google opened in tab 1 and in right side inactive StackOverFlow is there in tab 2.
In below screen, left side has inactive Google opened in tab 1 and in right side StackOverFlow is there in tab 2.
After scrolling StackOverFlow screen
Individually screens look like below :
Please let me know if any issue is there. I am using Android 5.1 on Moto E
I'm using Google Webfont Roboto and Yanone on my Wordpress blog. I'm using WP enqueue to load the fonts:
wp_register_style( 'google-fonts', '//fonts.googleapis.com/css?family=Roboto:300,400,500|Yanone+Kaffeesatz:400,700', array(), null );
wp_enqueue_style( 'google-fonts' );
Now the strange behavior is as follows:
The font loads (I can see that on my dev tools). But it doesn't show.
When I hover on the Yanone font, it shows up mysteriously.
When I hover on the Roboto font, it doesn't show up. But when I right click on it, It shows up.
Also, if I open the dev tools/inspect element, the font shows up.
There's no way to show the fonts on Chrome for Android.
It works fine in all browsers except Google Chrome. (both on Windows and Android phone)
Strangely, it was working fine with Chrome too but suddenly it stopped working. (probably after Chrome updated)
I'm racking my brains apart with the issue. Nothing seems to fix it. Shame that Google can't render its own fonts properly while Firefox etc. has no problem.
Can someone please help me with a workaround? I'm stuck. :(
p.s. I'm using W3 Total Cache plugin. Just FYI.