線上除錯微信開啟的HTML5頁面
阿新 • • 發佈:2018-12-23
需求
現在微信內嵌了自己的 X5 瀏覽器核心,該核心畢竟與別的主流瀏覽器還是有一點差別,如何線上除錯成了一個棘手的問題。 開發時我們還可以使用 alert,線上錯誤就沒辦法了,再說總alert也很煩。
參考
-
下面這個步驟將允許你在電腦的 chromium 瀏覽器 :
- 即時檢視你在微信中渲染的html的 dom (會額外插入兩個輔助用的 iframe)
- 選中不同 dom 的節點,微信中渲染的html上相應的塊高亮顯示。
- 修改相應的 dom 也會在 微信中渲染的html上及時反饋
- 斷點除錯 javascript
步驟
手機開啟USB除錯
手機上 -> 工具 -> 設定 -> 開發人員選項 -> 開啟 USB
除錯
PS:華為的手機預設沒有顯示 開發人員選項
,需要:
手機上 -> 工具 -> 設定 -> 關於手機 -> 連續點選 版本號
5~7次,
之後會提示說 進入開發者模式,再返回後就可以看到 開發人員選項
了
手機上安裝 tbs 除錯包
- 在手機上面安裝微信(如果是第一次新裝)
- 在微信中隨便找個聊天視窗,收入
//deletetbs
刪除原有的 TBS 工具 - 在手機上安裝附件壓縮包中的 tbs_20150526_021257_inspector.apk 或者 從這裡下載。
-
開啟
TBS 工具集
:- 選擇
安裝本地TBS核心
- 選擇
com.tencent.mm
—— 即為微信安裝 TBS - 點選最下面的
快速殺死App(強行停止)
按鈕,退出微信 - 點選
(1)安裝TBS
按鈕 - 開啟微信,隨便找個服務號,公眾號的連結,開啟一個網址,停留1分鐘,然後返回到 TBS 工具集 的畫面
- 點選
(3)檢查是否安裝成功
, 確保安裝成功
- 選擇
-
將手機通過USB連線到電腦上
-
在手機微信中開啟網頁
-
吃用 chrominum 瀏覽器開啟
http://localhost:9222
, 選擇要除錯的畫面進行除錯。
電腦上安裝 inspector_client 指令碼
- 電腦上安裝 python (略過,Ubuntu貌似已經自帶安裝了? PS:注意,Ubuntu下 python 3 的執行命令是 python3, python 2 的執行命令是 python)
-
解壓附件中的
inspector_client20150401.zip
file inspector_client20150401.zip # 可以檢測到使用的是 7zip 格式壓縮的 sudo mkdir /usr/local/inspector_client sudo apt-get install p7zip-full sudo 7z x inspector_client20150401.zip -r -o/usr/local/inspector_client cd /usr/local/inspector_client sudo chmod +rx -R * sudo chmod +x platforms/linux/adb # 為adb增加可執行許可權 sudo chmod +x inspector.py sudo vi inspector.py # 移除第一行中的 `^M`, 否則會報錯,提示找不到 python ./inspector.py # 開始執行,之後用 chromium 瀏覽器訪問 http://localhost:9222 # 如果提示未找到USB裝置,請參考下面的 `讓電腦識別手機的USB連線`
讓電腦識別手機的USB連線
國產手機大多無法被android開發套件的adb程式識別,需要手動配置一下
- 將手機用USB線連線上電腦
-
通過
lsusb
命令獲取所有的 usb 裝置Bus 002 Device 002: ID 8087:8000 Intel Corp. Bus 002 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub Bus 001 Device 002: ID 8087:8008 Intel Corp. Bus 001 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub Bus 004 Device 001: ID 1d6b:0003 Linux Foundation 3.0 root hub Bus 003 Device 003: ID 0101:0007 Bus 003 Device 018: ID 12d1:1052 Huawei Technologies Co., Ltd. # 該行的 `12d1:1052` 就是手機的 USB ID Bus 003 Device 004: ID 258a:0003 Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
-
建立規則檔案
sudo touch /etc/udev/rules.d/50-android.rules sudo vi /etc/udev/rules.d/50-android.rules # 增加以下一行內容, 其中 12d1:1037 就是前一步獲取的手機的 USB ID SUBSYSTEM=="usb",SYSFS{idVendor}=="12d1:1037",MODE="0666"
-
重啟 udev 服務
sudo service udev restart
-
使用 adb 檢查
${inspector_client_home}/platforms/linux/adb kill-server ${inspector_client_home}/platforms/linux/adb devices