前面的話
自從騰訊家族 移動(dòng)webview入口換成了x5以來(lái)，業(yè)界褒貶不一，總體來(lái)說(shuō)給開發(fā)者帶來(lái)許多驚喜，其中最重要的就是微信x5調(diào)試能力,想想過(guò)去 碼農(nóng)們 苦逼的完成code 本地瀏覽器一跑ok 上微信 手q上 出現(xiàn)一堆兼容性的問(wèn)題 慘不忍睹 過(guò)去微信 q 沒(méi)有調(diào)試能力 只能借助 什么weinre debugeap等等 半吊子工具 湊合去使用
轉(zhuǎn)眼2015 微信已經(jīng)開放webview調(diào)試能力 借助chrome 調(diào)試不再是夢(mèng)想(換膚 斷點(diǎn)調(diào)試 性能測(cè)試 控制臺(tái) 等等 )
由于使用起來(lái)稍微有些復(fù)雜 以下按照模塊方式介紹使用方式:
調(diào)試原理 借助chrome 和android adb 功能
前期準(zhǔn)備
1.下載最新微信 我用是6.1
2.下載TbsSuiteNew.apk安裝到手機(jī)中 地址(http://res.imtt.qq.com///tbs_inspect/TbsSuiteNew.zip)
- 打開微信 進(jìn)入聊天界面(任意) 輸入框內(nèi)輸入//deletetbs，點(diǎn)發(fā)送
輸入//gettbs可以查看當(dāng)前 tbs情況
4.打開TbsSuiteNew 選擇按照本地tbs內(nèi)核
5.下載tbs調(diào)試包
應(yīng)用包名 微信：com.tencent.mm，qq：com.tencent.mobileqq，qq空間：com.qzone】
我們選擇微信即可
6.啟動(dòng)tbs靜默安裝
7.登錄微信，用微信訪問(wèn)一個(gè)頁(yè)面，停留1分鐘左右，目的是讓微信來(lái)靜默安裝剛導(dǎo)入進(jìn)去的tbs_xxxx_inspector.apk包
8.一分鐘過(guò)后打開TbsSuiteNew 檢查是否安裝成功.
這里還需要在檢查下 打開微信 隨便進(jìn)入一個(gè) webview頁(yè)面 然后長(zhǎng)按頁(yè)面文字是否有水滴 ，若有則成功
ADB安裝
官網(wǎng)下載 android-sdk,執(zhí)行tools文件夾下面的android,然后選擇android sdk platform tools 安裝
然后配置android環(huán)境變量 vim ~/.bash_profile
export ANDROID_TOOLS=/Users/sherlock/dev/android-sdk-macosx/platform-tools
export PATH=$PATH:$ANDROID_TOOLS
最后在source .bash_profile執(zhí)行下環(huán)境變量 在控制臺(tái)打出adb 看是否已經(jīng)配置ok!
ps mac下面 可能找不到國(guó)產(chǎn)設(shè)備可以按照以下方法嘗試:
1.打開終端，system_profiler SPUSBDataType 命令 可以查看連接的usb設(shè)備的信息
2.我的是MX4 PRO，設(shè)備的 vender id: 0x2a45 Product Id:0x0c02
- vi ~/.android/adb_usb.ini 命令，在打開的 adb_usb.ini文件中添加 0x2a45， 然后保存退出
然后重啟adb
adb kill-server
adb start-server
有時(shí) adb devices不能顯示連接設(shè)備，需要拔掉數(shù)據(jù)線，多插幾次，并且退出終端，然后重新打開，再輸入命令就能發(fā)現(xiàn)連接的設(shè)備，再無(wú)法連接請(qǐng)重啟電腦，等待系統(tǒng)初始化環(huán)境設(shè)置。
adb devices 就能查看到已經(jīng)連接的設(shè)備
安裝python
去python(https://www.python.org/) 下載安裝包安裝 并且添加環(huán)境變量使得可以直接訪問(wèn) python
python啟動(dòng)調(diào)試服務(wù)
下載 (http://res.imtt.qq.com///tbs_inspect/wx_sq_webview_debug.zip )
包中包含inspector_client20150401.zip
<p>
adb安裝完成之后我們就可以啟動(dòng)調(diào)試服務(wù)了,將下載好的wx_sq_webview_debug解壓 然后找到其中的 inspector_client20150401 解壓 并且進(jìn)入。(記得打開usb調(diào)試)
執(zhí)行以下python 命令 python ./inspector.py --abd 你自己的adb路徑
python ./inspector.py --adb /Users/sherlock/dev/android-sdk-macosx/platform-tools/adb
可能遇到錯(cuò)誤
device unauthorized. Please check the confirmation dialog on your device.
請(qǐng)?jiān)谀阕约涸O(shè)備上同意usb調(diào)試
最后啟動(dòng)成功
最后完美開始調(diào)試
當(dāng)python啟動(dòng)ok之后 我們就可以開心調(diào)試了,怎么做呢 ？
打開chrome 瀏覽器 訪問(wèn) http://localhost:9222/
打開 微信上面任意一個(gè)page 頁(yè)面
在chrome上就能看到 這個(gè)頁(yè)面的選項(xiàng)卡
點(diǎn)進(jìn)去就看到熟悉chrome調(diào)試界面
斷點(diǎn)調(diào)試也沒(méi)問(wèn)題 控制臺(tái)打印 element選擇器 都沒(méi)問(wèn)題
轉(zhuǎn)載請(qǐng)注明出處 sherlock221b http://www.itdecent.cn/p/ccf124f1f74b
結(jié)束的話
至此至終 百年來(lái)的微信webview調(diào)試愿望 終于如愿以償 ,從此我們可以告別weinre debugap 等等不穩(wěn)定工具 迎來(lái)新的曙光 感謝TX 隨著x5的能力不斷 微信勢(shì)必會(huì)成為未來(lái)html5的戰(zhàn)場(chǎng)。
根據(jù)x5的描述來(lái)看 微信 手q 和 qq瀏覽器目前 已經(jīng)獨(dú)立繼承了 x5 我們只需要安裝其中任意一個(gè) 就可以體驗(yàn)x5 帶來(lái)的特性。 對(duì)第三方app x5 sdk 也提供了 換掉本地webview的能力 具體可以了解下x5瀏覽服務(wù)(http://x5.tencent.com/). 若第三方app 也能集成x5 那我們也就可以使用 這種調(diào)試方式 去調(diào)試自己app 的 webview
