前端除錯利器 Charles

2022-08-05 17:21:15 字數 1308 閱讀 5456

docs 開發之 charles 配置指南

2.啟用

使用公司正版license 啟用

安裝證書

點選證書並選擇「始終信任」 (證書不被信任可能會導致**開發時部分資原始檔無法載入。)

設定**

將你需要**https的**新增進去:

本地除錯

如果你想**bear-test 到本地, 你需要:

點選map remote:

新增你需要的設定:

這裡提供一個基礎配置:

如果你是新手, 只需 import 這個檔案, 點選ok 就好了。

配置到這裡 ,開啟bear-test 中的一篇文件, 你就會看到資源請求打到了本地。

這樣, 就能在本地進行開發和除錯了。

異常處理

頁面空白, 提示獲取資料失敗:

這種情況, 你需要檢查一下 only_dev 這個檔案的 session 是否過期。

在這裡找到:

如果你也不確定是否過期, 就刪掉, 重新登陸,然後拿到新的session ,重新 yarn start 一下就可以了。

id 指的是userid, 在控制檯中,可通過 window.user 檢視。

此配置中, 還有個預設的欄位wsserver, 預設值是wsserver: "ws:",

如果你需要修改, 直接重新賦值即可。

更便捷的設定

如果你想在不同的開發任務間來回切換, 又不想頻繁的修改only_dev.js 中的配置, 你只需要在backends 目錄中新建一個檔案:

裡面是該環境需要的一些引數:

需要切換環境的時候, 只需要執行:

yarn use beartest

這條命令會把裡面的內容自動新增到only_dev 中。

然後再重新yarn start , 重新整理即可。

mobile 端除錯的相關配置

m端的配置稍微繁瑣一些。

這裡以 ios 為例。

首先,你需要找客戶端的同學要一臺測試機, 幫你安裝測試版的docs.

測試機上一般已經配好了**。

然後你需要確認:

1.手機上是否安裝了證書, 如果沒有, 就安裝。

安裝證書

按照提示安裝證書。

1.設定ip。 移動端連線的網路是bytedanceinc, 你需要手動設定http **, 和你pc 的 ip 保持一致。

2.手機訪問這個地址, 然後安裝證書, 設定信任。

設定**

設定charles **。( 把移動端的資源請求**到本地來)

示例:

這樣就可以在本地進行後續的開發和除錯了。

iOS抓包利器Charles

看唐巧的分析支付寶客戶端的外掛機制一文發現他使用了抓包工具charles,想起去年有人給我推薦過這個工具,但是當時我覺得wireshark就夠用了就沒嘗試。這次看到又有人使用charles我就重視起來了,charles到底有什麼好? 在mac上安裝charles後,啟動charles,首先彈出一個框...

前端利器 關於sublime text的使用。

英文版本 中文版本 sublime text支援模糊匹配,所以以下操作的輸入亦是支援的。著重挑幾個部分來講,剛開始入門學習前端知識的小夥伴夠用了。 一 go to anything 使用快捷鍵control p 即可開啟, 可以在該輸入框中輸入路徑即可快速檢視檔案 輸入 可以快速瀏覽查詢檔案所包含的...

Mac前端裝機必備之 Charles

charles是一款收費的抓包修改工具,易上手,資料請求容易控制,修改簡單,抓取資料的開始暫停方便等優勢!下面詳細介紹下這款強大好用的抓包工具。 以下兩個操作時必須的 如不你升級了系統,設定下沒有任何 這個選項。 解決辦法 在終端下 執行 sudo spctl master disable 開啟ch...