一：前言
我們都知道，chrome的開發者工具（f12）是一個方便我們調試PC頁面的工具。但是現在我們的開發離不開移動端，那如果我們需要對手機頁面進行調試，那該怎么辦了？
當然，chrome的開發者工具還是強大的，我們可以再開發者工具中開啟device mode來模擬手機調試。具體步驟為：
1. 點擊這個圖標
就可以進入device模式了。
就可以進入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對應的那一行時，手機上顯示的效果：
