Android can use desktop Chrome's web inspector to debug HTML/CSS issues embedded in an App's WebView, as long as you connect them through USB.
I've been searching all over google and this site and cannot find any information regarding this. Is there a similar way to inspect HTML/CSS elements/rules in iOS?
Because there are some issues that only affects webview, so viewing it from iOS Safari cannot reproduce some issues.
You can do this using Safari on Mac.
First, go to settings on iPhone → Safari → Advanced. Then enable the "Web Inspector" option and follow the instructions to enable on Mac.
Edit: this will only work with apps installed using Xcode.
Related
I have a phonegap app that opens a website using window.open(). While it works fine in testing, when I compile the app and install it on an iPhone using TestFlight it can take anywhere from 1 minute to 15 minutes to open the website. When it does everything works fine. The app store review is rejecting it because of the delay. What can I check to identify the cause of this delay?
Use remote debugging with an iOS device (or a simulator). This will allow you to see error's log like debugging a web site.
See "Safari in iOS" in : https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html
Open the Settings app.
Tap Safari.
Scroll down and select Advanced.
Switch Web Inspector to ON.
After Web Inspector is enabled, connect your device to your desktop machine with a USB cable. The name of your device appears in the Develop menu of Safari.
Also, depending of what you want to do, I suggest you, instead of using window.open, to use the cordova-plugin-inappbrowser plugin to open link in the browser (outside the webview of Cordova/Phonegap)
I have read these article
http://moduscreate.com/enable-remote-web-inspector-in-ios-6/
http://developer.telerik.com/featured/a-concise-guide-to-remote-debugging-on-ios-android-and-windows-phone/
but i cant to able to see my app under
Develop-->Device name-->myApp.
But i could able to debug blank safari browser.Could anyone suggest how to debug the iOS app in chrome or safari? Whether i have to change any app setting like in android android-debuggable:true?
Worklight is not based on Telerik, so following their tutorials is kinda moot.
If you have an application running in a device and you would like to debug is using the Inspector tool that Apple's Safari browser provides, follow these steps:
Make sure that the application you've installed on the device was built to the device from Xcode, and is not from a production build (i.e. the App Store) - otherwise it will not be available in the Safari Inspector. Also that it is connected via USB to the Mac...
Make sure you have enable the Inspector tool. In Safari > Preferences > Advanced > tick the checkbox for "Show Develop menu in menu bar"
Now that 1 & 2 have been verified, go to Safari > Develop > your-device > your-app
I'm trying to debug my website, but Apple are douches. What do I do to enable the debug console if I don't have a Mac?
I installed Safari and the latest iTunes, but my iPhone doesn't show up in Safari developer thing.
You can try option of using Telerik AppBuilder (Windows client) as a replacement on Windows for Safari debugger on Mac when remote debugging. There's a nice blog post about the steps to do it in link below. I'd rather not repost the info as there are also screenshots and it's a lot of text. But essentially, you install app, open it, connect device via USB, then you can find it in the app and open up the developer tools/debugger for it. For non-public websites, you'll have to open up port 80 with some firewall configs documented in the post.
http://blog.falafel.com/Blogs/josh-eastburn/2014/03/04/ios-web-inspector-on-windows-with-telerik-appbuilder
The tool requires a license or you can use the trial, which becomes a basic edition afterwards. I think the basic edition will still allow you to do the debugging. I'm going to try it out myself.
You can also try these iOS apps too, you can find them in the iTunes App store. They give you a built in developer tools feature (right on iOS no remote debug) that mobile Safari doesn't offer.
MIH Tool - basic edition
https://itunes.apple.com/us/app/mihtool/id584739126?ls=1&mt=8
HTTPWatch Basic
https://itunes.apple.com/us/app/httpwatch-basic-http-sniffer/id658886056?mt=8
I gave them a try and they're at least better than the mobile Safari you get on iOS, unless one needs to target full mobile Safari compatibility. I'm guessing the pro/paid editions of those apps give you more/better features.
iOS Debugging with Safari is a featuere of the new Safari. As Safari for Windows is a outdated Version of Safari, debugging is not Implemented.
So debugging with Safari is only possible on a mac!
min requirements are: OS X 10.8 iOS 6
More Infos:
Safari Remote Debugging on Windows
Since that Question was asked i found another neat way to debug stuff on a not accessible Platform:
http://people.apache.org/~pmuellr/weinre-docs/latest/
It works like this:
You add the weinre.js to your project
You set up weinre on your main platform (pc)
Starting your project results in sending the Debug Information from your project to your Platform
It's not that easy to run and understand, but once it works its pretty nice.
Did you set up your phone to allow remote webview inspection?
http://moduscreate.com/enable-remote-web-inspector-in-ios-6/
As an alternative to Weinre, you can try Vanamco's Ghostlab as well, it supports JS console and parallel testing on multiple device.
I've been testing out Phonegap Build, using a similar workflow as outlined here:
Tutorial: Developing a PhoneGap Application
I can build, and deploy to my devices, but cannot get remote debugging to work through Safari, as described in the answer here:
Could you tell be debug process in Phonegap iOS application?
I have no problems debugging the app through the mobile browser, but the installed app itself does not show up in Safari's develop menu.
I am transferring my app to my phone through xCode, and have enabled debugging in the Phonegap build interface, but the Weinre debug service seems to be down. Ideally I'd like to get this working through Safari, could anyone share their debug workflow?
thanks
When you say "native app", you actually mean the Phonegap app deployed to your device?
Here is how I do it. It works on both iOS Simulator and actual device:
Open Settings > Safari > Advanced and make sure "Web Inspector" is enabled
Connect the device and deploy the Phonegap app using Xcode
Wait for the app to launch and navigate to Safari on my desktop, then find my device name in the develop menu
Make sure Web Inspector is enabled in Settings > Safari > Advanced > WebInspector.
I am developing a web app for iPad and testing it on Safari on Mac and Safari on iPad Simulator. Now there are some issues with CSS in iPad Simulator which work quite well in Safari on Mac.
Now my question is,
Is there a powerful debugging tool for Safari in iPad Simulator?
When running safari in an XCode device simulator, the desktop Safari (v6) Develop menu shows those devices. From there, you can fire up the developer tools (DOM browser etc.) for the mobile browser. This helped me debug an mobile safari css issue without hardware.
Note: As of iOS6 this is not the correct way of doing remote debugging, leaving this answer for historical reasons but you should look into remote inspection with Safari, here is a good article: http://jeffreysambells.com/2012/09/22/ios-safari-web-inspector
Have a look at this, (a bash script I wrote) https://gist.github.com/2241976. It will allow you to open the iPad simulator and run Webkit's remote inspector, which will look just like this.
iWebInspector is quite a powerful tool for the iOs simulator's Safari.
It uses the same inspector as Chrome and it works nicely (I've used it myself and found it really helpful).
From their website
iWebInspector is a free tool to debug, profile and inspect web
applications running on iOS Simulator (iPhone or iPad). You can check
resources, see and change HTML & CSS, use breakpoints on JavaScript
code, create charts and more just as if you were on Safari for
Desktop, Chrome or Firebug.
It works for any web in Safari -the web browser-, for a chrome-less
webapp (full-screen) and also for apps using UIWebView -including
PhoneGap applications-.