Debugging website on iOS chrome - debugging

Ive got a bug that only shows up in mobile chrome browser on my iphone - iOS8. Whats odd is that the same bug doesn't show up in iOS8 safari on the same phone.
I want to debug the issue in the chrome browser but can only find info on debugging safari, is there a way to debug ios Chrome ?

To debug Chrome on iOS I use weinre and ngrok
Weinre will give you a local debugger on a local port
https://people.apache.org/~pmuellr/weinre/docs/latest/
ngrok creates a proxy to a port on you comp (point to weinre)
https://ngrok.com/
then change the weinre tag to the ngrok generated one and you will get logs and the DOM while debugging remotely

You could try to install 'Responsive Web Design Tester' extension in a Chrome browser in PC and test with the same iPhone model you have.
https://chrome.google.com/webstore/detail/responsive-web-design-tes/objclahbaimlfnbjdeobicmmlnbhamkg?hl=en

Related

How to debug PS4 internet browser

We noticed our site is not rendered as expected on PS4 browser, is there a way to debug it or get a console?
I know that the PS4 browser is WebKit based so I wonder is there similar debug tools like chrome or safari have?
So, I suggest you use a remote console for debugging:
https://jsconsole.com/# - this is a solution for browsers that do not have a debug panel. It can display console.log() and JS errors.
Sounds tricky but how about using a PS4 UserAgent in Chrome/Firefox?
Have You tried Ripple Emulator ?
https://chrome.google.com/webstore/detail/ripple-emulator-beta/geelfhphabnejjhdalkjhgipohgpdnoc?hl=en
Ripple is a multi-platform mobile environment emulator that is custom-tailored to mobile HTML5 application development and testing.

PhoneGap library that helps with debugging AJAX requests

I have a simple PhoneGap project that makes a cross-domain AJAX request, but when the app runs on the device nothing happens.
Locally testing the app in Chrome it works fine.
I've tried the PhoneGap remote debugger, but it's very slow.
Is there a JavaScript library that I can include with my project that will assist me in debugging my app while it's on the device?
I'd try running it in the Chrome browser on an android device and use remote web inspector or checkout this post about how to use remote web inspector on iOS actually right in PhoneGap

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/

Remote console.log() on iOS devices

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

Resources