[1]移動端頁面調試之“weinre大法”

標籤：

 前言

這個也是從早讀課轉載的。如有侵權請聯絡我馬上下架。

 

本文從這開始～～

 

移動端頁面調試一般分兩步。第一步我們需要把本地（pc端）寫的頁面效果展現在移動端，一個很方便的辦法是用 fiddler 作為代理，具體可以參考 如何用 fiddler 代理調試本地手機頁面，這樣我們就能在自己的手機上看到真機效果，有時還可以用 alert 調試一些 js；當然，有時僅僅展現樣式還不夠，我們希望能像 chrome 面板或者 firebug 一樣查看元素的 css 樣式，甚至可以在控制台看到 js 的 console 輸出，UC瀏覽器開發人員版可以方便地做到這點，具體可以參考 如何使用 UC瀏覽器開發人員版進行移動端調試。

 

接下來我們來隆重介紹下相容所有瀏覽器的 "weinre大法" （html & css 調試利器，無法調試 js）

 

1、weinre 是什麼鬼

Weinre 是 Web Inspector Remote 的縮寫（遠程 web 檢查器），它的作用就是相當於 chrome 的審查元素麵板（Elements）一樣，介面和用法也基本一樣，無非不同的是：weinre 適合在移動端頁面調試，比如手機訪問頁面的時候，我們可以使用 chrome 瀏覽器查看頁面的 html 元素和 css 代碼，我們可以對此變更，然後在手機端不需要重新整理，立即可以看到效果。看到這裡您或許已經明白了，沒錯，weinre 是調試 html 和 css 的利器，對於 js 的調試卻愛莫能助了。

 

2、Node.js & weinre 安裝

當然首先得安裝 weinre。以前安裝要依靠 java 環境（jdk），很麻煩，現在有了 Node.js 一下子方便許多。我們先安裝 Node.js（參考 Node.js入門），安裝完後進入 Node.js 的安裝目錄，進行 weinre 的安裝。

weinre 安裝完後，需要在本地開啟一個監聽伺服器。我們先擷取自己的 ip（ipconfig），比如我的 ip 為 192.168.1.101（這裡要注意一點，如果 pc 端連的是區域網路的話用區域網路，如果不是則優先使用 pc 端非區域網路 ip）。我們在命令列敲下如下命令即可開啟服務：

 

 

3、訪問 weinre

服務已經開啟，我們趕緊在瀏覽器上訪問服務地址吧！

在開啟的頁面中我們找到 Target Script 模組，將中這段 js 引入到需要調試的 html 檔案中。

比如我在本地寫了如下代碼，將 js 引入後：

我們在移動端先任意找個瀏覽器開啟該頁面（fidder 代理），然後在 pc 端點擊剛才開啟頁面最上面的連結（所示）

頁面便會跳轉至調試頁面，這時就可以愉快地調試 css 了！

後語

利用這個工具，結合平時調試demo所用的工具組成一個黃金搭檔工具：charles＋browserSync＋weinre。

 

你平時都用什麼工具調試呢？

 

關於本文

@韓子遲

原文連結：http://www.cnblogs.com/zichi/p/5001767.html

 

[1]移動端頁面調試之“weinre大法”