Safari iOS debugging with USB shows blank screen - ios

My problem is when I connect my iPhone 7 Plus into my Macbook Retina 12' and open "Develop > My Phone > Website That My Phone On Safari", under MacOs Safari it always shows a blank page like in the screenshot below.
What I have done already;
My phone is up to date.
My MacOs up to date.
I opened Safari Web Inspector from my phone.
Deleted Safari Cache from my phone and macOS.
But still, I have the issue. I really appreciate the help, I dig on the internet but couldn't find anything valuable. Don't want to Hard Reset my phone because I have loads of data.

If someone is having the same issue here is the solution;
The problem was safari version misalignment between phone. If you download safari technology preview it will solve your issue
https://developer.apple.com/safari/technology-preview/

Related

How can I see the source of a webpage as it would be displayed on an iPhone?

I don't have an iphone, but I want to see what the HTML looks like to my users using an iphone.
Is there a way to emulate an iphone, so that flash does not appear ? For example if I visit YouTube, I don't want to see the Flash player in an emulator.
Thanks
Download Xcode for free if you have a mac and you can use the iphone simulator bundled with it. See this link on How to run iPhone emulator without opening Xcode
try safari browser. select Develop, User Agent, iPhone (or iPad or iPod Touch) from that menu.
if the Developp menu is not found then, Show Develop menu in menu bar in the Advanced Preferences

Can't see custom keyboard in Safari of iOS8.1 simulator

After update to Xcode 6.1, I lost my custom keyboard in Safari of iOS8.1 simulator. But it's still come in photo app. Photo app can switch to my custom keyboard, but Safari still display English and Emoji, other system keyboard like Arabic also not work. I reset simulator but not work.
It's look nothing change in Safari in iOS8.1.I try to clear DerivedData folder but it no help.
I remove Xcode and reinstall from Appstore, not work too.
I must test on my device, too strange.
Does anyone have same issue? please help how to solve this.
This is a known issue. From the release notes for XCode 6.1.1:
Localization and Keyboard settings, including 3rd party keyboards,
are not correctly honored by Safari, Maps, and developer apps in the
iOS 8.1 Simulator. [NSLocale currentLocale] returns en_US and only the
English and Emoji keyboards are available. (18418630, 18512161)
The suggested work around is to use another app, such as Contacts, for which the keyboard does display correctly in the simulator.
You may have to stop your physical keyboard from taking control. From the Simulator's Mac menu:
Hardware -> Keyboard -> (uncheck) Connect Hardware Keyboard
The text above actually only contains a simple question
"Does anyone else have this issue".
The correct answer is
"Yes other people have the same issue."

Site with inifinite scroll suddenly reloads with error message in Safari on an iPad

Working on a site and got feedback from the client that when browsing the site on an iPad and iPad Mini the site will suddenly reload with the message "A problem occurred with this webpage so it was reloaded".
The site it's happening on is a fairly image heavy one, it's infinite scroll page with about 60 entries, retina enhanced imagery via <picture> element.
Never seen this before, what's causing it, and how can I get around it?
Perhaps it runs out ouf memory? But I thought iOS was smart enough to dump images out of view if it needs memory to load new stuff?
Apparently this did not happen on iPhones (I take it they tried with 5S and 6), but that's probably because the total screen resolution is much lesser and the images are smaller in file size..
The only way to find out is to plug an iPad/iPad Mini into a Mac running Safari and inspect the page runing on the device. So, first, turn on the "Develop" menu (in OS X Safari's Advanced Preferences), like this:
Then from the Develop menu you can select the device you want to inspect Mobile Safari on… like this:
That gives you effectively the same inspector that the desktop version of Safari uses and hopefully you'll find some clues as to what is going wrong. (I'm betting Javascript error).

iOS Safari, when running our web-app in stand alone mode, crashes iOS in background

We're developing a web app that extensively uses Cavas 2D for some demos, and is successfully running on both iOS and Android devices. Recently we've added stand-alone mode for iOS devices, so user has to "Add-To-Home-Screen" and run it using screen icon, just like regular app.
What happens recently is that after 10-12 times we start the web app on iPhone4:
Status bar (initially set to 'black') suddenly turns white and we cannot exit Safari (by pressing home button).
If we try to make screen shot (home + power button), shutter sound is played as if screen shot was taken and saved.
If we try to lock the device (power button), screen turns black, but no action after that can bring unlock-screen or any screen for that matter - display remains black.
We can only do reset by pressing home + power for 10 seconds after this point.
If we do not lock the device, web app continuously work with no issues at all, it does not crash, but cannot exit it (double click on home button also has no result).
Has anyone experienced this with their web apps?
Any guidance in how to debug this would be highly appreciated. We've tried using Safari on OSX, connect iPhone to it and use Develop -> iPhone menu but no luck so far.
Thanks in advance!
I would start trying to debug by running XCode with the iPhone connected to the computer.
In XCode open "Organizer" and go to the tab "Devices".
You should see your device there, from which you can view the iOS console. That might be able to tell you what is going wrong with the phone stops responding.
I don't think you have to put the phone in development mode (or be a paid developer) to see the iOS console.

Testing Apple Smart App Banner on desktop browser

Is there any way of testing Apple Smart App Banners in a desktop browser by doing something along the line of spoofing the user agent, or is this functionality so specific to Mobile Safari that I can only test it on an iDevice?
I know that merely spoofing the user agent in a desktop browser doesn't do anything in regards to showing the Smart App Banner, but maybe I can do something else in my desktop Safari browser to test the banner?
I am not an iOS developer but I have access to the iOS emulator on my colleague's Mac if that helps.
Unfortunately, the Smart App Banner is only displayed on iOS Safari on a real device. The iOS Simulator and desktop Safari cannot display smart app banners.
This is a bummer, especially because resetting smart app banners after they have been dismissed is a huge pain.
In chrome dev tools, click the sprocket that lead you to the more advnaced settings, there check the 'override' check-box, and select a mobile user agent(IOS, Android).
Keep in mind that the screen sizes that chrome provide are not always accurate and might need some adjustment.
For more accurate screen sizes you might want to use Mozilla & Firebug(basically has the same functionality)
You can just tap the toggle device toolbar inside chrome inspector and the smart app banners are recognized since this toggle changes to a mobile user agent.
See sample result :

Resources