需求

現在微信內嵌了自己的 X5 瀏覽器核心，該核心畢竟與別的主流瀏覽器還是有一點差別，如何線上除錯成了一個棘手的問題。 開發時我們還可以使用 alert，線上錯誤就沒辦法了，再說總alert也很煩。

參考

• 下面這個步驟將允許你在電腦的 chromium 瀏覽器 ：

  1. 即時檢視你在微信中渲染的html的 dom （會額外插入兩個輔助用的 iframe）
  2. 選中不同 dom 的節點，微信中渲染的html上相應的塊高亮顯示。
  3. 修改相應的 dom 也會在 微信中渲染的html上及時反饋
  4. 斷點除錯 javascript

步驟

手機開啟USB除錯

手機上 -> 工具 -> 設定 -> 開發人員選項 -> 開啟 USB 除錯

PS：華為的手機預設沒有顯示 開發人員選項，需要： 手機上 -> 工具 -> 設定 -> 關於手機 -> 連續點選 版本號 5～7次， 之後會提示說 進入開發者模式，再返回後就可以看到 開發人員選項 了

手機上安裝 tbs 除錯包

附件

1. 在手機上面安裝微信（如果是第一次新裝）
2. 在微信中隨便找個聊天視窗，收入 //deletetbs 刪除原有的 TBS 工具
3. 在手機上安裝附件壓縮包中的 tbs_20150526_021257_inspector.apk 或者 從這裡下載。

4. 開啟 TBS 工具集 ：

   1. 選擇 安裝本地TBS核心
   2. 選擇 com.tencent.mm —— 即為微信安裝 TBS
   3. 點選最下面的 快速殺死App（強行停止） 按鈕，退出微信
   4. 點選 (1)安裝TBS 按鈕
   5. 開啟微信，隨便找個服務號，公眾號的連結，開啟一個網址，停留1分鐘，然後返回到 TBS 工具集 的畫面
   6. 點選 (3)檢查是否安裝成功， 確保安裝成功

5. 將手機通過USB連線到電腦上

6. 在手機微信中開啟網頁

7. 吃用 chrominum 瀏覽器開啟 http://localhost:9222, 選擇要除錯的畫面進行除錯。

電腦上安裝 inspector_client 指令碼

1. 電腦上安裝 python （略過，Ubuntu貌似已經自帶安裝了？ PS：注意，Ubuntu下 python 3 的執行命令是 python3, python 2 的執行命令是 python）

2. 解壓附件中的 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程式識別，需要手動配置一下

1. 將手機用USB線連線上電腦

2. 通過 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
   

3. 建立規則檔案

   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"
   

4. 重啟 udev 服務

   sudo service udev restart
   

5. 使用 adb 檢查

   ${inspector_client_home}/platforms/linux/adb kill-server
   ${inspector_client_home}/platforms/linux/adb devices