Site icon 134340號小行星

主流瀏覽器開發者工具的 3 個請求技巧(Chrome, Firefox, Edge)

自從工作以後特別深刻體會到相容性三個字是有多麼可怕的一件事… 我們都知道 iOS 和 Android 會有相容性問題,但其實瀏覽器之間也會,有些功能我用 Chrome 來輔助開發時測試一切正常,但 Firefox 卻沒法使用,最後只好換一個方案來解決。所以一個前端工程師對不同的瀏覽器有一定的熟悉程度我認為是有必要的一件事,那接下來我就會介紹幾個 Chrome, Firefox 和 Edge 都共有的 API 請求技巧。

重新發送請求

在不知道這個技巧之前,如果我需要重新請求 API 再次獲取數據時,我最常做的做法就是刷新頁面,但這會讓整個頁面所有需要呼叫的 API 都重新呼叫一次,浪費時間也沒必要,所以針對單獨的 API 進行重新發送請求是非常有必要的。

經過測試,目前主流的瀏覽器都有支援這項功能,我就以 Chrome, Firefox Edge 來做示範,使用方式大同小異。

Chrome

我們可以拿 Netflix 首頁的 API 來測試,首先開啟開發者工具(Ctrl + Shift + I 或者 F12),接著選 Network -> Fetch/XHR,選中想要重新呼叫的請求後按右鍵 – Replay XHR

Network – Fetch/XHR
chrome replay xhr

Firefox

以 Bilibili 首頁來測試,跟 Chrome 基本上一樣的操作,不過火狐比 Chrome 多了一個「編輯並重新發送」的選項,就是說火狐可以直接在開發者工具重新編寫請求內容再次發送。但這不代表 Chrome 不行,下一節我就會提到 Chrome 編輯並重新發送的技巧。

firefox replay xhr
firefox edit and replay xhr

Edge

跟 Chrome 和 Firefox 都是一模一樣的操作,在這邊就不多提了。

值得一提的是,Edge 的編輯重新發送功能簡直就是直接在開發者工具中塞了一個 Postman,你可以直接修改query、body、auth 和 headers… 等,非常好用。

在控制台發送請求

剛剛前面有提到,Firefox 和 Edge 都自帶了一鍵編輯和再次請求的功能,但 Chrome 沒有,所以如果是使用 Chrome 的話也是有替代方案的。

先右鍵選中要再次請求的請求並選擇 Copy – Copy as fetch,將 fetch 請求的程式碼複製起來:

切到 Console 控制台的標籤,將 fetch code 貼上,如果需要直接在控制台獲取 response 的話記得要接一個 then 並且打印回傳的內容:

這個功能火狐和 Edge 也是有的,方法一模一樣就不再演示。

調整網速或關閉網路(節流)

有時候我會有那麼一個需求,在資料未加載完成之前加上一個 loading 轉圈圈的動畫,但有時資料太少或網速太快我沒辦法確認這個 loading 動畫到底有沒有正確出現;又或者說我的頁面有需要定時呼叫一些請求,但我暫時只是要掛在頁面上並不想讓他一直呼叫,就可以將節流模式設為 offline。這可以依照個人需求去做調整。

Chrome

Chrome 預設提供了 Fast 3G, Slow 3G, offline 三種模式,如果預設的這幾種沒辦法滿足你的需求也可以自定義。

在 Network 上方工具欄有一個 No throttling 字樣的下拉選單,可以選擇 Add... 來自定義節流模式:

自定義的內容包括下載速度、上傳速度以及延遲

Firefox

火狐也有節流模式,預設提供八種模式,不過貌似沒提供離線及自定義。

如果需要在火狐上使用離線模式,可以在標籤頁的地方按右鍵選單列打勾:

在左上方找到檔案-離線模式即可:

Edge

Edge 和 Chrome 是一模一樣的,就不再演示了:

總結

除了以上介紹的三個功能之外,瀏覽器自帶的開發者工具其實還有很多很多可以挖掘的部分,如果讓我一整天都拿來研究可能都研究不完全部的功能,有興趣的朋友可以自己多去研究一下,說不定能在實際開發中幫助你提升開發效率。

另外針對這三個瀏覽器來說,我個人最熟悉的還是 Chrome,實際開發時我更偏向使用 Firefox。但為了這篇文章測試三個瀏覽器之間的功能時,我發現 Edge 是一匹黑馬,具有 Chrome 的功能且又封裝了一些更為實用的功能在裡面,有種萬能寶箱或者說大雜燴的感覺… 也許有一天我會換成用 Edge 來開發也說不定。

Exit mobile version