25

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?

Yako
  • 3,405
  • 9
  • 41
  • 71

7 Answers7

19

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

Yako
  • 3,405
  • 9
  • 41
  • 71
  • Last release in GitHub of Weinre is **from Oct'2014**. I posted how to use **Chrome's Developer Tools Window** [here](https://stackoverflow.com/questions/16678239/how-to-debug-css-in-android-native-browser/40569745#40569745) – JavierFuentes Jun 11 '17 at 12:00
13

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

ken
  • 13,869
  • 6
  • 42
  • 36
3

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/

Thiago C. S Ventura
  • 2,448
  • 1
  • 29
  • 43
1

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.

JavierFuentes
  • 1,840
  • 18
  • 13
0

Get Started with Remote Debugging Android Devices

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

Lahcen
  • 1,231
  • 11
  • 15
-1

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.

Mike Kormendy
  • 3,389
  • 2
  • 24
  • 21
-3

use console JavaScript API click here for more information

Haben
  • 95
  • 5
  • 4
    This ressource deals with JS console. I would be mostly interested by the CSS status: which styles are applied to specific DOM elements... – Yako May 22 '13 at 05:23
  • You can also use Chrome for Android Remote Debugging [check out this video](http://www.youtube.com/watch?v=n_7Wyj6DciY) – Haben Nov 03 '13 at 09:37
  • 10
    I'm afraid this is working with Chrome, and not the native browser. This solution was also quoted in the original question. – Yako Nov 04 '13 at 07:47