Search code examples
javascriptandroidhtmldebuggingremote-debugging

Remote Debugging On Android Browser

Sorry for the question.

I'm current creating Phaser games for mobile using web browsers.

I can remote debugging on my android device using Google Chrome Browser of my android device also similar to Mozilla Firefox Browser and check if any error in javascript/html/css using the desktop developer tools of the browser.

Here is what i follow to use remote debugging for chrome https://developer.chrome.com/devtools/docs/remote-debugging

Here for Mozilla Firefox

https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android

Already installed Android SDK

I'm currently developing on windows platform. Using XAMPP

But i want to test now my app on the native browser of android phones gives me hard time to do it. and don't have any idea on how to do it.

If anyone has done it before.. Kindly please share knowledge on how you to do it and make it easy and comfortable for yourself to remote debugging native android browser.

thanks in advance

Solution

  • Ok, this will only work if you have a local version of the website deployed... and your phone must be connected to the same network.

    For reference, I used this website: http://www.broken-links.com/2013/06/28/remote-debugging-with-weinre/

    First, you'll need to install NodeJS as weinre is a NodeJS app.

    After you install Node, you can use NPM to install weinre.

    npm install -g weinre

    Then you start weinre server on your local machine

    weinre --boundHost -all-

    Then paste the following code in your webpage that you want to debug. Change your_private_ip to the private IP of your local server. It probably starts with 192.168.x.x.

    <script src="http://your_private_ip:8080/target/target-script-min.js#anonymous"></script>

    Now on your desktop, go to http://localhost:8080/client/#anonymous to see a WebKit-style web inspector.

    You should see something like this:weinre ui

    Now you can use the other tabs like the Console to view the javascript console, or the elements to look at their styling, etc... just like on chrome or firefox.