如何使用 Devtools 調試 Weex 頁面
Weex Devtools 是為 Weex 開發者服務的一款調試工具，能夠審查 Weex app 運行時屬性，可對 .we 代碼及 JavaScript 代碼斷點調試，支持 iOS 和 Android 兩個平台。
Weex Devtools 基於 Chrome devtools 實現了 Chrome Debugging Protocol，能夠使用 Chrome devtools 調試 Weex 項目，其主要功能分為兩大部分—— Debugger 和 Inspector。
Devtools 主要功能一覽
連接設備
devtools 可以動態檢測客戶端的連接綁定請求，同時連接／調試多個 device（或者模擬器）是很容易的事情，連接到 Devtools 的客戶端顯示在 “Device List” 界面。如下圖所示。
點擊對應設備的 Debugger 按鈕即開始調試流程，並彈出JS斷點調試的頁面；隨后點擊 Inspector 按鈕可彈出調試 DOM 的頁面。
Debugger
這個是用來調試 Weex 的 JSBundle 代碼的頁面，“Sources” tab 能夠顯示所有 JS 源碼，包括 Weex JSFramework 和 JSBundle 代碼。可以設置斷點、查看調用棧，與 Chrome 瀏覽器調試類似。“Console” 控制台顯示前端的 Log 信息，並能根據級別（info/warn/error等）和關鍵字過濾。
斷點調試
Inspector
Inspector 功能豐富，能夠用來查看 Element \ Network \ Console log \ Screencast \ BoxModel \ Native View 等。
Device Screencast & View Inspect
如下圖所示，通過 Inspector 頁面的兩個開關，點擊右側 Icon 可以打開設備投屏，然后點擊左側 Icon 再在投屏上點選元素則可以自動在 DOM tree 中定位並審查該元素。
Elements
這里展示的是在 Android／iOS 上的 native DOM 樹，及其 style 屬性和 layout 圖。鼠標在 DOM 樹移動時，在 device（或模擬器）上對應節點會高亮顯示，有助於 native 開發者定位和發現節點。
注意： screencast 只是對屏幕圖像拷貝，在遠程調試時能看到遠程設備界面，數據網絡下 screencast 也將有較大流量花銷，如果設備就在手頭兒則建議關掉。
Elements 審查有兩種模式分別是：native 和 vdom。其中，native 模式下展示的是 Weex 所映射的 native view 的結構，它更接近實現本質；vdom 模式則對應 .we 文件中定義的 dom 結構，主要用來審查 .we 文件編譯為 JSBundle 之后對應的 dom tree 的邏輯構成。
native view element
weex dom element
Network
這里展示的是 JSBundle 資源加載網絡訪問的性能。所以如果 JSBundle 資源在設備本地，Network 是沒有數據的。
查看網絡請求的總耗時和延時
查看網絡請求的header和response
控制台
這里顯示的是 Android／iOS 上的 native log，並不是 JS log（JS log 顯示在 Debugger 頁面）。同樣 native log 也有對應級別--warn/error 等和關鍵字過濾，native 開發查詢很方便。
資源（Android Only）
遠端訪問的資源文件會顯示在這里，這里不是查看源碼的最佳方式。在 Debugger 頁面，“Sources” 里已經有源碼並可以斷點調試。如果你的應用里有 SQLITE 數據庫文件，在這里無需 root 便可以查看和更新，對於 mock 數據來說比較便利。
遠程控制 (Android Only)
Android 版本支持在 screencast 上進行遠程控制，能夠通過鼠標模擬在手機的輸入事件，方便手機不在本地的用戶進行遠程調試。
如何安裝和啟動devtools
無論是跑在 iOS 或者 Android 端，weex-devtool 都是必需的，用來啟動服務器和 Chrome 頁面。
安裝
如果你已經在前面的教程中安裝過 weex-toolkit，就無需再次安裝了。
$ npm install -g weex-toolkit
用法
weex debug [options] [we_file|bundles_dir]
選項:
-h, --help 顯示幫助
-V, --verbose 顯示debug服務器運行時的各種log
-v, --version 顯示版本
-p, --port [port] 設置debug服務器端口號 默認為8088
-e, --entry [entry] debug一個目錄時,這個參數指定整個目錄的入口bundle文件,這個bundle文件的地址會顯示在debug主頁上(作為二維碼)
-m, --mode [mode] 設置構建we文件的方式,transformer 最基礎的風格適合單文件,loader:wepack風格 適合模塊化的多文件.默認為transformer
如何在設備或者模擬器上調試
weex調試初體驗之playground
如果你是一名 Weex 調試的新手，那么推薦你先下載 Playground 體驗一下 Devtools 調試 JSBundle 的基礎流程.
-
前提:
- 安裝
weex-toolkit，內含調試命令weex debug - android／iOS 設備與 PC 在同一局域網，若位於不同網段請確保防火牆可訪問性
- 安裝
-
Inspector 功能演示
- Debugger功能演示
-
調試步驟:
- 啟動 debug server
執行命令
weex debug將啟動 debug server。如果啟動成功將會在 Chrome 打開一個 welcome 頁面，在網頁下方有一個二維碼。- 啟動 Playground 並掃碼
點擊啟首頁左上角的掃碼按鈕掃碼上一步中網頁下方的二維碼。此時 welcome 頁面將會出現你的設備信息。Playground 進入 loading 頁面，等待你的下一步操作。
- 點擊網頁上的 Debugger 按鈕
app 結束 loading 進入 debugging 狀態。同時 Chrome 將會打開 Debugger 頁面。按照頁面提示打開該頁的 JavaScript 控制台並進入 source tab。
- 設置斷點刷新當前頁
點擊 Playground 首頁 list 中的任意項將打開一個 Weex 頁面，此時在 Sources 里會出現相應的 JSBundle 文件，設置斷點並刷新 Playground 即可調試。
- 點擊網頁上的 Inspector 按鈕
Chrome 會打開 inspector頁面，可以查看Element， Console， Network狀態。
Weex調試初體驗之應用
如果是接入 Weex 的應用想調試自己的 Weex 代碼，有以下幾個方式：
-
借助 Playground 掃碼調試
- 先確定 Playground 已經是可調試狀態
- 使用命令行工具打開調試功能
weex debug，用 Playground 掃瀏覽器打開的頁面中的二維碼 - 用 Playground 掃描 JSBundle 二維碼
- 手機上即顯示 Weex 頁面的結果。相應在 “Debugger” 和 “Inspector” 頁面調試。
-
為應用接入 Devtools 接口
有任何問題或者建議，請提交這里，會很快得到解答。
更詳細的視頻講解
- 第一集 devtools簡介 http://cloud.video.taobao.com/play/u/1955166971/p/1/e/1/t/1/45796387.swf
- 第二集 inspector功能演示 http://cloud.video.taobao.com/play/u/1955166971/p/1/e/1/t/1/45803002.swf
- 第三集 debugger功能演示 http://cloud.video.taobao.com/play/u/1955166971/p/1/e/1/t/1/45803641.swf
- 第四集 native 與 weex 聯調 http://cloud.video.taobao.com/play/u/1955166971/p/1/e/1/t/1/45804472.swf
- 第五集 第三方App接入指南 http://cloud.video.taobao.com/play/u/1955166971/p/1/e/1/t/1/45805276.swf