在入職不久接觸了移動端WEB開發，剛開始遇到的問題就是調試的問題。在PC端的時候，我常常糾結在IE與IE之間，主要的兼容問題還是IE一家子和他們的親戚（啥多核瀏覽器，也是各種坑不斷）之間。IE雖然問題多，但至少它還有一個可視化的調試工具，可以在瀏覽器中調試調試。面對移動端WEB的兼容問題，各種國產機修改過內核的瀏覽器，他們又要怎麼調試？這一直是個問題，後面接觸到了一些方案，其中也包含 weinre 。
長時間沒有使用，即使學會的知識也會遺忘，今天我又因爲年中接到的活而把 weinre 派上了用場。電腦端也是新裝過幾次的環境，於是還得重新走這個流程。
發現方法
最近一直活躍在 segmentfault ，對於時間的掌控還是不是那麼均衡，不能把工作以及業餘工作和 segmentfault 很好的區分，也就造成了相當大一部分時間的浪費。
下午之前接到的活又來問題了，某個頁面的一個塊怎麼偏離了正常位置，在chrome中模擬是沒有任何問題的，沒想到的是在實測手機瀏覽器中會出現問題，如何調試呢？由於忘記了之前學會的方法，最好的方式莫過於搜索一下，搜索結果中發現了 weinre 於是想起了 browser-sync ，但實際不需要，就只是搜索學習了一下 weinre。
weinre 全稱是 Web Inspector Remote，就是用來調試手機端網頁的。在這之前只是使用它調試過本地web靜態頁面，今天需要調試的是CMS中的模板頁面，也就不必在乎是什麼瀏覽器中的網頁了，在公司時調試的是上線的頁面，在回來的路上在想是不是可以直接調試微信內置瀏覽器中的兼容問題，試想應該都是可行的。
安裝Weinre
電腦安裝的有 node ，於是可以直接使用 npm 命令安裝即可
npm i weinre -g怎麼使用
拿到一個工具不知所措的時候，都可以直接 --help 或者 -h 。你想知道的它都能告訴你。
weinre --help
運行weinre，默認設置什麼也不修改，先測試一下本地的正在做的一個Demo
weinre![]()
默認localhost:8080，瀏覽器打開 http://localhost:8080 可以參考文檔介紹說明
編輯正在做的demo
按照上一步的說明，在文檔中添加這一句到Demo中
<script src="http://localhost:8080/target/target-script-min.js#anonymous"></script>開啓Debug，運行Demo
打開debug工具頁面： http://localhost:8080/client/#anonymous
打開Demo地址：http://localhost:8088 （這個是用 webpack-dev-server 開的一個開發服務）Debug頁就可以開啓調試模式了
![]()
PC上使用這個工具沒有必要，因爲你可以直接用 chrome 的 dev tool 啊。所以還是繼續模擬真機
Mobile真機調試
手機上要怎麼訪問PC上的 http://localhost:8088 呢？公網訪問一樣的道理，通過IP，本機IP是 192.168.95.1，於是重新設置一下webpack-dev-server 的host。相應的 weinre 也綁定host到 192.168.95.1。不能忘記的是修改頁面內的包含 script 。
<script src="http://192.168.95.1:8080/target/target-script-min.js#anonymous"></script>打開debug工具頁面： http://192.168.95.1:8080/client/#anonymous
打開Demo地址：http://192.168.95.1:8088 （這個是用 webpack-dev-server 開的一個開發服務）![]()
Mobile與PC在同一網絡環境下
調試在線網站與微信內置瀏覽器打開的網頁
同真機調試一樣的道理，在同一網絡環境下，在需要調試的頁面內加入 weinre 的 script 監測腳本。借用今天 segmentfault 上的一道關於微信獲取地址數據的題目來調試一下是否正常獲取數據。參照真機調試中的配置。
微信內置瀏覽器訪問我的一個測試頁面
http://unofficial.cn/demo.php![]()
準備來使用吧
再也不用擔心mobile沒有dev tool了，weinre 我值得擁有。下一次應該不會忘記還有這個工具了吧？這一次我自己總結了一下，只爲下一次不再重複搜索方法。