你瞭解 Preserve log 嗎？

ES2049發表於2021-11-29

背景

最近在做公司內部的專案，測試在測試過程中發現介面請求完成之後沒有帶過相關的資料，隨後開啟控制檯檢視是否是介面問題，發現介面報如下的異常，狀態碼是 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。驗證的步驟如下：

  1. 選取一個能從 A 網站跳轉到 B 網站的頁面
  2. 開啟控制檯，勾選 Preserve log 選項
  3. 重新整理頁面，找任意一個 A 頁面的請求開啟，其它的請求不點選
  4. 點選 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;}”，但實際應用起來不太方便
  3. 使用 Charles 等抓包工具進行抓包

參考文件

作者：ES2049 / 洛神
文章可隨意轉載，但請保留此原文連結。
非常歡迎有激情的你加入 ES2049 Studio，簡歷請傳送至 caijun.hcj@alibaba-inc.com 。

相關文章