寫在前面：作為前端開發工作者，一款好的除錯工具必不可缺。你可能已經習慣了chorme提供的簡單好用的網頁除錯工具，但在weex中，除錯是一個巨坑！！

Weex除錯踩坑之旅

在weex中，除錯是一件非常麻煩但事，好在weex官方文件中提供了一些方案

1. weex-toolkit命令

在上一篇文章中介紹了weex-toolkit這一腳手架工具，現在介紹以下該腳手架提供的一些命令。

1.1 create

weex create weex-demo //建立weex專案

1.2 preview

該命令會在瀏覽器中一觀察模式開啟hello.vue編譯後生成的頁面，這意味著你此時修改程式碼能夠觸發重新編譯。

weex preview  hello.vue // 預覽.vue檔案

1.3 compile

理解不足，暫時留白

weex compile [source] [dist]  [options]

1.4 platform

理解不足，暫時留白

weex platform add ios
weex platform remove ios

1.5 run

理解不足，暫時留白

weex run ios
weex run android
weex run web

1.6 debug

該命令能夠打包指定的vue檔案，並在瀏覽器中啟動一個服務，在其中除錯js原始碼

weex debug

上述命令會去安裝weex debug的包，安裝完成會自動開啟瀏覽器
此處會踩到的坑：

• 執行weex-debug命令提示類似以下的報錯資訊：
  
  這可能是因為npm包安裝不完整
  解決方法：

npm cache clean --force

• 執行weex-debug命令會啟動下載，且下載卡住
  解決方法：
  ctrl + c 終端下載，執行上一條操作
• 執行weex-debug命令啟動下載，下載緩慢
  暫無解決方案，耐性等待吧

解決所有問題後出現以下畫面

手機下載 weex playground
點選掃碼，跳轉如下頁面

左側展示的就是當前手機weex playground應用的實時狀況了

2. 使用weex debug 除錯頁面

執行以下命令，除錯src目錄下的index.vue檔案

weex debug src/index.vue

進入該頁面，點選圖中二維碼，手機掃碼，即可在Inspector中看到預覽效果了。


此處可能會踩到的坑：

• 掃碼後手機跳轉頁面白屏
  原因：
  • 手機與電腦未連線同一wifi
  • 手機和電腦連線了非開放的wifi

踩完所有坑後，我們來認識一下工具欄上的這些功能：

1. JS Debug

開啟後可在除錯工具的source標籤下對js檔案進行除錯

2. Network

開啟後可在除錯工具對network標籤下檢視http請求

3. LogLevel

設定除錯工具console標籤下的顯示等級

• debug： log的別名
• log：顯示所有log資訊
• info：顯示info等級及以上的log資訊
• warn：顯示warn等級及以上的log資訊
• error：顯示error等級及以上的log資訊

4. ElementMode

設定除錯工具element標籤下的元素展示方式

• native：編譯後在android或ios展示的元素結構
• vdom：編譯前原始的dom結構