前端遠程調試方案 Chii 的使用經驗分享

来源:https://www.cnblogs.com/morang/archive/2023/09/18/webdev-chii-.html
-Advertisement-
Play Games

前端遠程調試方案 Chii 的使用經驗分享 Chii 是與 weinre 一樣的遠程調試工具 ,主要是將 web inspector 替換為最新的 chrome devtools frontend 監控列表頁面可以看到網站的標題鏈接,IP,useragent,可以快速定位調試頁面,監控頁信息完善,支 ...


前端遠程調試方案 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記錄下關鍵性日誌分析了,雖然因客戶沒有時間來配合最後也沒有解決問題,但感覺體驗還是蠻好的,特此分享一二。

作者:易墨
Github:yimogit
純靜態工具站點:metools
說明:歡迎拍磚,不足之處還望園友們指出;
迷茫大概是因為想的太多做的太少。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 起因: 上周安裝完mysql後,成功新建了資料庫,一切都是正常的,於是就先擱置一旁。今天周一過來,卻突然發現無法連接mysql了。 過程: 第一反應是服務沒有啟動,畢竟重啟了電腦,說不定是服務沒有自動啟動,於是打開了服務管理器,卻發現沒有mysql對應的服務。既然沒有,那我就自己手動創建一個,找到m ...
  • Ubuntu20.04安裝Mysql8主從 一.主資料庫安裝 1.下載安裝包並初始化資料庫 # 進入目錄 cd /opt # 下載安裝包 wget https://dev.mysql.com/get/Downloads/MySQL-8.0/mysql-8.0.20-linux-glibc2.12-x ...
  • 本文分享自華為雲社區《DTSE Tech Talk | 第43期:數倉數據可靠保證——物理細粒度備份恢復》,作者:華為雲社區精選。 大數據時代,數據對企業的重要性不言而喻,如果發生數據丟失或因為誤操作而造成數據丟失,將對企業的經營決策帶來不可估量的損失。本期《備份恢復全掌握,數倉數據更安全》的主題直 ...
  • UUID(通用唯一識別碼)是由32個十六進位數組成的無序字元串,通過一定的演算法計算出來。為了保證其唯一性,UUID規範定義了包括網卡MAC地址、時間戳、名字空間(Namespace)、隨機或偽隨機數、時序等元素,以及從這些元素生成UUID的演算法。一般來說,演算法可以保證任何地方產生的任意一個UUID都... ...
  • Redis是游戲資料庫重要選型之一,華為雲GaussDB(for Redis)能及時上報用戶下線行為,被廣泛應用於排行榜等多種業務場景。 ...
  • Ubuntu20.04安裝Postgres主從備份 一.查看可安裝的Postgres包 #列出相關的軟體包,這裡安裝的是14版本 apt list | grep -w postgresql-14 | tail -1 #下載Postgres apt install -y postgresql-14/f ...
  • 基於OpenHarmony和華為雲平臺打造的智能家居設備,分別為智能門鎖,儲物精靈 NFC版,儲物精靈Pro版三個設備。 ...
  • 之前在 《iOS16新特性:靈動島適配開發與到家業務場景結合的探索實踐》 里介紹了iOS16新的特性:實時更新(Live Activity)中靈動島的適配流程,但其實除了靈動島的展示樣式,Live Activity還有一種非常實用的應用場景,那就是鎖屏界面實時狀態更新: ...
一周排行
    -Advertisement-
    Play Games
  • 一個自定義WPF窗體的解決方案,借鑒了呂毅老師的WPF製作高性能的透明背景的異形視窗一文,併在此基礎上增加了滑鼠穿透的功能。可以使得透明窗體的滑鼠事件穿透到下層,在下層窗體中響應。 ...
  • 在C#中使用RabbitMQ做個簡單的發送郵件小項目 前言 好久沒有做項目了,這次做一個發送郵件的小項目。發郵件是一個比較耗時的操作,之前在我的個人博客裡面回覆評論和友鏈申請是會通過發送郵件來通知對方的,不過當時只是簡單的進行了非同步操作。 那麼這次來使用RabbitMQ去統一發送郵件,我的想法是通過 ...
  • 當你使用Edge等瀏覽器或系統軟體播放媒體時,Windows控制中心就會出現相應的媒體信息以及控制播放的功能,如圖。 SMTC (SystemMediaTransportControls) 是一個Windows App SDK (舊為UWP) 中提供的一個API,用於與系統媒體交互。接入SMTC的好 ...
  • 最近在微軟商店,官方上架了新款Win11風格的WPF版UI框架【WPF Gallery Preview 1.0.0.0】,這款應用引入了前沿的Fluent Design UI設計,為用戶帶來全新的視覺體驗。 ...
  • 1.簡單使用實例 1.1 添加log4net.dll的引用。 在NuGet程式包中搜索log4net並添加,此次我所用版本為2.0.17。如下圖: 1.2 添加配置文件 右鍵項目,添加新建項,搜索選擇應用程式配置文件,命名為log4net.config,步驟如下圖: 1.2.1 log4net.co ...
  • 之前也分享過 Swashbuckle.AspNetCore 的使用,不過版本比較老了,本次演示用的示例版本為 .net core 8.0,從安裝使用開始,到根據命名空間分組顯示,十分的有用 ...
  • 在 Visual Studio 中,至少可以創建三種不同類型的類庫: 類庫(.NET Framework) 類庫(.NET 標準) 類庫 (.NET Core) 雖然第一種是我們多年來一直在使用的,但一直感到困惑的一個主要問題是何時使用 .NET Standard 和 .NET Core 類庫類型。 ...
  • WPF的按鈕提供了Template模板,可以通過修改Template模板中的內容對按鈕的樣式進行自定義。結合資源字典,可以將自定義資源在xaml視窗、自定義控制項或者整個App當中調用 ...
  • 實現了一個支持長短按得按鈕組件,單擊可以觸發Click事件,長按可以觸發LongPressed事件,長按鬆開時觸發LongClick事件。還可以和自定義外觀相結合,實現自定義的按鈕外形。 ...
  • 一、WTM是什麼 WalkingTec.Mvvm框架(簡稱WTM)最早開發與2013年,基於Asp.net MVC3 和 最早的Entity Framework, 當初主要是為瞭解決公司內部開發效率低,代碼風格不統一的問題。2017年9月,將代碼移植到了.Net Core上,併進行了深度優化和重構, ...