配置完憑證之後再次刷新頁面,就可以看到所有的https請求了,可以清楚的看到請求體和回應體的內容
手機抓包
首先抓包的前提是手機和電腦要處於一個網路下。關閉電腦端的防火牆,然後在手機的wifi設定中,把WiFi的代理模式設定為手動代理,主機名稱和連接埠號碼是電腦的ip位址+的連接埠號碼。 ip位址可以透過終端的查詢。
配置完之後手機發送的請求在的清單中就能看到了。在手機端存取一下掘金的官網。
在工具列這塊可以透過選項對請求進行過濾。可以在中看到手機端存取的清單資料。
應用場景
的強大遠遠不止能抓包這麼簡單,它還有很多其他的功能。
主機
整合[3]的功能,使用者只需透過簡單配置( ://id)即可使用,具體參見[4],更多行動端調試方法可以參考:利用調試行動端頁[5]。
相信有過h5開發經驗的同學都遇到過這種情況,我電腦f12模擬行動端調試的時候非常的完美,但是一到真機上會出現各種奇奇怪怪的問題,而這些問題往往是比較難以定位問題並修復的,因為在真機的h5頁面上沒有控制台,我們無法審查元素。
但是當你使用了你會發現只需要配置一行規則,就可以輕鬆的調出控制台調試真機的h5頁面,這就是控制台。具體效果如下圖,這裡為了方便展示,真機調試就用pc端模擬手機代替(真實調試的時候,需要先實現上述的手機抓包,即手機電腦在同一網絡下,並且修改手機wifi的代理。 )。可以看到左側並不是瀏覽器自帶的控制台,而是自帶的功能,在視察與修改左側元素時,我們手機上的內容也會隨之改變。
那麼如何實現上面的效果呢?
我們只需要在控制台左側的Rules中新增一條規則即可。
${監聽的網址} ://${實例名稱} 這個實例名稱是工具列中下拉框中的名字可以任意起
https://juejin.cn/ weinre://juejin
點擊工具列中下面的即可跳到控制台頁面,再刷新下監聽網址的頁面即可審查元素。
借助控制台,我們可以更容易的解決真機相容性問題。
篡改回應
修改響應體還是很常用的,例如修復bug的時候,如果懷疑是介面回傳值有誤導致的問題,就可以透過修改響應體,來排查到底是不是後端的問題。
在調試介面的時候,例如後端介面新增了一個回傳值,我們需要根據這個回傳值進行對應的邏輯處理,這時候我們也可以透過修改回應體的方式mock一下新增的字段,只要確保自己mock的結果和介面回傳的結構一樣,就可以提前完成介面聯調。
具體做法:
前半段是請求位址(支援正規比對) 後半段是響應體的檔案。 file://${路徑} 預設找的是下檔。
Ctrl+右鍵點選橘色的路徑,會自動跳到下方對應的檔案裡,如果沒有會自動建立非常方便。
mock.json
可以看到加完配置之後對應介面的響應體就變成了mock.json裡面的內容。
解決跨域
解決跨域是篡改回應的一種應用,有的後端介面沒有配置CORS,導致前端介面跨域
歷史解決:透過vite 或等工具做一個反向代理
通過的可直接修改跨域介面的回應頭,增加cors 配置
/getList/ resHeaders://{cors}
# cors 文件
access-control-allow-credentials: true always
access-control-allow-headers: *
access-control-allow-methods: GET, PUT, POST, DELETE, HEAD, OPTIONS
access-control-allow-origin: *
access-control-expose-headers: *
access-control-max-age: 18000L
content-type: application/json
date: Fri, 02 Dec 2022 04:00:28 GMT
server: 123123
Access-Control-Allow-Origin: *
當然功能遠不止這些,還可以竄改API回應時間、HTTP回應狀態碼等。 。 。
篡改請求
可以使用修改修改請求體,它會把merge.json檔案的請求體合併到原本介面的請求體中。
/savePerson/ reqMerge://{merge.json}
# merge.json
{
name:'张三'
}
進行js注入
使用可以在目標網址的中加入任意的js程式碼。我們這裡向頁面中註入一個行動端調試工具。 ${注入到哪個位址} ://${注入的js路徑}
https://juejin.cn/ jsPrepend://https://cdn.jsdelivr.net/npm/eruda@2.4.1/eruda.min.js
https://juejin.cn/ jsPrepend://{test.js}
test.js
var vConsole = new window.VConsole();
打開控制台可以發現,我們注入的js被添加到了head的最頂部。
成功顯示到了頁面上
域名映射
# 可以一个ip 配置多个域名 并且支持端口号
127.0.0.1:9000 ddd.com aaa.com