Ionic transitions getting white page only in ios - html

Im developing an app in ionic and its working perfectly fine in android, emulators and web (with ionic serve). But when is running in ios devices in transitions between pages suddenly it shows a white view instead the view that it have to display. This doesn't happen all time and i didn't figured out when specifically happen.
I appreciate any help.


it is probably a javascript error. To find it, the best way is:
first connect the phone with your mac (must be a mac) by USB.
Open Safary (no Chrome or Firefox)
In the Safary settings -> Advanced -> enable develop tools
Now on Safary will appear a develop menu on the top, click on it and you will see your phone and the app running, click on it.
In the develop tools, will appear all the console you normally see testing with ionic serve, but in the real device.
Just use the app and when you get a black page check the javascript error on safary develop tool.
I hope it helps, it did helped me a lot after discover it.


Finally I resolve it, it was a problem with transitions of ionic in ios. Adding this line to config in app.js like this
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$ionicConfigProvider.views.swipeBackEnabled(false);
}
Disable all back navigations transitions with swipe.


For what I searched, it can be a lot of things.. What helped me to figure out my case was small commits.
Anyway, I tried to use default param values and it doesn't work for my webview in iOS. If that's your problem too, you can see an alternative way to do default param values here:
Set a default parameter value for a JavaScript function
didn't work:
function(param = defaultValue){}
did work:
function(param){
param = param ? param : defaultValue;
}


Simply use can-swipe-back="false" on your ion-view element.

Related

Chrome/Selenium: use-file-for-fake-video-capture not working anymore

I have automated ui-tests that test a web application in chrome using https://theintern.io/
The application offers a barcode scanner using the device camera (https://github.com/zxing/zxing).
To test this feature, a fake barcode is shown to the application, this has worked until chrome version 90/91 (not quite sure anymore).
Since this version I can not access the fake video anymore.
Chrome-options I have set:
use-fake-device-for-media-stream
use-fake-ui-for-media-stream
`use-file-for-fake-video-capture=${fakeVideoFilePath}`
I can reproduce this outside of the application if I use the chrome window configured with selenium and go to
https://webcamtests.com/
This loads forever - same thing happens inside the application.
The webcam name is the path to the video the camera is supposed to show.
Any hints on what is causing this problem or how it can be solved?
Thanks!

Fixed with Chrome 93.
After the update it is just working again.

Google Chrome developer tools works very slow

Sinсe Google Chrome was updated to 50.x version, it become impossible to work with DevTools. This issue reproduced mostly in "Network" tab. Every time when you click on "request" it takes about 30-40 sec. after that chrome can crash. Tried to delete all extensions, clear cache, and reinstall, but didn't help. Does anybody know how to fix this issue?
I'm running Chrome 50.0.2661.87 m
UPD: The problem may be occurs because of long headers. Try to close response and request headers.

I've been having similar issues for debugging in Chrome versions 50+ on Mac OS X 10.11.3. The only solution I've found so far is to keep the dev tools docked to the right and it seems to be as performant as before. Not the optimal solution, but it works in my case.

Finally, a solution has been found which helped me after such a long time and after so many failed attempts to fix it: Solution on Google Chrome Forums
Go to chrome://flags/#force-color-profile
Change it to sRGB
Since Google does not allow direct links to chrome:// you'll have to insert the colon by yourself, or enter the whole link manually into your toolbar.

My situation was similar, after struggling a while with extreme slow developer tools response I found out the problem was caused by a Chrome extension I had installed for knockoutJs.
So for people experiencing these issues, as part of the initial troubleshooting, try disabling chrome extensions.

I'm using the Version 61.0.3163.79 and I have the same issue that this post talks about.
With some searches I found out that the problem was in the user that I was using. What I tried was to enter int google chrome as guest and the devtools became faster again.
So what I did was:
Check out if debugging using the guest user is faster as it should be.
Logout from the account.
Clean all cache associated to google chrome.
Restart the PC (but i think closing the browser is enough)
Login again in your account.
I hope this could help other people with same problem.
[EDIT:]
I found out that after some time (weeks) the google chrome dev tools will get slower again. So I tried the following solution and it worked:
Open the dev tools
Go to the Sources tab.
Cleaned all watched variables, breakpoints, DOM breakpoint and Event Listeners breakpoint.
[SECOND EDIT:]
After some weeks, the issue came again. What I did was installing the google canary Version 64.0.3249.2 canary (64-bit) and my problems vanished.
For who's that doesn't know what is canary, please check this link.

Google is aware of the problem - https://bugs.chromium.org/p/chromium/issues/detail?id=624097
The problem seems to have vanished in v.53 - they are currently trying to figure out what fixed it. If possible, the fix will be merged back to v.52. But at least they are working on it.

In case others arrive here facing the same issue I had, try changing the Dev tools tab you're looking at to Elements.
I had the "Sources" tab open and Chrome was trying to load enormous assets for that tab, which created a multisecond delay between the console.log() events I created and the display of those logged messages.

Make devtools snappy again by deactivating all breakpoints:
Go to the Sources tab, show the debugger (may be hidden) and hit Deactivate breakpoints.
(Chrome v62.0 on Windows 10)

I've had the same time issue on 54.0.2840.99 m version of Google Chrome.
But switching to Chrome Canary worked !

Reduce size of resource being overridden
Only overriding files with less lines of code worked well for me. I landed here because I was overriding a file which had 35,000 + lines of Javascript.
Further, if your resource is a new one - i.e. it is not included in a script tag or link tag, you can override main html document and add the tag : <script src="/my-new-script.js"></script>. Add the file to your domain-root within the Overrides folder on Chrome:
overriding HTML
then overriding CUSTOM SCRIPT:
Good Luck...

I also face same issue.
I tried unchecked toggle screencast. Now it is working fine.

In my case, I had Local Overrides setup (https://developers.google.com/web/updates/2018/01/devtools#overrides) in Downloads folder which had a lot of files in it and that slowed down devtools.
Setting up overrides in its own seprate directory fixed the slowness.

I sped up Chrome again by doing the following:
Open DevTools -> select Elements tab ->
select nested Computed tab -> under Filter, make sure that Show all is unselected.
select nested Event Listeners tab -> make sure that Ancestors and Framework listeners are unselected.

For me, running Chrome Version 81.0.4044.138 (Official Build) (64-bit) on Ubuntu 18, the problem seems to be the mobile view. When I disable mobile view inspecting becomes really fast again. I think it is caused by touch emulation and other mobile stuff.
To have something similar to a mobile view I move the DevTools dock to the side and resize it until I get the width I need. It is not perfect, but it is useful most of the time.
Besides Chrome, Firefox is much faster when inspecting sites overall, though I didn't use FF because I'm used to specific things on Chrome. Moreover, most of the sites I work with do not trigger these issues on Chrome, in fact, it happens with only one site.
PD: the site that triggers the issue on Chrome Dev Tools has lots of CSS variables. Not sure if that is related.
UPDATE 1 WEEK ago
I was able to use Chrome without issues even in the mobile view by disabling the option "Show media queries"

Go to the network tool and change it without any restrictions. Sometimes this happens if you change mobile settings. Google chrome changes this setting to test mobile device on low internet connection and leaves it that way.

Where is the react-devtool?

As you see ,I installed it on my Chrome.
But there isn't react tool on my development tools

Currently, It's not possible to have React Dev Tools in Chrome. Please have a look at this official link:
http://facebook.github.io/react-native/docs/known-issues.html#content
It's currently not possible to use the "React" tab in the devtools to inspect app widgets. This is due to a change in how the application scripts are evaluated in the devtools plugin; they are now run inside a Web Worker, and the plugin is unaware of this and so unable to communicate properly with React Native.
However, you can still use the Console feature of the devtools, and debugging JavaScript with breakpoints works too. To use the console, make sure to select the ⚙debuggerWorker.js entry in the devtools dropdown that by default is set to .
There is also an open issue on github. Please have a look at this as well:
https://github.com/facebook/react-devtools/issues/229
React Native now runs within a Web Worker on Chrome so that it gets a more pure and isolated JS environment that more closely mimics JSC on the device but this breaks the React devtools. #skevy pointed this out and I didn't see a task open yet. The fix might need to happen on the RN side but I figured that people thinking about the devtools are more likely to have a solution come to mind.
Repro: Run an app with RN master, run it in the Chrome debugger, try to use React devtools but "React" option doesn't show in the Web Inspector.

It's enabled only if your webpage is using react, I'm using it now.

Webpage made using Polymer terminates on Google Chrome

I have made a webpage using Polymer. The webpage doesn't open on Google Chrome (both Windows and Android). When I try to open the page, Chrome shows "He's Dead, Jim!" message on Windows and "Aw, Snap!" message on Android. I have reset the settings and reinstalled Chrome but the problem still continues. Can anyone tell me how to solve this problem or the reason behind it?
https://www.googledrive.com/host/0B2Zii8voDW6QcGduNnl1cFBReXc/fold/

maybe you can check if there is any error in your page, which stop polymer initialization:
https://www.polymer-project.org/docs/polymer/debugging.html#unregistered-element-bookmarklet
Btw, did you try the official demo page with your browsers? If they work, then it's your code problem.

Rikulo Bootjack Dart modal window not working on android devices

I'm building a webapp with Dart and I've used Rikulo's Bootjack library to get some Bootstrap elements. I have two modal windows in my app.
One of them is lanunched by triggering a button so I just had to follow the examples:
https://github.com/rikulo/bootjack/tree/master/example
I want the other one to be launched only on certain situations, so I've coded the following:
Modal myWindow;
DivElement readComplete = querySelector('#readComplete');
myWindow = new Modal(readComplete);
myWindows.show();
I've notice that both windows works fine in Desktop environments, but I've not been able to run the second way on Android Devices. I've tested with Chrome, Chrome Beta and Firefox. Does anyone has an idea of what may be going on? Is this a library or device restriction or I am doing something wrong?
Thanks!

Problem solved. Sorry for the trouble guys, but finally it wasn't related with bootjack. There was a different behavior between mobile and desktop solution when calling the 'route' library to use a Websocket. That was causing the show method not to be called due to an exception, but only on the mobile version. That is why I didn't see it when debugging from dart editor.