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.
Related
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
I am creating a purely browser based app - HTML and JavaScript.
I do not have an Android IDE installed (nor one for iOS) - and would prefer not to have to install one and perform remote debugging.
Developing on my PC, I use the Chrome browser and the developer tools to view the JavaScript console in order to debug.
How can I do that on an Android tablet (or, later, iOS)? I prefer a purely browser based solution, but could accept an Android/iOS based app.
Try https://github.com/liriliri/eruda
All you need to do is add this snippet on top of the page:
<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>
And you get an interactive set of developer tools similar to those in Chrome and Firefox. Here's a screenshot:
Just released for iOS, Chrome 73 now supports the option to see console.log.
If you’re a website developer, you can now view JavaScript console
messages. Navigate to chrome://inspect to enable, then perform desired
actions in another tab. Switch back to the same chrome://inspect tab
to view any printed JavaScript console logs.
see here in "What's New" section or in "version history" 73.x version.
For Android you can use remote debugging through chrome as described here
I'll summarize/rewrite the steps (for browser based debugging) here in case the link ever goes down.
Requirements:
For browser tabs: Android 4.0+ and Chrome for Android
A USB cable to plug in your Android device
Chrome 32 or later installed on your development machine
Set up:
Enable USB debugging on your device.
Navigate to chrome://inspect/#devices on your desktop Chrome browser. (Alternatively, to get to the same screen, you can select Chrome menu > Tools > Inspect Devices)
After connecting, you may see an alert on the device requesting permission for USB debugging from your computer. Tap OK
Chrome should now display the connected device
Open up chrome on your Android device and navigate to the page you want to debug/inspect. The page should show up on your desktop browser and you should be able to inspect it.
If for some reason you have an older version of chrome and cannot upgrade. There is a plugin that you can install to accomplish the same thing.
I was searching for a while for something like this. Firebug Lite used to be an option but has been abandoned. Before discovering eruda (as mentioned elsewhere in this thread), I developed my own open source console. It's pretty light on features, but it does the main things - capture JS errors, and allow you to run commands to inspect variables and object on your page.
Here's a demo:
It's activated by just placing this script tag on your page:
<script src="https://cdn.jsdelivr.net/gh/SimonEast/MiniConsoleJS#main/console.js"></script>
Open source, GPL licence. Available at: https://github.com/SimonEast/MiniConsoleJS/
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.
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
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.