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?

7 Answers 7

19

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

1
  • Last release in GitHub of Weinre is from Oct'2014. I posted how to use Chrome's Developer Tools Window here Commented Jun 11, 2017 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

1
  • Plus one for providing steps. Commented Nov 2, 2015 at 19:19
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/

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.

1

Get Started with Remote Debugging Android Devices

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

-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.

-3

use console JavaScript API click here for more information

3
  • 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
    Commented May 22, 2013 at 5:23
  • You can also use Chrome for Android Remote Debugging check out this video
    – Haben
    Commented Nov 3, 2013 at 9: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
    Commented Nov 4, 2013 at 7:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.