weex native端 js 除錯方法
預覽檔案,寫ui的時候我們常常需要能夠一邊寫一邊看到ui,以便於調整,weex的toolkit提供了實時預覽的功能
$ weex src/foo.vue |
該命令下,可以實時的去預覽檔案,而不需要編譯後再去瀏覽,效率就高了很多,但是目前實時預覽只支援web,雖然二維碼也是有,但是使用playground掃碼後一直顯示的是 network err 而且是確保了我的手機在區域網內的,所以暫時不糾結,雖然此時只能網頁預覽,但是對於開發效率也是有極大提高的,是個好東西
這是一個小插曲,下面就開始說怎麼除錯一個weex 頁面
然後 終端進入到 weex專案檔案下 輸入
$ weex debug |
等待幾秒的時間後,會開啟一個網頁
開啟手機端安裝的 playground app,掃描二維碼,此時網頁上就顯示出了我們的裝置連線了,如圖
然後編譯專案,生成對應的js
$weex compile src/foo.vue dist
此時我們可以看到這個頁面生成的js
因為weex 暫時還沒有直接給這個生成一個二維碼的辦法,但是根據playground 解析顯示的原理,我們知道,weex是通過把pc上的node作為一個server,然後playground 掃描二維碼的時候就是上這個server把對應的js 下載下來,那麼很簡單,我們需要獲取到這個js 的html訪問路徑生成二維碼即可
這樣就粗糙的製造出來了我們的 生成的js的二維碼,然後使用playground 再次掃描這個二維碼
此時在playground已然開啟這個js,當然我們做這麼多並不是為了開啟這個js,如果單純開啟js,那很簡單,我們此時需要的是除錯這個js
weex 的playground 實際的 斷點除錯等等的問題還很多,按照官方文件的操作會發現,實際上很多東西壓根根本沒法去除錯
然而通過它的 Inspector 卻是可以看到很多資訊
這些內容都可以看到,而且是手機端解析後的情況,所以還是相當有用的,不管是網路請求,還是日誌檢視等等的
當然我嘗試debug,一直是不停報錯
Error:can not find the peer : chrome-inspector[j6g7lz4e4wpwa224fos-0x08]
@(C:\Users\dell\.xtoolkit\node_modules\weex-devtool\lib\components\P2PSession.js:119:24)
所以debug還是會存在不少問題,後面解決後把這塊debug的內容補上來