需求

現在微信內嵌了自己的 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)檢查是否安裝成功， 確保安裝成功

電腦上安裝 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
   7z x inspector_client20150401.zip -r -o /usr/local/inspector_client
   
   cd /usr/local/inspector_client
   sudo chomd +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