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.
Related
I am able to successfully debug Safari on iOS 8.4 using Google's ios-webkit-debug-proxy. But it never sees my Chrome tabs on the iPad. I've also tried using the desktop Chrome browser at chrome://inspect but that also doesn't show it.
Is it possible to remote debug Chrome on iOS? Or is this not possible?
I use Vorlon. http://vorlonjs.com/ It is a free open source project from MS and uses websockets to connect to the remote device. Not as good as full chrome dev tools but you can inspect/edit the dom, view console logs etc.
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.
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.
I am looking for tools that allow to perform profiling of websites on mobile devices similar to what Firebug and Chrome dev tools allow to do.
I have used Weinre quite extensive. While it is an awesome tool to use with real devices, it does not provide facilities for run-time profiling.
Has anyone heard or used any tools that allow to do so?
Here is a great list of mobile performance testing tools from Steve Sauders (the guy that wrote the book "High Performance Web Sites"):
Mobile Perf bookmarklet - An uber bookmarklet with links to multiple other bookmarklets useful for mobile (mine)
Jdrop - JSON in the cloud for gathering data on mobile devices (mine)
Mobitest - Connects WebPagetest.org to Android and iPhone devices (Blaze.io)
pcapperf - Get HTTP waterfall charts from your mobile device connected to a wifi hotspot, blog post (open source)
WebWait - The only way I can think of to measure page load times on real devices over 3G - load URL in an iframe (Michael Mahemoff)
weinre - Web Inspector Remote, very cool way to debug your mobile device remotely (Patrick Mueller)
Reflow Timer - Bookmarklet to measure reflow time (Lindsey Simon, open source)
Favelet Suite - An uber bookmarklet, tons of features! (slayeroffice)
Source: http://stevesouders.com/mobileperf/
UPDATE:
You can use Chrome Devtools with an Android device and you can use Safari Devtools on a Mac with an iOS device.
Chrome: https://developer.chrome.com/devtools/docs/remote-debugging
Safari: https://blog.idrsolutions.com/2015/02/remote-debugging-ios-safari-on-os-x-windows-and-linux/
You connect via USB
You can profile/debug/inspect Chrome-on-Android using the desktop Chrome developer tools interface:
https://developers.google.com/chrome/mobile/docs/debugging
It'll require Chrome, an Android device able to run the Chrome app, and a USB cable.
Its a bit annoying to setup, because you have to install and use the ADB console command, but once its working, you'll have the full chrome developer tools interface available for debugging mobile.
Additionally, Google appears to be supporting this feature for new dev-tool Crhome extensions like PageSpeed.
For iOS debugging on Mac, you can use desktop Safari:
connect your device with a USB cable
start the app on the device
launch Safari on your computer
go to Develop -> device_name -> file_name.html
(if the Develop menu is not available for you, then go to Edit menu > Preferences... > Advanced tab and check Show Develop menu in menu bar checkbox)
It launches standard Safari web inspector, which is pretty similar to Chrome Developer Tools, although somewhat limited compared to it.
I'm developing a JavaScript application that needs to run on the Google Android Phone OS. Is there a way to enable the JavaScript Error/Debug console within Safari on either the Android Emulator or an actual device? If so any instructions on how to do so would be appreciated.
It looks like, with the Android 2.0.1 SDK you'll need to filter on "browser" instead of "WebCore"
A quick Google turns up this blog post (posted after you asked your question), that should at least let you see any Javascript errors via the Android Debug Bridge using the command:
adb logcat WebCore:V *:S
Not quite the same as a full debug console though.
On Android write about:debug on the address line when the current page is the page you want to debug. you will get access to the console.
I know your question is about Safari, but you might want to look into using Chrome instead. You can now use Chrome's desktop developer tools to debug and profile apps on your Android device.
Here's how:
On Android Chrome, go to settings -> Developer tools and check "Enable USB Web debugging"
On the desktop, run adb forward tcp:9222 localabstract:chrome_devtools_remote
Now on Desktop Chrome, navigate to localhost:9222.
You should see a list of the pages you have open on your phone. Click the one you want to debug/profile.
Detailed instructions are here
I have discovered that you can get this debugging information on the phone itself, without needingn to use adb or plug it into a computer, just download a log viewer.
Check the link for more info.
You can view the log and much more with weinre
From the Weinre docs
weinre is a debugger for web pages, like FireBug (for FireFox) and Web Inspector (for WebKit-based browsers), except it's designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone.