用了這麼久的 Chrome,你不會還沒掌握這個功能吧?

背景

最近在做公司內部的項目,測試在測試過程中發現接口請求完成之後沒有帶過相關的數據,隨後打開控制檯查看是否是接口問題,發現接口報如下的異常,狀態碼是 200,但返回的內容顯示不出來,而且控制檯是提前打開 Preserve log 的,理論上之前發送的請求是應該會有記錄的,但結果確看不到 Response。

經過排查過後發現是對 Preserve log 的理解有偏差,由此引發了接下來的探索。 圖片

Preserve log 簡介

To save requests across page loads, check the Preserve log checkbox on the Network panel. DevTools saves all requests until you disable Preserve log.

按照 Chrome 官方文檔的介紹,Preserve log 如果勾選,在跨頁面加載請求時,會保留之前的所有請求,目的是爲了方便開發同學排查一些跨站請求是接口的一些問題,比如數據對比等。

但是官網沒有寫的是如果想要看到返回的 Response,你必須在頁面跳轉之前先提前點擊查看該接口,才能在跳轉之後看到之前的接口返回的信息,對於那些沒有點擊過的接口,在下一個頁面中是查看不到返回的結果的,Response 看到的信息跟上圖是類似的,都會有一個共同的報錯“Failed to load response data”。

那是不是所有的瀏覽器都這樣呢?還是隻是 Chrome 一家是這種情況?接下來對 Preserve log 的兼容性做了一個分析。

Preserve log 兼容性

我們選取三個瀏覽器做樣本,分別是 Chrome、Safari、Firefox。驗證的步驟如下:

  • 選取一個能從 A 網站跳轉到 B 網站的頁面
  • 打開控制檯,勾選 Preserve log 選項
  • 刷新頁面,找任意一個 A 頁面的請求打開,其它的請求不點擊
  • 點擊 A 網站 跳轉到 B 網站的鏈接,在 B 網站查看之前 A 網站的請求數據

實驗結果如下:

Chrome

在 Chrome 中,實驗結果跟我們之前看到的是一樣的,只會對點擊的請求做保留,未點擊的請求不會展示 Response。 圖片 在這裏插入圖片描述 Safari

在 Safari 中,Preserve log 的表現跟 Chrome 是一致的,只有點擊之後的接口才會保留 Response,未點擊的會展示“嘗試載入資源時發生錯誤”,查看不了相應的結果,Safari 有個好處是,當跳轉到 B 網站之後,控制檯中 A 網站的請求都置灰了,會方便觀察和操作。 圖片 圖片

Firefox

在 Firefox 中,如果勾選了 Persist Logs 之後,請求是會被完整的保留下來的,在下一個頁面中能看到上一個頁面完整的請求和返回的信息,說明 Firefox 是不受限制的。 圖片 在這裏插入圖片描述 Preserve log 爲什麼不會完整保留請求日誌

通過以上的分析會發現,不同瀏覽器對保留日誌的處理是不一樣的。Chrome 這種處理方式在 issue 上也引發了廣泛的討論,而且還是一個歷史悠久的 issue,總結下來大致觀點分爲兩派。

反對方:

  • NetWork 出現的錯誤很容易讓別人誤以爲錯誤出現在服務端,引起誤解
  • 如果重定向發生的非常快,用戶是很難去點擊鏈接的,所以還得藉助第三方工具幫助
  • Preserve log 有歧義,明明是保留日誌,但實際的結果確沒有像 Charles 等工具一樣完整的保留日誌

贊同方(chromium 開發者):

  • 這是“low overhead”的結果,Response 並不會傳到 DevTools,除非用戶想要查看並點擊它,目的是爲了避免歪曲測量結果
  • 如果將所有的 Response 都保留在 DevTools,則會增加很多的不必要的內容,如果用戶點擊了好多的跨站鏈接,後果不可想象
  • 這是一種折中最好的方案,既兼顧了易用性,也兼顧了靈活性

兩方觀點各有各的的道理,但我認爲,Chrome 應該把這個權限放開給開發者,因爲本來 DevTools 就是給開發者用的,Preserve log 並沒有解決開發者跨站請求需要查看原鏈接的訴求,保留日誌的本意應該是要保留所有的 Request 和 Response 信息,而不應該做閹割版本,應該由開發者去控制是否開啓這一選項,並承擔相應的結果。

不然有的時候還得通過第三方工具進行抓包或者像 issue 中講到的那樣,需要在代碼層面做處理,這無疑讓一個本來很簡單的功能變得複雜化。

瀏覽器廠商的改進節奏

issue 中也有一些 Chromium 的反饋,原來認爲這個需求沒有必要做,而且優先級比較低,17 年的時候因爲優先級和資源問題關閉了,但最近看好像又重啓了,狀態變成了 Open,期待之後的版本能夠改善這個問題。

總結

以上是對 Preserve log 做了一個簡單的介紹,如果在開發中真的遇到了上面的問題,解決方案可以考慮用以下幾種方案:

1、使用 Firefox 瀏覽器(目前貌似用的人比較少) 2、如 issue 中所說,通過在代碼中打點來進行調試,“window.onunload = function() {debugger;}”,但實際應用起來不太方便使用 Charles 等抓包工具進行抓包

作者:ES2049 鏈接:https://segmentfault.com/a/1190000041036021

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章