Alan Tsai 的學習筆記


學而不思則罔,思而不學則殆,不思不學則“網貸” 為現任微軟最有價值專家 (MVP)、微軟認證講師 (MCT) 、Blogger、Youtuber:記錄軟體開發的點點滴滴 著重於微軟技術、C#、ASP .NET、Azure、DevOps、Docker、AI、Chatbot、Data Science

[faq]如何把瀏覽器執行的request,快速建立到postman來做開發測試用

2019-08-22 Thursday
[postman]如何把瀏覽器執行的request複製,快速建立到postman來做開發測試用.jpg
圖片來源:https://pixabay.com/en/despair-alone-being-alone-archetype-513528/

近幾年拜前端蓬勃發展所賜,越來越多的網站使用前後端分離的架構。

後端只需要建立API,而前端只需要關注在畫面以及如何呼叫後端的API就好了。

這個時候,假設網站發生了錯誤,那麽怎麽樣快速建立出前端打到後臺API的方法就變得很重要。

因爲能夠快速建立出這些API的request,能夠更加容易透過改打的host而直接打到測試環境 - 更加容易debug問題出現在那邊。

更不用説,如果今天想要告知後端問題在那邊,那麽提供一個完整Request内容也可以減少溝通成本

這篇來看看如何用Chrome以及Postman搭配來達到這個效果。

模擬問題

這邊用簡單情景來模擬想要達到的效果。

首先,假設w3school的XMLHttpRequest範例的request是有問題的api:https://www.w3schools.com/js/tryit.asp?filename=tryjs_ajax_first

chrome_2019-08-25_17-20-57.png
按下的Change Content假設是有問題的api

假設這個時候發現這個api有問題,怎麽樣才能夠把這個request内容提供給後端的開發者呢?

如何取得request發送内容?

可以使用Chrome的Developer Tool (透過按下F12Ctrl+Shift+I或者選項裡面的More Tools選擇到)


More Tools 開啓 Developer Tools

在Developer Tools切換到Network標簽,然後找到那個request:

chrome_2019-08-25_17-30-06.png
找到對應的request
假設request很多,可以透過filter的方式快速過濾。舉例來説,只要看ajax可以透過選擇XHR來過濾出request類型。

對Request:

  1. 右鍵
  2. 選擇Copy
  3. 選擇Copy as cURL (Bash)
chrome_2019-08-25_17-31-35.png
複製request成爲bash可以執行的script内容

可以看到Copy還有不同的script語言,不過cURL是能夠匯入到Postman。

如果接下來不用postman,也可以選擇用別的例如Powershell來執行達到一樣的效果。

如何建立到Postman變成一個request?

有了上面取得的cURL的script之後,可以在postman用import方式加入:

  1. 選擇Import
  2. 選擇最後一個tab:Paste Raw Text
  3. 把取得的cURL貼上到輸入框
  4. 按下Import按鈕
Postman_2019-08-25_17-36-51.png
匯入request

匯入進去之後,可以看到一個request被建立出來,並且可以看到相關的Header等也一起被建立出來

Postman_2019-08-25_17-40-50.png
左邊是原本request,右邊則是匯入成爲postman的request内容

有了postman request之後,就可以很容易透過調整url的request改成打local的server來做debug了。

有遇到情況是,在chrome本來是POST,但是進入到postman變成了GET。因此有時候要注意以下,但是其他參數像是Header裡面的token都會一起過去很方便。

結語

透過能夠把發送的Request記錄下來,然後發送給工程師,可以減少掉很多溝通的時間(例如要告訴工程師點了什麽,選了什麽才產生了錯誤)。

這個也可以讓工程師作爲修改期間的測試方式,在修改好了之後也可以用這個方式驗證確保修掉了問題。


如果文章對您有幫助,就請我喝杯飲料吧
街口支付QR Code
街口支付QR Code
台灣 Pay QR Code
台灣 Pay QR Code
Line Pay 一卡通 QR Code
Line Pay 一卡通 QR Code
街口支付QR Code
支付寶QR Code
街口支付QR Code
微信支付QR Code
2019-08-22 Thursday
comments powered by Disqus