Debugging iOS7 Safari CSS issues with web inspector - ios7

I followed the steps to set up debugging webpage on iOS. It worked. However I see an issue with the inspector - it doesn't let me check the DOM and corresponding CSS. Anyone else has this issue? (Exact same issue when debugging using the simulator.)
Screenshot: http://screencast.com/t/E4fxPQwk14
Resource: https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/DebuggingSafarioniPhoneContent/DebuggingSafarioniPhoneContent.html
Thanks!
UPDATE: WebKit nightly works. Thank you Timothy Hatcher!

You need to use a WebKit nightly, Safari 6.1 or Mavericks to use Web Inspector with iOS 7.

If you don't have access to Mavericks, You can also use Chrome devtools via proxy.
Debug iOS 6+7 Mobile Safari using the Chrome DevTools

Related

React Native iOS Debugging in Safari Missing on M1

I'm used to debugging my React Native (0.63.2) app using Safari's dev tools. I got an M1 Mac Mini last week and have since been unable to get the console or source tabs to show anything from the iOS simulator. Not sure if this is related to the new machine, or if I missed a setting. Any ideas?
I usually do Develop > Simulator > JSContents from Safari, and everything would show up fine. I can get logs in the terminal, but Safari's devtools are much easier to manage.
Installing and using the "Safari Technology Preview" from https://developer.apple.com/safari/download/ worked for me.

Headless safari browse via windows

Can I run headless safari browser via windows?
I did not tried it yet but it's just I wanted to check if it's possible. If anyone have what all I need.
The short answer to this is no. The reason for this is an issue with Safari specifically, not Selenium. You can find an explanation on this relevant GitHub issue opened under the Selenium repo: https://github.com/SeleniumHQ/selenium/issues/5985
The GitHub issue is marked as closed by the Selenium developers, because Safari application itself does not support headless mode.

How to enable Safari ITP Debug mode

I'd like to force Safari to mark one of my domains as tracker with new ITP 2.0.
I followed the guide here https://webkit.org/blog/8387/itp-debug-mode-in-safari-technology-preview-62/
Since the new Technology Preview version (66) doesn't have ITP Debug mode I've used normal Safari 12.0 on macOS Mojave. After enabling ITP Debug mode and restaring Safari I don't see anything in logs as the guide suggest nor does setting
defaults write com.apple.SafariTechnologyPreview ResourceLoadStatisticsManualPrevalentResource example.com
have any effect (even with Safari instead of SafariTechnologyPreview). Do I need to change any other Safari or OS settings?
I've managed to get Safari Technology Preview 63 download link (https://secure-appldnld.apple.com/STP/091-99601-20180815-01EC2FD2-85EB-11E8-AB5B-AEA972136C40/SafariTechnologyPreview.dmg) via InternetArchive, ITP Debug mode works there.
Thank you Jakob. That helped me. To clarify your link, that version is only for OSX Mojave. Build 62 for High Sierra is available here: https://secure-appldnld.apple.com/STP/091-95878-20180801-01EC2FD2-85EB-11E8-AB5B-AEA972136C40/SafariTechnologyPreview.dmg
On newer version of Safari Technology Preview, or inside Safari 13.1+, you should use these updated steps for enabling debug, because the labels have changed: https://webkit.org/blog/9521/intelligent-tracking-prevention-2-3/
It says Catalina, but they also work for Mojave.

Missing "Web Inspector" Settings in simulator

After doing a "Reset All Content And Settings.." on the simulator the setting to enable using the web inspector in safari has disappeared, and I have no idea how to get it back:
Does anyone have an idea how to get this back, and "remote" debug a webpage in the simulator again?
It seems that this option is not available in the simulated devices. Tip: If you want to connect the console from your desktop Safari, you will need the Technology Preview. the normal one does not discover the simulator (though it finds the real device normally)
In my case (macOS 10.14.3 and iOS 12.1 simulators), the setting isn't there, but is active by default. Open the simulator and you should see it in Safari under Develop.
i needed to restart desktop safari. might help.
Worked for me download new Safari:
IOS Simulator: 13.4
(Safari Technology Preview)
https://developer.apple.com/safari/download/
Safari Technology Preview

Any recommendation/suggestion on best practice to develop app using PhoneGap for Android or iOS?

Also, is there a way to test those webapp in a webkit based browser such as chrome (with phonegap plug-in maybe) on a PC first before compiling it to test on a device or emulator?
The key reason is that trouble shooting mal-formed html, javascript code is very difficult on a device or emulator. You can not view the js console to see all error. The Weinre is great, but it can not spits out the error browser complains when initially loading the page.
It will be great if we can validate the html, js, css app first before diving deeper into testing on Android device. i.e. a way to weed out some simple problems before getting into more complicated deeper problems.
Any experience/suggestions/ideas/pointers are greatly appreciated.
Paul> Seems promising. Will try and report back. It seems knowledgeable in phoneGap mob dev. What are the key steps would you go through to dev a phoneGap mob web-app?
Ripple is a Chrome plug-in that includes a PhoneGap mode.
For JavaScript static validation, the PhoneGap Android Eclipse AppLaud plug-in includes a JSLint mode.
I would recommend you use Safari. In your Safari (on Mac) go to Settings (on PC) goto preferences -> Advanced -> check on "Show Develop in Menu bar".
Now you'll find in the Menu "Develop" "User Agent". There you can change the UserAgent identification, that will be send to the server. You can then change it to iPhone.
This way you can at least test it for iOS.
Hope that helps somewhat.