Remote console.log() on iOS devices - debugging

I am developing a web app that involves touchEvent. It will be much more easier to debug those if I can view the console remotely on my Mac.
Can I make my Mobile Safari on the iOS device store the console log somewhere in the system. I have already jailbreak my iPad.
Thanks!

plug iphone into computer
settings > safari > advanced > web inspector (turn on)
open safari on your computer
run your web app on your iphone in the safari browser
on your computer in safari, go to Develop -> "name of your iphone" and then find the correct tab under "Safari" opens Web Inspector.
doing these steps enables the safari debug tools on your desktop to reflect and respond to the connected iphone.
hope that helps.

Just turn on the debugging console in Mobile Safari. This is enabled in Settings/Safari/Developer.

One File Remote Console.log for node.js
Solution: Server side console log.

In iOS6, you can now use the Remote Web Inspector on OSX to connector to the iPhone via USB. See the Apple documentation for more information.

You can use a remote javascript console. There a few available.
weinre
spotneedle
jsconsole

Not sure if I'm allowed to re-post my answer from another question, but at this link here I posted 3 options of JS console and logging tools that can assist with troubleshooting issues on iOS devices, with screenshots and sample code snippets. One of these is an open source tool I built myself, but the other two are probably even more advanced.

mobile-console-log is also a utility for debugging directly from your mobile into Chrome Devtools

Related

How to debug ionic 2 native

What is the best way to debug ionic 2 native features like the camera?
My app keeps crashing after i give permission to use the camera on my android device. Google chrome dev tools won't work in my case.
All help is appreciated!
The disadvantages of Ionic framework is hard to debug when call native plugin.
I have suggestion. Should you put breakpoint 'debugger' or "console.log()" before and after your function call Camera ?. And open chrome with url : 'chrome://inspect/#devices' to check what's happen ?
cheer!
Chrome did leave me with an error:
file:///storage/emulated/0/Android/data/io.ionic.starter/cache/.Pic.jpg exposed beyond app through ClipData.Item.getUri()
I do want to know how to fix this but i will start a diffrend question
I think that you could use chrome for debugging , steps you will follow :
connect your pc with your android or IOS device
open chrome and right click , then choose inspect
from the top bar choose more tools then choose remote devices
then click on your connected device in devices settings
write the command ionic cordova run android --device in your terminal to run your app.
click inspect your device on chrome

Debugging network requests with iOS Simulator, network request data is not showing

I am trying to debug the network requests for a hybrid/webview cordova based application in the ios simulator, actually see the network requests in the Safari Web Inspector. I am trying to use the Web Inspector within Safari to monitor the network requests to the server but all I see is the "timeline" graph, I don't see the actual URI requests. Is there a way to enable this?
I build my application through xcode. Launch the iOS simulator with iPad2 selected/iOS 8.1. I then launch Safari and select the "ios simulator/index.html" to launch the web inspector. And then click on network requests. The resources tab pane is empty when I make web request calls. Is there a way to fix this so I can see the url requests?
Xcode: 6.1.1
Safari: 7.1.3
OSX: 10.9.5
I'm not quite sure if it's even possible to do that via web inspector or not but put option 1 just in case. I highly recommend you to go with Option 2 tho.
Option 1
First make sure you don't have anything filtered, then make sure recording is on as shown in picture.
Option 2. RECOMMNDED
Use an http monitoring tool. They are design to do that specific task plus you get many more options such as breakpoints, etc.
Charles Proxy. (MAC) The best IMHO. You can set breakpoints and alter request/response if needed. And many other features.
HttpScoop (MAC) Easier to use, but less functionality.
fiddler (WINDOWS) Just in case.
PS. Some one might say Wireshark, I know but it's too complicated for such work.
[UPDATE 1]
To make it clear you don't need to set any proxy on iOS simulator to get these tools working. In case of SSL connections you want to use charles and follow their SSL guideline.
I use Proxyman to monitor network traffic from the iOS simulator for the following reasons -
It has a clear set of instructions on how to set it up with both iOS
simulators and Android emulators.
It has a simple, intuitive UI, which makes it easy to work with.
Also, you might find it worthwhile going through this stackoverflow post.

Debugging tools/methods for phonegap blackberry app

Are there any tools/methods for debugging phonegap Blackberry(5,6,7) app . Presently am using Alert for debugging which is very tedious .
Since you are using PhoneGap, its always better to view/debug you app on a webkit browser like Chrome/Safari. Also try Ripple emulator from BlackBerry which is the best web emulator for mobile devices: https://chrome.google.com/webstore/detail/ripple-emulator-beta/geelfhphabnejjhdalkjhgipohgpdnoc?hl=en
Since you are developing a web app, and as far as I know there's no "official" IDE for BlackBerry Webworks, this question is not BB or Phonegap specific. You are just asking how to debug JavaScript. There are a lot of questions in SO about this, just run a search. I'll give you my two cents:
As the JavaScript code runs in a browser, you need to debug in the browser. Most browsers have built-in debugger or extensions. For Firefox I'd reccomend Firebug extension, in Chrome the built-in debugger is pretty good. I can't tell about IE but I think there's something similar.
If you need to debug on device, then use console instead of alert.
Finally, have a look at WebStorm. Probably the best IDE for JavaScript right now, but you need to purchase a license. It allows you to attach to the browser debugger and debug in the IDE.

Debugger for HTML/CSS/JS in Android/IOS device browser

I have developed Lots of websites, where i use Developer tools on IE / firebug on Firefox & Chrome is also having inspect element function for Editing & Debugging. But When i started developing for Android/IOS browser i am not getting how to edit & debug.
Is there any way to do this coz, its eating lots of my effort.
weinre is exactely what you are looking for!
import the library into your index.html and make it point to your local weinre server or here and you'll have your device console into chrome.
pretty straight forward
You probably should use a remote debugger such as Pony or using Firefox.
You can also do this with Safari on IOS.

Network panel not working in weinre

I wanted to write an AJAX based hybrid Android application.
I tried to get my head around weinre but I can't get the network panel to appear. It does not show regular network interactions and for any XHR interaction it states "status pending" and "type pending".
Has anybody else faced this problem?.
This link did/did not solve the problem: https://issues.apache.org/jira/browse/CB-5424
Weinre is pretty limited, and nowadays better solutions exist to inspect your Hybrid app:
On Android 4.4 and above (or lower Android if you're using CrossWalk), you can use Chrome https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging Just point to chrome://inspect/#devices and you should see your device and hybrid apps and browsers. You may need to first run adb start-server for Chrome to see your device
On iOS, you can use Safari (on a Mac): you need to enable Web Inspector on Safari on iOS, and use the Developper mode of Safari on the Mac. See eg http://developer.telerik.com/featured/a-concise-guide-to-remote-debugging-on-ios-android-and-windows-phone/

Resources