Debug on Legacy Android with the Stock Browser (and on Other Devices)
Use Weinre to debug device-specific issues if the issue occurs on:
- the stock Android Browser
- Android devices before Android 4
- iOS (but you do not have access to a Mac)
- a Blackberry
1. Install Weinre
On your computer, open a new Terminal (Mac) or Command Prompt (Windows).
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
- To start Weinre, enter the following command on the command line:
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"> ... </script>
In your local development project directory, find the
base.dustfile in a development editor.
Paste the Weinre tag in the
scriptsblock of the file.
Remove this script after you finish debugging.
4. Open the Page for Debugging
Open the web browser on your device.
In the browser, go to the Mobify Preview at
Fill in the form fields to preview your local bundle.
Navigate to the page for debugging.
5. Inspect the Page
In your desktop browser, go to the Weinre server at http://localhost:8081/client/#anonymous.
On that page, navigate to "Access Points".
Choose "Debug Client User Interface".
Use Weinre to inspect the page on your device.Edit in GitHub