Debug on Legacy Android with the Stock Browser (and on Other Devices)

Use Weinre to debug device-specific issues if the issue occurs on:

1. Install Weinre

  1. On your computer, open a new Terminal (Mac) or Command Prompt (Windows).

  2. To install Weinre, enter the following command on the command line:

npm -g install weinre

Or if you need administrative privileges, precede the command with sudo as follows:

sudo npm -g install weinre

2. Run a Local Weinre Server

weinre --httpPort 8081 --boundHost your.IP.address

Ensure that you replace the IP address for boundHost with your own IP address.

Find your IP Address To find your IP address, follow the steps in the Identify Your Computer's IP Address section in the Preview your Project on a Device tutorial.

Leave this command prompt open. It is running the server that is needed by the browser in the following tutorial steps.

3. Add the Weinre tag to the Mobile Site

The Weinre tag looks like this:

 <script src="http://your.IP.address:8081/target/target-script-min.js#anonymous">
  1. In your local development project directory, find the app/global/base.dust file.

  2. Open the base.dust file in a development editor.

  3. Paste the Weinre tag in thescripts block of the file.

Remove this script after you finish debugging.

4. Open the Page for Debugging

  1. Open the web browser on your device.

  2. In the browser, go to the Mobify Preview at

  3. Fill in the form fields to preview your local bundle.

  4. Click "Preview".

  5. Navigate to the page for debugging.

Preview Learn to Preview a Local Server on your Computer or to Preview a Local Adaptive.js Site on a Device.

5. Inspect the Page

  1. In your desktop browser, go to the Weinre server at http://localhost:8081/client/#anonymous.

  2. On that page, navigate to "Access Points".

  3. Choose "Debug Client User Interface".

  4. Click "Elements".

Use Weinre to inspect the page on your device.

Edit in GitHub