weinre 簡記

在入職不久接觸了移動端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 我值得擁有。下一次應該不會忘記還有這個工具了吧？這一次我本身總結了一下，只爲下一次再也不重複搜索方法。