前端遠端除錯方案 Chii 的使用經驗分享，高速路檢查輪胎的一種思路與實踐

發表於2023-09-20
前端除錯

前端遠端除錯方案 Chii 的使用經驗分享

Chii 是與 weinre 一樣的遠端除錯工具 ，主要是將 web inspector 替換為最新的 chrome devtools frontend\
監控列表頁面可以看到網站的標題連結，IP，useragent，可以快速定位除錯頁面，監控頁資訊完善，支援https請求等，開發者工具能看到的都能看到。
本文主要介紹其使用，在電腦執行，透過注入 js 的方式將將遠端的日誌，請求等同步推送在電腦端檢視顯示，及命令的執行

專案地址：https://github.com/liriliri/chii

執行監控一覽

  • 啟動
  • nginx配置
  • 監控列表
  • 監控頁

Chii 安裝

使用 npm 安裝

npm install chii -g

Chii 執行及轉發配置

  • 如果是本地直接執行即可：chii start -p 8082
  • 考慮到可能存在的跨域情況，可參考如下配置執行使用

  • 生產環境執行：chii start -p 8082 --base-path /chii -d xxxx.xxxx.xxx.com

    • 結合字首和域名，不影響生產環境訪問，也可以使用生產環境域名訪問到chii服務
    • -p 埠
    • -base-path 字首
    • -d 域名
    • 更多引數見原始碼

  • 配置轉發

    • 若需要除錯的網站域名是：xxxx.xxxx.xxx.com，則 nginx 配置其轉發 xxxx.xxxx.xxx.com/chii/
    • 如果網站是 https 則將註釋處放開
real_ip_header X-Real-IP;
server {
    #location / {
    #    ....
    #}
    location /chii/ {
            real_ip_recursive on;
            proxy_set_header Host $http_host;
            # 執行chii的本地地址
            proxy_pass http://192.168.0.188:8082/chii/;
            proxy_set_header X-Real-IP  $remote_addr;
            proxy_set_header Host-Real-IP  $http_host;
            #https則將下面註釋的放開
            #proxy_set_header X-Forwarded-Proto "https";
            #proxy_set_header X-Forwarded-Ssl on;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
    }
}

訪問：https://xxxx.xxxx.xxx.com/chii/ 即可開啟除錯監控

chii 注入 js 轉發開始除錯

//注意替換其中的域名
function injectTarget() {
  var e = document.createElement("script");
  e.src = "//xxxx.xxxx.xxx.com/chii/target.js";
  location.href.indexOf("embedded=true") > -1 &&
    e.setAttribute("embedded", "true");
  location.href.indexOf("cdn=true") > -1 &&
    e.setAttribute("cdn", "//cdn.jsdelivr.net/npm/chii/public");
  document.head.appendChild(e);
}
injectTarget();

將其加入到頁面中即可，可以透過 query 引數獲其他介面引數控制來是否啟用
另外如果是要在高速上給火車換輪子：給生產環境執行中的單頁應用中使用思路,可參考下面命令
複製一個 html，然後注入，訪問 test.html 即可

# nginx容器內部路徑，根據實際情況調整
cp /usr/share/nginx/html/index.html /usr/share/nginx/html/test.html
echo "<script>function injectTarget(){var e=document.createElement('script');e.src='//xxxx.xxxx.xxx.com/chii/target.js';location.href.indexOf('embedded=true')>-1&&(e.setAttribute('embedded','true'));location.href.indexOf('cdn=true')>-1&&e.setAttribute('cdn','//cdn.jsdelivr.net/npm/chii/public');document.head.appendChild(e)}injectTarget();</script>" >> /usr/share/nginx/html/test.html

其他除錯方案與工具

vConsole

專案地址：https://github.com/Tencent/vConsole

一個輕量、可擴充、針對手機網頁的前端開發者除錯皮膚。\
vConsole 是框架無關的，可以在 Vue、React 或其他任何框架中使用。\
現在 vConsole 是微信小程式的官方除錯工具。
注入 js,會顯示一個圖示，可以在裝置端檢視日誌等資訊

vConsole 的安裝使用

最簡單的方式是使用 cdn 引入然後初始化

<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
  // VConsole 預設會掛載到 `window.VConsole` 上
  var vConsole = new window.VConsole();
</script>

再或者需要先載入 vConsole 也可以使用 sed 命令替換標題注入 js

cp /usr/share/nginx/html/index.html /usr/share/nginx/html/test.html
sed -i 's#<title>xxxxx</title>#<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>\n<script>\n  var vConsole = new window.VConsole();\n</script>#' ./test.html
  • 執行後如圖所示

weinre 的安裝使用

專案地址：weinre

一款基於 Web 開發的遠端除錯工具。是 Apache Cordova 專案的一部分。
經常有斷線情況，不再維護，不再推薦
  • 安裝
npm -g install weinre
  • 啟動
weinre --httpPort 9090 --boundHost -all-
  • 注入 js
<script src="http://localhost:9090/target/target-script-min.js#anonymous"></script>

當訪問除錯頁面時開啟 http://localhost:9090/client/#anonymous 介面檢視到被除錯的頁面監控連結，訪問即可

sentry

是一種開源的錯誤跟蹤和監控解決方案，用於幫助開發者及時發現、修復和預防應用程式中的錯誤和異常。
整合容易，但是用好還是不容易，一些關鍵性的日誌及設定使用者上下文的使用還是蠻重要的
安裝使用可以參考這篇文章

寫在最後

文章始於客戶反饋產品移動端白屏，因為是在生產環境，故想辦法嘗試了下chii，用chii排除了一些錯誤答案，生產環境還是需要反饋使用者的積極配合才行\
目前只能是用sentry記錄下關鍵性日誌分析了，雖然因客戶沒有時間來配合最後也沒有解決問題，但感覺體驗還是蠻好的，特此分享一二。

相關文章