背景

最近在做公司內(nèi)部的項(xiàng)目，測(cè)試在測(cè)試過(guò)程中發(fā)現(xiàn)接口請(qǐng)求完成之后沒(méi)有帶過(guò)相關(guān)的數(shù)據(jù)，隨后打開(kāi)控制臺(tái)查看是否是接口問(wèn)題，發(fā)現(xiàn)接口報(bào)如下的異常，狀態(tài)碼是 200，但返回的內(nèi)容顯示不出來(lái)，而且控制臺(tái)是提前打開(kāi) Preserve log 的，理論上之前發(fā)送的請(qǐng)求是應(yīng)該會(huì)有記錄的，但結(jié)果確看不到 Response。經(jīng)過(guò)排查過(guò)后發(fā)現(xiàn)是對(duì) Preserve log 的理解有偏差，由此引發(fā)了接下來(lái)的探索。

Preserve log 簡(jiǎn)介    

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 如果勾選，在跨頁(yè)面加載請(qǐng)求時(shí)，會(huì)保留之前的所有請(qǐng)求，目的是為了方便開(kāi)發(fā)同學(xué)排查一些跨站請(qǐng)求是接口的一些問(wèn)題，比如數(shù)據(jù)對(duì)比等。但是官網(wǎng)沒(méi)有寫(xiě)的是如果想要看到返回的 Response，你必須在頁(yè)面跳轉(zhuǎn)之前先提前點(diǎn)擊查看該接口，才能在跳轉(zhuǎn)之后看到之前的接口返回的信息，對(duì)于那些沒(méi)有點(diǎn)擊過(guò)的接口，在下一個(gè)頁(yè)面中是查看不到返回的結(jié)果的，Response 看到的信息跟上圖是類似的，都會(huì)有一個(gè)共同的報(bào)錯(cuò)“Failed to load response data”。那是不是所有的瀏覽器都這樣呢？還是只是 Chrome 一家是這種情況？接下來(lái)對(duì) Preserve log 的兼容性做了一個(gè)分析。

Preserve log 兼容性

我們選取三個(gè)瀏覽器做樣本，分別是 Chrome、Safari、Firefox。驗(yàn)證的步驟如下：

1. 選取一個(gè)能從 A 網(wǎng)站跳轉(zhuǎn)到 B 網(wǎng)站的頁(yè)面
2. 打開(kāi)控制臺(tái)，勾選 Preserve log 選項(xiàng)
3. 刷新頁(yè)面，找任意一個(gè) A 頁(yè)面的請(qǐng)求打開(kāi)，其它的請(qǐng)求不點(diǎn)擊
4.  點(diǎn)擊 A 網(wǎng)站 跳轉(zhuǎn)到 B 網(wǎng)站的鏈接，在 B 網(wǎng)站查看之前 A 網(wǎng)站的請(qǐng)求數(shù)據(jù)

 實(shí)驗(yàn)結(jié)果如下：

Chrome

在 Chrome 中，實(shí)驗(yàn)結(jié)果跟我們之前看到的是一樣的，只會(huì)對(duì)點(diǎn)擊的請(qǐng)求做保留，未點(diǎn)擊的請(qǐng)求不會(huì)展示 Response。

Safari

在 Safari 中，Preserve log 的表現(xiàn)跟 Chrome 是一致的，只有點(diǎn)擊之后的接口才會(huì)保留 Response，未點(diǎn)擊的會(huì)展示“嘗試載入資源時(shí)發(fā)生錯(cuò)誤”，查看不了相應(yīng)的結(jié)果，Safari 有個(gè)好處是，當(dāng)跳轉(zhuǎn)到 B 網(wǎng)站之后，控制臺(tái)中 A 網(wǎng)站的請(qǐng)求都置灰了，會(huì)方便觀察和操作。

Firefox

在 Firefox 中，如果勾選了 Persist Logs 之后，請(qǐng)求是會(huì)被完整的保留下來(lái)的，在下一個(gè)頁(yè)面中能看到上一個(gè)頁(yè)面完整的請(qǐng)求和返回的信息，說(shuō)明 Firefox 是不受限制的。

Preserve log 為什么不會(huì)完整保留請(qǐng)求日志

通過(guò)以上的分析會(huì)發(fā)現(xiàn)，不同瀏覽器對(duì)保留日志的處理是不一樣的。Chrome 這種處理方式在 issue 上也引發(fā)了廣泛的討論，而且還是一個(gè)歷史悠久的 issue，總結(jié)下來(lái)大致觀點(diǎn)分為兩派。

反對(duì)方：

• NetWork 出現(xiàn)的錯(cuò)誤很容易讓別人誤以為錯(cuò)誤出現(xiàn)在服務(wù)端，引起誤解
• 如果重定向發(fā)生的非?？?，用戶是很難去點(diǎn)擊鏈接的，所以還得借助第三方工具幫助
• Preserve log 有歧義，明明是保留日志，但實(shí)際的結(jié)果確沒(méi)有像 Charles 等工具一樣完整的保留日志

贊同方（chromium 開(kāi)發(fā)者）：

• 這是“l(fā)ow overhead”的結(jié)果，Response 并不會(huì)傳到 DevTools，除非用戶想要查看并點(diǎn)擊它，目的是為了避免歪曲測(cè)量結(jié)果
• 如果將所有的 Response 都保留在 DevTools，則會(huì)增加很多的不必要的內(nèi)容，如果用戶點(diǎn)擊了好多的跨站鏈接，后果不可想象
• 這是一種折中最好的方案，既兼顧了易用性，也兼顧了靈活性

兩方觀點(diǎn)各有各的的道理，但我認(rèn)為，Chrome 應(yīng)該把這個(gè)權(quán)限放開(kāi)給開(kāi)發(fā)者，因?yàn)楸緛?lái) DevTools 就是給開(kāi)發(fā)者用的，Preserve log 并沒(méi)有解決開(kāi)發(fā)者跨站請(qǐng)求需要查看原鏈接的訴求，保留日志的本意應(yīng)該是要保留所有的 Request 和 Response 信息，而不應(yīng)該做閹割版本，應(yīng)該由開(kāi)發(fā)者去控制是否開(kāi)啟這一選項(xiàng)，并承擔(dān)相應(yīng)的結(jié)果。不然有的時(shí)候還得通過(guò)第三方工具進(jìn)行抓包或者像 issue 中講到的那樣，需要在代碼層面做處理，這無(wú)疑讓一個(gè)本來(lái)很簡(jiǎn)單的功能變得復(fù)雜化。

瀏覽器廠商的改進(jìn)節(jié)奏

issue 中也有一些 Chromium 的反饋，原來(lái)認(rèn)為這個(gè)需求沒(méi)有必要做，而且優(yōu)先級(jí)比較低，17 年的時(shí)候因?yàn)閮?yōu)先級(jí)和資源問(wèn)題關(guān)閉了，但最近看好像又重啟了，狀態(tài)變成了 Open，期待之后的版本能夠改善這個(gè)問(wèn)題。

總結(jié)

以上是對(duì) Preserve log 做了一個(gè)簡(jiǎn)單的介紹，如果在開(kāi)發(fā)中真的遇到了上面的問(wèn)題，解決方案可以考慮用以下幾種方案：

1. 使用 Firefox 瀏覽器（目前貌似用的人比較少）
2. 如 issue 中所說(shuō)，通過(guò)在代碼中打點(diǎn)來(lái)進(jìn)行調(diào)試，“window.onunload = function() {debugger;}”，但實(shí)際應(yīng)用起來(lái)不太方便

     使用 Charles 等抓包工具進(jìn)行抓包