How to degub sass on iPhone with sencha touch - ios

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.

Related

Debugging web apps added to home screen on iOS Safari

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.

Safari 11 Preview: Inspect Element on device without using Develop Menu

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.

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

iOS application targeting iPhone still opens fullscreen on iPad?

I am developing an application with Phonegap/Cordova which should target iPhone only. I set Targeted Device Family on the project settings accordingly:
However, when I run the application on the simulator, or on a test device, it still keeps opening fullscreen on iPad, while I thought it should display in a small window at iPhone resolution.
Any suggestions on how to fix this problem?
XCode's "Target Settings" were overriding "Project Settings".
More details on this matter here:
XCode Edit Project Settings vs Edit Active Target
Actually, I've had this same problem. The fix was pretty much the same as yours but I'd like to elaborate a bit on that.
Using Xcode 4.5.1:
Go Project navigator
Click top item (This should be the name of your project, saying something like "1 target, iOS SDK 6.0)
Click on your app name under "Targets"
Then, under the tab "Summary" set the "Devices" value to iPhone (or iPad, or whatever you wish)
Then click on your app name under "Project"
Click Build Settings
Scroll all the way down to the "Deployment" section and select the proper value for Targeted Device Family EVEN WHEN IT'S ALREADY CORRECT!
That did the trick for me. I had to "confirm" that setting again and then my trouble were over. I've seen an experienced iOS dev do that thing too a bunch of times and I thought it was a tick :) Turns out it actually has an effect sometimes. I guess the config isn't always in sync with what Xcode shows.

Is there a quicker / better way to clear the iPhone Simulator cache than deleting its directory?

So I'm still reasonably new to iOS development and I'm finding myself quite regularly needing to delete either DerivedData, or the contents of the iPhone Simulator directory, to get things to actually execute from my code. Clean in Xcode doesn't do the same as emptying those directories, right? And if not, is there an easier way to do it than lugging Finder around to get to them, and clearing them?
66:99 and climbing:
Yes, there is a better way than going into every single simulator in town, and resetting contents and settings one at a time. Also much better than looking into your simulator's directory and yanking the cache from under its feet.
Quit iPhone Simulator, then run xcrun in Terminal:
xcrun simctl erase all
Safe and effective.
See https://stackoverflow.com/a/26394597/218152 for single device
xcrun simctl erase [device ID]
In the iOS Simulator menu, there is an option called Reset Content and Settings...
This should do the trick.
EDIT:
To make this much quicker and easier, I added a shortcut key like this...
In System Preferences, choose Keyboard
Then choose the Shortcuts tab.
And click App Shortcuts
Click the plus button to add another shortcut.
Lastly:
Click theChoose Simulator from the Application: drop-down. If it's not there, scroll to the bottom of the application list and choose "Other...". Then type "simulator" into the search and add the Simulator from there.
Type Erase All Content and Settings... into the Menu Title: text-box.
Type your preferred shortcut key into the Keyboard Shortcut:. (I use command-period)
Click the Add button.
Now, while in your iOS Simulator, you can simply use your new shortcut key to reset.
If the Simulator doesn't appear in the drop down list:
In a Finder window, go to your Applications folder.
Right-click Xcode and choose "Show Package Contents".
Navigate to
Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/
You will see iPhone Simulator.app.
Now, in the Settings app, instead of choosing iOS Simulator which is missing, you choose Other....
This will cause a window to appear that has a list of Applications.
Now, drag iPhone Simulator.app from your Finder window to the window that appeared when you clicked Other....
For web development and testing on the iOS Simulator (Safari):
With both iOS Simulator and Safari open, go to Safari > Develop > iOS Simulator and select your page which will give you access to the Web Inspector tools.
Go to Safari > Develop > Empty Caches to clear the cache on iOS Safari.
Web inspector new has option to disable cache 2020 solution

Resources