Remote debugging Chrome for iOS - javascript

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.

Related

Is it possible to remote debug Chrome on iOS?

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.

chrome inspect blinking with remote debugging

I'm trying to use Chrome's support for remote debugging with my Android device. I've been successful doing this many times, even though it is a bit tricky to setup up.
(I need 'port forwarding' and 'virtual host mapping' so my device can access domain names on my local server.)
The problem is that (today) chrome://inspect shows the tabs on my device for only a second, then hides them, then shows them again, then hides them...
When Chrome hides all the tabs on my device, the following message appears:
Pending authentication: please accept debugging session on the device.
Bad Blink
Good Blink
I see no notification on my device that I can 'accept'.
Even stranger, if I am quick to click on my host, I actually seem to be able to able to use the dev tools for the device like in previous successful situations.
Why is chrome://inspect blinking and how can I fix it?
My setup
Device: Android 5.0 Galaxy S4 for AT&T, with Developer options enabled.
Device's wifi settings require Proxy, with info for Charles running on host.
Device connected via USB.
chrome://inspect has Port Forwarding enabled.
Chrome: Version 44.0.2403.157 m.
Android bridge performed by starting Android Studio (version 1.3.1).
Thanks to #SOreadytohelp for the helpful comment.
I borrowed this from the chromium bug report:
Downgrading Android SDK Platform-tools from revision 23 to revision 21 will solve the issue
Same behavior here: neither Galaxy S4 nor Galaxy S6 Edge with Lollipop were available on the chrome://inspect tab. I develop an Ionic/Cordova app and downgrade isn't an option. But if you download latest version of Chrome Canary the device is available to inspect and I can debug again.
You just have to upload your chrome for android, and it will work.
I also came across this problem, but as I updated my chrome for android, the problem got sorted out and now it is working fine.

I am not able to debug Android Native Browser using Chrome Remote Debug

I am not able to debug Android Native Browser using Chrome Remote Debug,
But i am able to debug Chrome browser(in android phone) html pages
As you can see in the doc you need to have Chrome for Android

How to connect to iPhone's webkit debugger?

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.

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