ionic項目使用weinre調試移動端

怎樣調試ionic開發的hybridApp web view

在一篇歪國人的博文中，偶然發現weinre這個詞。而後就與他結下了不解之緣。

weinre是什麼

weinre是遠程web調試器，能夠調試web頁面。若是你用過FF的FireBug和chrome的調試工具對它那會有熟悉的即視感。weinre也是Codova項目的一份子，因此用它來調試ionic開發的app最合適不過了。

如何安裝weinre？

使用npm命令安裝

1.這種方法須要你先安裝好node，Windows的安裝方法網上太多，自行查找，這裏有一篇我本身在ubuntu14.04下安裝node的記錄。

2.確認node已安裝，npm能使用以後，就可用使用npm命令安裝weinre：

npm -g install weinre@latest//這是安裝最新版，若是須要安裝其餘版本將@符號後的latest替換成相應版本號便可

若是不加版本號會安裝失敗

npm ERR! Windows_NT 6.1.7601
npm 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.7
npm ERR! npm  v2.11.3
npm ERR! code ETARGET

npm ERR! notarget No compatible version found: weinre@'*'
npm ERR! notarget Valid install targets:
npm ERR! notarget ["2.0.0-pre-H0WTHDO5-incubating","2.0.0-pre-H1GCS73N-incubatin
g","2.0.0-pre-H3FWTQKQ-incubating","2.0.0-pre-H41DGW8S-incubating","2.0.0-pre-H8
EOSCLN-incubating","2.0.0-pre-H9PU2WST-incubating","2.0.0-pre-HA5N9T49","2.0.0-p
re-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! notarget
npm ERR! notarget This is most likely not a problem with npm itself.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\Administrator.ZHANGZIJUAN1\npm-debug.log

3.全局安裝好以後能夠在C:\Users\Administrator\AppData\Roaming\npm\node_modules看到安裝的weinre，進入到web目錄查看一下

 

4.啓動咱們的調試端

weinre --httpPort 8080 --boundHost -all-

更多選項看這裏http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html

 

5.在瀏覽器地址欄中輸入http://localhost:8080/client/ 打開調試端的界面

6.在目標頁面中引入target-script-min.js文件，ionic項目的目標頁面就是index.html

由於個人這個項目沒有放在weinre服務器下，因此在引入這個文件的時候就不能使用localhost，而要改用本機的ip地址

 

7.再從新編譯這個項目，啓動模擬器，或者在你手機上安裝也行。打開這個項目以後再查看在第五步打開的調試端

若是你在多個設備上安裝了這個apk，那麼targets這裏就會出現多個連接，綠色的就是如今能夠調試的

 

切換到Elements，以下圖，鼠標指針移動到哪一個標籤上面，在移動設備中就能夠查看到。如此熟悉的界面，下面不用我說我想你也知道應該怎麼作了吧