How to connect to iPhone's webkit debugger? - javascript

new iOS 6 feature is, that you can debug html and javascript running on device or simulator in desktop safari. I suppose, that this feature is based on Webkit Remote Debugging Protocol.
How can I connect to webkit running on iPhone without desktop Safari?
I can do this for mobile Chrome running on Android using websockets, but how can I do that for iOS devices?

The ios-webkit-debug-proxy project (from Google!) does this.

You want to look at this code https://github.com/leftlogic/remote-debug/tree/master/safari - although it fails when it actually comes to RPC calls that use __rpc_forwardSocketData.
If you've got any ideas why several of us are interested!

You need to open up the iPhone Simulator and browse to a website.
Then open Safari and choose "Develop" from the menubar. There is a the option called "iPhone Simulator".
If you hover over this you can see all of the open websites of the simulator.
This gives you the same inspector Safari uses. You can even see hovered elements in the iPhone Simulator.

Related

Investigate html/js issues on IOS devices

I'm working on a web-app, and there are several issues(HTML markup and js functionality) that are reproduced only on Ipad and iPhone. The problem is - I don't have any ios devices. How can I reproduce, and then debug (like I do in browsers web developer tools) those issues on windows 10?
If you have iMac, MacBook or any Mac OS device you can use Xcode application and run real device simulator.
If you don't have such device you can use online services like https://www.browserstack.com

Possible difference between "Safari on iPad" and "Safari on iPhone" on JavaScript

I have a project involving Google Maps API and some JavaScript codes. The page is build upon jQuery Mobile. I have the web page tested on Chrome, FireFox, Opera and IE on desktop, and on various mobile phones as well.
It doesn't work only on iPhone (4, nor 5). I mean, it's all good under Android, WP8, Chrome iPhone simulator, and even working perfectly on an iPad (Air, if matters).
It appears to be that Google Maps API is not loaded at all. It should be initialized after page load, and then show a map inside the page. But there's nothing. Also there's no alert about querying user's location, which does happen when using an iPad.
The safari on iPhone is the same version as that on my iPad, OS 7.0.4, Apple WebKit 537.51.1, Safari 9537.53. The devices are connected to the same WiFi network. Due to lack of a Mac I can't use the remote debugging function right now.
Any brief ideas about what's wrong with the application? I suspect it's inside JavaScript but I could be wrong.
Thanks.
I've found the problem and solved it.
It is because the location service is disabled for safari (by default), on iPhone. However it's enabled on my iPad (not sure if it's default) so that I get different reaction from the location service API.
I have to put an alert message for iOS users when detecting that location service is disabled. After it's enabled in the privacy settings on the device, the application works perfectly on all devices.
The patch code is here for those who need.

Log console messages of a website when opened in safari of iphone

I have a website made in Javascript and HTML5
Hardware and software that I have
iPhone 4 (iOS 7)
Windows 7
In JS I have written some console message using Google console API.
When I open the website in safari in Windows 7, I can easily see the messages in console of developer tools, but when I open the website in safari in ios 7 in iphone, I can't see them. Is there a way I can see my console messages somewhere.
If there is tool please let me know which can help?
You can achieve this debugging using Safari for OSX with a connected iPhone.
Safari for OSX has a develop menu (which you can enable by going to preferences->advanced->Show develop menu).
From this develop menu if you have an iPhone connected to your mac via USB you will see the phone listed. If safari is open on your phone, it will list "Safari" as a debugable mobile application.
From here, you can open websites on your phone and display the web inspector on safari which will display debug information of the page you loaded on your iPhone
For the web application that are made in JavaScript and HTML5, they can be debugged remotely using the tools that are available in the market/web for free, please find the list below
jsconsole
Aardwolf
Both these tools are very helpful in remotely debugging the web application running on ios or Android.

Remote debugging Chrome for iOS

I'm trying to debug an error on Chrome for iPad. How can I do that?
Additional info:
I know how to debug Safari for iOS. I just don't have a Mac at the moment.
Is it true that I need Safari on MacOS X to remote debug Chrome for iOS?
Does Desktop Chrome allow anything?
Is Chrome for iOS just a webview application?
You cannot directly remote debug Chrome on iOS currently. It uses a uiWebView that may act subtly different than Mobile Safari
You have a few options.
Option 1: Remote-debug Mobile Safari using Safari's inspector. If your issue reproduces in Mobile Safari, this is definitely the best way to go. In fact, going through the iOS simulator is even easier.
Option 2: Use Weinre for a slimmed down debugging experience. Weinre doesn't have much features but sometimes it's good enough.
Option 3: Remote debug a proper uiWebView that functions the same.
Here's the best way to do this. You'll need to install XCode.
Go to github.com/paulirish/iOS-WebView-App and "Download Zip" or clone.
Open XCode, open existing project, and choose the project you just downloaded.
Open WebViewAppDelegate.m and change the urlString to be the URL you want to test.
Run the app in the iOS Simulator.
Open Safari, Open the Develop Menu, Choose iOS Simulator and select your webview.
Safari Inspector will now be inspecting your uiWebView.
I've had some success with the iOS remote debug webkit adapter.
Install ios-webkit-debug-proxy and libimobiledevice
npm install remotedebug-ios-webkit-adapter -g
Enable remote debugging in Safari - iOS Settings => Safari preferences => enable "Web Inspector"
Make your computer trust your iOS device- starting iTunes could prompt the "Trust this computer" dialog.
remotedebug_ios_webkit_adapter --port=9000
Open tabs should show up in chrome://inspect/#devices
If you're just looking for the console logs, there's chrome://inspect, which will display console.log of other tabs in iOS Chrome.
The Firefox Tools Adaptor allows one to use Firefox DevTools to debug websites on Safari or Google Chrome for iOS or Android.
https://github.com/mozilla/valence#debugging-safari-firefox-and-other-webviews-on-ios
Is it true that I need Safari on MacOS X to remote debug Chrome for iOS?
As far as I understand, yes.
Does Desktop Chrome allow anything?
No
Is Chrome for iOS just a webview application?
Yes, the app would be rejected otherwise, this is why Mozilla originally did not build a browser for iOS.

how to emulate a mobile (android) browser on desktop

I'm trying to debug a problem that only occurs when I access a mobile website from a mobile browser. I strongly suspect that the root cause of the problem is due to caching that occurs when you access the same page several times.
I can reproduce the problem consistently when I access the page from my Android phone, but if I use a desktop browser the problem never occurs.
Because I can't use any developer tools on my Android phone, I really need to reproduce the problem from a desktop browser, so that I've some way of debugging into it. I've already tried using both Firefox and Chrome with an appropriate setting of the User-Agent header (so that the mobile version of the site is displayed), but that doesn't work.
Is there a better way to emulate the behaviour of a mobile browser from the desktop, in a manner that allows the client-side code can be debugged? FWIW, I'm fairly confident that I could also reproduce the problem on an iPhone, but don't have one available.
You can use a debugger on your phone, using chrome debugger.
Nowadays, you can just navigate to chrome://inspect/#devices after plugging your device in.
If that doesn't work, you can use the old method:
Connect your mobile device to the host using a USB cable
On the mobile device, launch Chrome. Open Settings > Advanced > Developer tools and check the Enable USB Web debugging option
Issue the following command in the console on your host machine to enable port forwarding:
adb forward tcp:9222 localabstract:chrome_devtools_remote
Open desktop Chrome and navigate to localhost:9222
Choose the page you need to debug
You can now start debugging and profiling mobile content in the Developer Tools on your desktop

Categories