前言css
這個也是從早讀課轉載的。若有侵權請聯繫我立刻下架。html
正文從這開始~~java
移動端頁面調試通常分兩步。第一步咱們須要把本地(pc端)寫的頁面效果展示在移動端,一個很方便的辦法是用 fiddler 做爲代理,具體能夠參考 如何用 fiddler 代理調試本地手機頁面,這樣咱們就能在本身的手機上看到真機效果,有時還能夠用 alert 調試一些 js;固然,有時僅僅展示樣式還不夠,咱們但願能像 chrome 面板或者 firebug 同樣查看元素的 css 樣式,甚至能夠在控制檯看到 js 的 console 輸出,UC瀏覽器開發者版能夠方便地作到這點,具體能夠參考 如何使用 UC瀏覽器開發者版進行移動端調試。web
接下來咱們來隆重介紹下兼容全部瀏覽器的 "weinre大法" (html & css 調試利器,沒法調試 js)chrome
一、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
服務已經開啓,咱們趕忙在瀏覽器上訪問服務地址吧!
在打開的頁面中咱們找到 Target Script 模塊,將下圖中這段 js 引入到須要調試的 html 文件中。
好比我在本地寫了以下代碼,將 js 引入後:
咱們在移動端先任意找個瀏覽器打開該頁面(fidder 代理),而後在 pc 端點擊剛纔打開頁面最上面的連接(下圖所示)
頁面便會跳轉至調試頁面,這時就能夠愉快地調試 css 了!
後語
利用這個工具,結合平時調試demo所用的工具組成一個黃金搭檔工具:charles+browserSync+weinre。
你平時都用什麼工具調試呢?
關於本文
做者:@韓子遲
原文連接:http://www.cnblogs.com/zichi/p/5001767.html