How to debug CSS in Android native browser?

StackOverflow https://stackoverflow.com/questions/16678239

Question

I'm building an hybrid app with Cordova for Android. The HTML5/CSS3 is rendered properly with Chrome for desktop and Chrome for Android.

However, through Cordova, the HTML5/CSS3 is rendered with the native browser (the application named "Internet"). And it seems there are a few troubles with the CSS interpretation.

Firefox has Firebug, and Chrome has a developer panel, available on desktop for remote debugging. Do you know any similar tool I could use in order to debug the CSS efficiently the mobile native browser?

Was it helpful?

Solution

I finally found Weinre. This solution belongs to the Cordova project. http://people.apache.org/~pmuellr/weinre/docs/latest/

OTHER TIPS

I've tried weinre on Android 2.2 stock browser and it is working nicely

To set up it, 

sudo npm install -g weinre

// make it available to external (than just localhost)
weinre --boundHost -all-

// include this line (change to your IP address) to every page to be tested
<script src="http://xxx.xxx.x.xxx:8080/target/target-script-min.js#anonymous"></script>

More details from this website Remote debugging with weinre

Just to give a more recent option.

You can use BrowserSync too. Currently it has Weinre already integrated to this.

# Using a local.dev vhost
$ browser-sync start --proxy

# Using a local.dev vhost with PORT
$ browser-sync start --proxy local.dev:8001

# Using a localhost address
$ browser-sync start --proxy localhost:8001

# Using a localhost address in a sub-dir
$ browser-sync start --proxy localhost:8080/site1

http://www.browsersync.io/docs/command-line/

Firstly, I run my Android Virtual Device console with $ android avd and start my configured Android v4.4.2 Emulation only with native Browser installed.

Next, I run my Chrome v54.0 for Desktop in my laptop, open Google-Developer-Tools/Top-Right-Contextual-Menu/More-Tools/Remote-Devices...

There, I see my Virtual Device in connected state, so I can click in Inspect button of any Page of my Ionic2 App.

This action, opens a new Chrome's Developer Tools floating window where I can inspect CSS, HTML and Javascript in the same way I do in my Web applications.

Hope this can help someone.

Get Started with Remote Debugging Android Devices

https://developers.google.com/web/tools/chrome-devtools/remote-debugging

This seems to be asked elsewhere, but maybe not with as specific a question. Regardless, I have found this answer (Is there a kind of Firebug or JavaScript console debug for Android?) to be helpful, but instead of using Cordova, in combination with my comment, using Xamarin Android Player.

use console JavaScript API click here for more information

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top