移動端頁面(css)調試之「weinre大法」

移動端頁面調試通常分兩步。第一步咱們須要把本地（pc端）寫的頁面效果展示在移動端，一個很方便的辦法是用 fiddler 做爲代理，具體能夠參考 如何用 fiddler 代理調試本地手機頁面，這樣咱們就能在本身的手機上看到真機效果，有時還能夠用 alert 調試一些 js；固然，有時僅僅展示樣式還不夠，咱們但願能像 chrome 面板或者 firebug 同樣查看元素的 css 樣式，甚至能夠在控制檯看到 js 的 console 輸出，UC瀏覽器開發者版能夠方便地作到這點，具體能夠參考 如何使用 UC瀏覽器開發者版 進行移動端調試。

接下來咱們來隆重介紹下兼容全部瀏覽器的 "weinre大法" （html & css 調試利器，沒法調試 js）

一、weinre 是什麼鬼

---

Weinre 是 Web Inspector Remote 的縮寫（遠程 web 檢查器），它的做用就是至關於 chrome 的審查元素面板（Elements）同樣，界面和用法也基本同樣，無非不一樣的是：weinre 適合在移動端頁面調試，好比手機訪問頁面的時候，咱們能夠使用 chrome 瀏覽器查看頁面的 html 元素和 css 代碼，咱們能夠對此進行更改，而後在手機端不須要刷新，當即能夠看到效果。看到這裏您或許已經明白了，沒錯，weinre 是調試 html 和 css 的利器，對於 js 的調試卻心有餘而力不足了。

二、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）。咱們在命令行敲下以下命令便可開啓服務：

weinre -boundHost 192.168.1.101

三、訪問 weinre

---

服務已經開啓，咱們趕忙在瀏覽器上訪問服務地址吧！

在打開的頁面中咱們找到 Target Script 模塊，將下圖中這段 js 引入到須要調試的 html 文件中。

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

<style>
  div {
    width: 100px;
    height: 100px;
    background-color: blue;
  }
</style>
<div></div>
<script src="http://192.168.1.101:8080/target/target-script-min.js#anonymous"></script>

咱們在移動端先任意找個瀏覽器打開該頁面（fidder 代理），而後在 pc 端點擊剛纔打開頁面最上面的連接（下圖所示）

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

---

read more：各類 真機遠程調試 方法 彙總