Chrome devtools blank page when inspecting mobile app - android

I am developing mobile app(in Ionic4), but I am not able to inspect it and debug it in chrome devtools. When I go to Chrome/inspect the device with running app appears in the list, but when I click on inspect, only blank page opens, it looks like this:
device page
blank inspect page
When i hit Ctrl+Shift+I blank page reopens, and i can look into the console, there are some errors:
Uncaught TypeError: Cannot read property 'appendChild' of null
at installExtraStyleRules (devtools_compatibility.js:1484)
at installBackwardsCompatibility (devtools_compatibility.js:1457)
at devtools_compatibility.js:1504
at devtools_compatibility.js:1506
Uncaught TypeError: Cannot redefine property: keyIdentifier
at Function.defineProperty (<anonymous>)
at installBackwardsCompatibility (devtools_compatibility.js:1381)
at devtools_compatibility.js:1504
at devtools_compatibility.js:1506
[Deprecation] Application Cache was previously restricted to secure origins only from M70 on but now secure origin use is deprecated and will be removed in M82. Please shift your use case over to Service Workers.
Uncaught TypeError: Object.observe is not a function
at WebInspector.Main._createSettings (inspector.js:10380)
at WebInspector.Main._gotPreferences (inspector.js:10372)
at DevToolsAPIImpl.embedderMessageAck (devtools_compatibility.js:43)
at <anonymous>:1:13
Any ideas where is the problem? It happens only on this type of device, on other devices, it works great.

I have a little experience with Ionic. Not a big fan, since this is the start of the bugs you will face. You have to be a professional expert Javascript programmer to understand every bit of the code Ionic uses to compile (to debug and find problems). And even then I find it hard to find some errors too.
My advice is to switch to React Native with the Typescript template. Since Typescript gives you the best linting, help with errors and compiling. I have built multiple apps using Ionic, all far less advanced and beautiful then my React Native work. As well as other programmers to understand you're code, it's better to use Typescript with generics, interfaces, classes and such... If you have any other questions, post them below and I edit this post.

Related

Debugging MAUI app on Android after manual launch

I have a MAUI app on Android which works perfectly when launched from Visual Studio with the debugger attached. If I published an APK and install it on the device manually, the application crashes as soon as I use the AppShell to change the current page.
How can I attach the debugger to it after I've launched it manually? Failing that, just finding a way to see a stack trace for the unhandled exception would be a big step forward.
I tried capturing a bug report and reproducing the crash, but the report did not appear to contain any account of crash. I was unable to find any crash dump logged by the OS, but this is my first Android app, so I might be missing something there.
Thank you #jan-joneš, you set me along the right path. Although it's outdated with respect to MAUI, I found a useful page in the Xamarin documentation with more tips.
It would be so much easier if these exceptions were flagged by the debugger!

Error trying to run bare React Native app with gesture handler

Background
Hey everyone, I'm building my first React Native app without Expo. I'm trying to use #react-navigation/bottom-tabs, I've followed the instructions provided in the docs every step of the way. I'm then trying to add react-native-appearance to handle dark mode preference from device. However, from here on out things get tricky when I try to run the app using an Android emulator.
Problem
ERROR react-native-gesture-handler module was not found. Make sure
you're running your app on the native platform and your code is linked
properly (cd ios && pod install && cd ..).
And that is followed by a number of variations of this error message:
TypeError: null is not an object (evaluating
'_$$_REQUIRE(_dependencyMap[8],
"./NativeAppearance").NativeAppearance.initialPreferences')
What I've tried
As I've mentioned earlier, I've referred to the Navigation docs, but also to all the following:
Gesture handler docs I've exhausted all options here, from the basic stuff to manual linking.
Gestutre handler github issue 671
All options from Appearance docs
How you can help me
I would really appreaciate if someone could let me know how to solve this issue, I imagine it has to do with compatibility with Appearance, so I'll be checking that out while I wait for an answer.
Thanks a lot in advance!

Android Chrome 67+ Only - SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

I am getting a error in my code that only seems to happen on Chrome version 67+ on Android only. I am not having this problem on any other platform using Chrome. This happens occasionally.
Error Message:
SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules.
In terms of where the error happens, one only solid traces I've seen in breadcrumbs is HTMLLinkElement.cleanupVisited.
I've seen the mentioned error talked about in the context of the new Chrome 64+ CORs changes but my css is served on the same domain and I am not calling .cssRules() api's anywhere in my source code.
Anyone else seeing the same thing?
I was seeing exactly the same issue. But I discovered that my Asp.Net Mvc project was calling the method .cssRules through the modernizr 2.8.3 library (line 691). I found the reason of this issue on this post https://stackoverflow.com/a/49161468/2095712. The author states:
Since our (naïve) function was iterating through all loaded
stylesheets, it was attempting to access this stylesheet injected by
the extension and thus causing the CORS error.
Since this CSS is hosted in another domain this problem will be seen on the logs (sentry in my case) when user has such kind of extension installed.

wrapped android-app crashes on resume "no current context"

i got a webapp build via flambe/haxe which is wrapped by phonegap build to get an .ipa and .apk. For now the only remaining error is that the app looses its context if i switch between apps or pressing home-button resulting in the following error on android:
"W/Adreno200-EGL(31381): <qeglDrvAPI_eglSetBlobCacheFuncsQCOM:5575>: EGL_BAD_PARAMETER"
"E/libEGL(31381): eglSetBlobCacheFuncsANDROID resulted in an error: 0x300c"
"E/SurfaceTexture(31381): [unnamed-31381-1] updateTexImage: invalid current EGLContext"
"E/CanvasTexture(31381): unexpected error: updateTexImage return -38"
The last two lines keep repeating (even after several minutes) until i close the app manually which results in the following error-message:
"E/libEGL(21636): call to OpenGL ES API with no current context (logged once per thread)"
Full errorlog can be viewed here: http://goo.gl/UkxwfI (Dropbox)
One thing that keeps bugging me is the following message since all "related" problems got that feature turned ON, but i cant find anything to change that.
"D/webcoreglue(31381): netstack: Memory Cache feature is OFF"
Another thing is with: D/CordovaActivity(31381): CB-3064: The errorUrl is null
As of http://goo.gl/qZWc4F (github) there seems to be a problem on resuming in cordova. (just strg+f "cb-3064")
Took me the whole day to use google on terms like:
EGL_BAD_PARAMETER, qeglDrvAPI_eglSetBlobCacheFuncsQCOM, SurfaceTexture, CanvasTexture, updateTexImage, invalid current EGLContext, eglSetBlobCacheFuncsANDROID, error: 0x300c, OpenGL ES API
but without any good hints or helpful info.
additional information:
tested on Sony Xperia J (ST26i) and android 4.1.2
min android SDK 14
android:hardwareAccelerated="true" (default since sdk 14)
landscape + fullscreen
webview used to display the website coming from flambe/haxe
used build phonegap / phonegap 3.3 (using 2.8 - 3.3 = same)
building it myself via cordova doesnt help (so it should not relate to phonegap build)
cordova.inappbrowser only used to open links in external browser, website running in webview
website only shows a html5-game (nothing fancy, just something like bejeweld)
Maybe there's some easy help by juggling with the Android-Manifest. I really dont want to do native since the webapp is shipped to iOS via Phonegap too.
Update 1
Tried to reproduce the error using native android and playing with different manifest-settings. But it seems like this has something to do with how phonegap/cordova handles the drawing of everything on screen.
Next things to do will involve posting on phonegap-forums and checking out iOS errorlog. Maybe i find something while comparing my results to: iOS app crashes on resuming
Update 2
iOS-Errorlog doesn't help. Exception Type 20 and Exception Code 8badf00d. Stack shows errors with graphics too (like in android). Errorlog see Link in Comment...
"Fixed" by building android and ios myself with cordova. Resuming/Restarting feels a bit bumpy but thats the next thing to fix.
Phonegap build just doesn't like the life cycle of apps.

Build Chrome for Android

My original post was about one month ago. Looks like Google has really cleaned it up and made the basic features upstream. With the help of Nikolay's comment, I was able to build the contenttest shell and chromium test shell. However the chromium test shell looks exactly like the content shell. It basically has an address bar and back/forward button. That's it.
I am still trying to find my ways in this giant project. But my understanding is that Chromium should be a fully functional browser including the basic UIs such as menus, bookmarks, etc (just like Firefox). Chrome is Google's flavor with their own Google specific services. But Chromium should has the basic features as a fully functional browser. So is it the right understanding? If so, why Android port is not? Anybody knows that if there is the full UI code for Android in Chromium? If not, is it coming or it will be like this going forward? Any other open source project that can be used to add a basic full browser UI to chromium for Android?
There is no Chromium build for Android. As of right now the closest you are going to get is to build the ContentShell described in https://code.google.com/p/chromium/wiki/AndroidBuildInstructions - content shell gives you a lot of the browser that you need, however not all of it.

Categories

Resources