16

I can successfully debug the front end of a web application running on a mobile device using Google's Chrome DevTools (chrome://inspect) when my mobile device is using the Chrome's browser (using port forwarding). I was wondering whether it is possible to do the same using the Android's native browser, I mean the one browser pre-installed in Android which application launcher looks like this, just to be more clear, :-) :

enter image description here

Is there a way to do that? Cause when I open a tab with this browser inside chrome://inspect of course I don't get the opened tab and I can't inspect the content my device is viewing from the native browser.

I need in a way to do that because I have found some UI related problems (CSS, JS) specifically bound to the native browser, actually in chrome all works beautifully, but on the native browser no.

I have also tried to use weinre and found it very useful, but I can use it only in the context of a LAN, meaning that I have to bind the device with a LAN IP address and actually I need to access to the web application from http://localhost (like it is done in Chrome DevTools with port forwarding) because I use server-side software which strictly relies only on localhost (it is not mine, I wouldn't do that if I could).

So, is there a way to accomplish this on the Android default native browser? Using weinre and/or Chrome DevTools?

Thanks for the attention!

P.S.: I know Android browser is not native anymore from Android 4.4, anyway, I would need that for compatibility, if of course, it is possible (it should be, I guess).

tonix
  • 5,862
  • 10
  • 61
  • 119
  • 1
    Against what version are you trying to debug this? – Chris Stratton Apr 23 '15 at 15:38
  • Do you mean which android version I use? My Android version is 4.1.2, it's a bit old, but I have to admit that I have rooted the device and it doesn't update anymore, I would like to update it but when I try it it says that the updating cannot be done. The browser is the one which was pre-bundled with that version. BTW since we are on the subject, is there a way to update a rooted Android? – tonix Apr 23 '15 at 19:37
  • Irrespective of rooting, you could only install an official update if one exists. Given the relatively dated version you are on, chances are most likely that it is no longer being supported. You could try an unofficial build of a newer version though. – Chris Stratton Apr 23 '15 at 19:40
  • 1
    At any rate, I don't believe the native webview utilized in 4.1.2 is compatible with Chrome remote debugging - rather that seems to have been introduced with Chromium-based webviews in 4.4. If the issue you want to debug is unique to older version, I don't think that path will work for you. If it is shared on newer webview versions, you can try an emulator, especially an x86 image able to use VM acceleration features. – Chris Stratton Apr 23 '15 at 19:41
  • Thanks for the advice, no I guess the issue is related to the older version only, I don't know how it is on 4.4 as the only (physical) device I have is the one with version 4.1.2. I can go with a Virtual machine though. You are saying that even rooted devices are updatable, aren't you? It is strange that mine didn't though, it often tries to update itself and then I see a message like "Software update - was not successful". I guess that 4.1.2 is not supported anymore as you said. And what about unofficial builds? Are they reliable? Will an update keep all my apps and data? – tonix Apr 23 '15 at 20:32

3 Answers3

3

about:debug works for JavaScript console at least. Helped me to see why it is broken on those native, WebView based and limited browsers.

stamster
  • 747
  • 8
  • 18
0

You can use chrome://inspect as well for this just make sure your native browser is running as you can't launch it like you can chrome from that page.

Also if it's not showing on the list using adb to list the devices will usually fix this. 

adb devices

For a complete instruction you should look at the android documentation about this topic https://developer.chrome.com/devtools/docs/remote-debugging

Delconis
  • 265
  • 2
  • 9
  • 1
    I suspect this is only going to work from 4.4 onwards. – Chris Stratton Apr 23 '15 at 15:37
  • Thanks for the link, I have already taken a look to it before, anyway – tonix Apr 24 '15 at 06:03
  • I did have dev tools working on my LGG3 5.0.1. But then on the week of 4-5-2015 I updated the browser component and now all I see when using dev tools is a blank inspector window. I know that doesn't help much but I have had dev tools working on android 4.4+ with no change to setup. – Delconis Apr 24 '15 at 20:50
  • 1
    Does this really answer the question? The person asking it was referring to the default (or stock) Android browser that comes on all Android phones. It appears to me that the link you provided describes how to debug when you're using the Chrome browser for Android, not the default browser. – Jim Oct 04 '17 at 22:27
0

You can use the Chrome developer tools to debug a mobile website running in the stock Android browser, in a similar way that you can do debugging when the website's running on Chrome for Android:

If you haven't already done this, follow all steps in the accepted answer here, to enable debugging using the Chrome dev tools (on your desktop computer):

Chrome DevTools Devices does not detect device when plugged in

  • Now, with your device connected to your computer, open your web page in the stock Android browser. Go to the Chrome dev tools, where you should see your device connected, and you should see something like this (with the usual 'inspect' button off to the right hand side). Click the 'inspect' button and you're in - you can debug the stock Android browser using the Chrome dev tools!

enter image description here

Chris Halcrow
  • 21,541
  • 11
  • 115
  • 145
  • On 4.1 emulator it shows "No browsers detected" although the device is visible in the Devices list. – JustAMartin Dec 05 '17 at 15:51
  • I'm not sure exactly what you mean. Can you raise a question for this including a screenshot and post a link to the question here as a comment? Did you click the device from the devices list? – Chris Halcrow Dec 06 '17 at 00:38
  • Yes, I clicked it, and browser on the emulator is running, a website is loaded there. Here's what Chrome shows: https://i.imgur.com/UJHCJjt.png Maybe Android 4.1 emulator (API level 16) is indeed too old for Chrome remote debugger. – JustAMartin Dec 06 '17 at 08:30
  • I'm still not completely sure what you're trying to do. Are you somehow running the SDK emulator rather than a physical device through Chrome? It sounds like you may be trying to debug a native app through the web browser, which won't work. This question is about debugging a website via the native browser, and isn't related to native Android apps. – Chris Halcrow Dec 06 '17 at 21:27
  • No, I have launched Android emulator and opened my website in Android Browser. Then I launch Chrome on my desktop machine and I see the emulator device there, but when I click on it, it does not show the browser, just that "No browsers" message. But I already solved the issue - I installed Chrome on the emulator, and now my computer Chrome sees Chrome on the emulator. This confirms my suspicions that Chrome remote web debugging does not work with old Android Browser, which was default browser on Android 4.1 and older devices. – JustAMartin Dec 07 '17 at 09:01
  • By Android Browser I mean the one that's the last blue circle icon: https://i.imgur.com/ZRB4OtQ.png , older emulators don't have Chrome at all. – JustAMartin Dec 07 '17 at 09:12
  • Run the website on a real device instead of an emulator and connect it to your desktop computer via USB, then connect to the device using the Chrome dev tools and see if it recognises the older Android Browser. That should confirm for sure whether Chrome debugging supports your Android browser version. I'm not sure whether the emulator will be as reliable as debugging a real device. – Chris Halcrow Dec 08 '17 at 05:26
  • 1
    The problem is that I myself don't have a real device with the older Android Browser. That's the usual reason for using emulator - to test the site on different browsers. Oh, well, I guess I'll have to use weinre library to debug the website on old mobile browsers. Also, some manufacturers used to create their own versions of mobile browsers based on Android Browser thus you never know what you get when launching default browser on any Android device... – JustAMartin Dec 08 '17 at 08:45
  • It works as expected :) tested on android default browser – Abdellah Alaoui Jan 29 '18 at 22:36