遠程調試工具weinre使用教程

一：前言

咱們都知道，chrome的開發者工具（f12）是一個方便咱們調試PC頁面的工具。可是如今咱們的開發離不開移動端，那若是咱們須要對手機頁面進行調試，那該怎麼辦了？

固然，chrome的開發者工具仍是強大的，咱們能夠再開發者工具中開啓device mode來模擬手機調試。具體步驟爲：

1. 點擊這個圖標 就能夠進入device模式了。

 

2. 而後咱們的界面就變成下面這個樣子，經過改變箭頭所指的下拉框，就能夠模擬不一樣的移動設備了。：

這個功能確實是很方便咱們調試手機頁面，但有一個嚴重的問題，那就是它畢竟是模擬啊，那咱們有沒有辦法直接在手機上調試了？接下來所講的weinre就是一款這樣的調試工具。

 

一：關於weinre

weinre就是一款依賴於nodejs的遠程調試工具

 

二：weinre的安裝

步驟一：安裝nodejs以及npm（由於weinre是運行在nodejs上的，這一步就不展開了，安裝nodejs也是很容易的）

步驟二：npm -g install weinre安裝weinre

 

三：weinre的使用例子

步驟一：打開命令行，輸入：weinre --boundHost [IP_address] --httpPort [port] (IP_address 是pc的ip地址, 不能是127.0.0.1，port能夠輸入一個隨便的端口)

假設個人pc的ip地址爲192.168.1.131，而後我就能夠輸入這樣的命令：weinre --boundHost 192.168.1.131 --httpPort 1234

步驟二：在瀏覽器上打開網址192.168.1.131:1234，而後咱們就能夠看到如下界面：

步驟三：咱們就按照上面的紅色箭頭所說的作，先複製一段script到咱們所要調試的界面

步驟四：咱們就能夠點擊上面那個鏈接，而後進入調試界面了。調試界面是下面這個樣子的：

 

步驟五：利用手機打開所要調試的頁面（也就是剛纔添加了script的那個頁面，注意要在pc上開啓服務器，而後手機經過輸入對應地址來訪問頁面）

步驟六：點擊調試頁面裏對應的Targets，而後點擊Elements工具，就能夠進行調試了。

---

調試展現：

點擊了<p>標籤對應的這一行以後，右邊就好像使用chrome開發者工具同樣，顯示出這個dom結點對應的css了

把鼠標移動到html對應的那一行時，手機上顯示的效果：

 

把鼠標移動到p對應的那一行時，手機上顯示的效果：