I'm trying to debug a web app that is added to home screen. I have enabled web inspector on safari. I am able to debug the app if I open in iOS safari but when I add the app to home screen and try to debug, it shows 'No Inspectable Applications'. Any help would be appreciated.
iOS version: 11.2
MacOS Safari version: 11.0.1
You should put focus on the app first and then press:
Option+Command+i
So you do not open the inspector in advance in this case. This is not possible because you can consider it like opening a new browser tab where it makes no sense to inspect it from the inspector in another tab that is already open. Since the menu to open the inspector is missing when the PWA is opened as a desktop app, you need the keyboard shortcut to show it.
Not sure if it's related, I had an issue where I couldn't get the inspector window to open for a cordova web app on iOS 11.2
I found that I had to go back to (ios) settings and toggle Safari Web Inspector off and on while looking at the (osx safari) developer menu to see it and then inspect it.
Related
The Safari 11 beta 6 Web Inspector has a feature I want: the ability to retain items in the network tab after navigating to the next page. Unfortunately, it also appears to have a bug: it can no longer find "inspectable applications" in the devices area of the Develop menu. Same problem with Safari Technology Preview Release 38.
For Safari windows on the Mac, that's not a problem; I can control-click and Inspect Element and I'm in business. But for troubleshooting pages on a device, I'm hosed -- this was the only way I knew to open up the Web Inspector against an external device.
This isn't a problem of losing the "Web Inspector" setting on my phone (that's still checked), and as you can see in the photo, even the desktop browser itself doesn't show the currently open windows.
So I've opened up my react-native app in Expo today (using the iOS simulator) and I am creating by what looks like a debugging overlay.
Screenshot here:
I don't need this and it's blocking some of the UI for testing.
How does one turn it off?
You have the Element Inspector open. To toggle it off do either:
⌘+D if you are in the simulator
Shake your phone if you are on an actual device
This should open up the debugging menu. You can then click on Toggle Element Inspector to close it.
react-native-cli: 2.0.1
react-native: 0.47.1
react: 16.0.0-alpha.12
I finally managed to hook up an iOS device (iPhone 4S) to xcode and build my react native code to the device.
Shaking the phone gives me the following options:
as you can see there is no Live Reload option and the Reload doesn't work. I am forced to build it from xcode every single time I make a change.
Can anybody help me getting the Reload to work and enable Live Reload?
I have struggled with this for many days now - because it seems to change all the time and the only answers I have been able to find are obsolete.
Could the issue be that my iPhone runs iOS 9.3.5? _____
Had the same issue here, and fixed it like that:
Make sure wifi is disabled on the iDevice
Open System Preferences by selecting System Preferences from the Apple menu, or by clicking the System Preferences icon in the Dock.
When the System Preferences window opens, click the Sharing preference pane.
The left side of the Sharing preference pane lists the services that you can share. Place a check mark in the Internet Sharing box.
Then Check "USB YourDevice/iPhone/iPod/iPad"
You are Done! (working here on v0.47.1)
Check that you can access internet/network on your device, then run your app form XCode in Debug mode. Now, you should have the green bar on top loading from the packager and you can debug remotely.
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
I have changed the sass file in sencha and compiled it
Cleared iPhone simulator, cleaned the project
Nothing helps, in the browser I can see that the new styles were applied, however in the iPhone simulator and iPhone itself they haven't
So basically this is the smallest changed I wanted to try:
from: .x-desktop .x-title .x-innerhtml{padding: 0;padding:0;color:fff;}
to: .x-desktop .x-title .x-innerhtml{padding: 0;padding:0;color:#52A5D6;}
So my question is:
Why could cause this issue? Solved: if you look at the first class it belongs to x-desktop...
How to debug the sass if the styles have been transferred to the devise and applied?
Thanks
You can use Safari's Web Inspector to inspect your application while running in the simulator, or while running on a connected iOS device. To do this, first open up Safari and go to Preferences -> Advanced, and check the "Show Develop menu in menu bar" checkbox.
After this, launch your application in either the simulator or a connected device, then bring Safari to focus. Click on the "Develop" menu, and then either "iPhone Simulator" or the name of your device. You will see the page listed in the next menu.
From here, after navigating to the page, you can use the Web Inspector to inspect the page like you would if it were in the webpage.