Ionic project using Weinre to debug the mobile side

How to debug Ionic developed Hybridapp Web view

In a crooked People's blog, accidentally found the word weinre. And then he had an indissoluble bond with him.

What is Weinre?

Weinre is a remote Web debugger that can debug Web pages. If you have used FF's Firebug and Chrome's debugging tools it will have a familiar sense of sight. Weinre is also a part of the Codova project, so it is most appropriate to use it to debug the app Ionic developed.

How do I install weinre? Installing using the NPM command

1. This method requires you to install node first,Windows installation method is too many online, self-search, here is a I myself under the ubuntu14.04 to install node records .

2. Confirm that node is installed and NPM can use it to install weinre using NPM command:

NPM-G install [email protected]// This is the latest version of the installation, if you need to install another version of the @ symbol after the latest replaced with the corresponding version number

Installation fails if no version number is added

NPM err! Windows_NT6.1.7601NPM ERR! Argv"C:\\Program Files\\nodejs\\\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "Install" "Weinre"NPM err! Node V0.12.7NPM ERR! NPM v2.11.3NPM ERR!Code ETARGETNPM ERR! Notarget No compatible version found: [Email protected]'*'NPM ERR! Notarget ValidInstallTARGETS:NPM ERR! Notarget ["2.0.0-pre-h0wthdo5-incubating","2.0.0-pre-h1gcs73n-incubatinG","2.0.0-pre-h3fwtqkq-incubating","2.0.0-pre-h41dgw8s-incubating","2.0.0-pre-H8EOSCLN-incubating","2.0.0-pre-h9pu2wst-incubating","2.0.0-pre-ha5n9t49","2.0.0-Pre-hg9plcrf","2.0.0-pre-hh0sn197","2.0.0-pre-hyfxm3qm","2.0.0-pre-hz79pduk","2.0.0-pre-hzo3bmng","2.0.0-pre-i0z7u9ov"]NPM err!NOTARGETNPM ERR!Notarget This is the most likely not a problem with NPM itself.npm ERR!Notarget in the most cases you or one of the your dependencies is REQUESTINGNPM ERR! Notarget A package version that doesn't exist.NPM ERR! Please include the followingfileWith any support request:npm ERR! C:\Users\Administrator.ZHANGZIJUAN1\npm-debug.log

3. After the global installation can see the installation of weinre in C:\Users\Administrator\AppData\Roaming\npm\node_modules, go to the web directory to see

4. Start our debug side

8080 --boundhost-all-

More options See here http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html

5. In the browser address bar, enter http://localhost:8080/client/to open the debug side of the interface

6. The Target-script-min.js file is introduced in the target page, and the target page of the Ionic project is index.html

Because my project is not placed under the WEINRE server, I cannot use localhost when I introduce this file, but instead, I want to switch to the local IP address.

7. Re-compile the project, launch the emulator, or install it on your phone. Open this project and then view the debug side opened in step fifth

If you install this apk on multiple devices, there will be multiple links in the targets, and the green one is now available for debugging.

Switch to elements, for example, which tab the mouse pointer moves to, which you can view on your mobile device. So familiar interface, I don't need to say I think you know what to do.

Ionic project using Weinre to debug the mobile side