แก้ไขและเล่นซ้ำ XHR chrome / firefox ฯลฯ หรือไม่


144

ฉันกำลังมองหาวิธีที่จะแก้ไขคำขอ XHR ที่ทำในเบราว์เซอร์ของฉันแล้วเล่นซ้ำอีกครั้ง สมมติว่าฉันมีคำขอ POST ที่สมบูรณ์ในเบราว์เซอร์ของฉันและสิ่งเดียวที่ฉันต้องการเปลี่ยนคือค่าเล็กน้อยจากนั้นเล่นอีกครั้ง นี่จะง่ายกว่าและเร็วกว่ามากที่จะทำในเบราว์เซอร์โดยตรง

ฉันใช้ google ไปรอบ ๆ และไม่พบวิธีการทำเช่นนี้ใน Chrome หรือ Firefox มีวิธีที่จะทำในเบราว์เซอร์อย่างใดอย่างหนึ่งหรืออาจจะเป็นอีกวิธีหนึ่งหรือไม่


หากคุณลงจอดที่นี่หลังจากตระหนักว่า "Replay XHR" ไม่ทำงานใน Chrome โปรดทราบว่าในกรณีที่มีOPTIONSคำขอpreflight ( ) คุณต้องคลิก 'เล่นซ้ำ' ในคำขอpreflightไม่ใช่คำขอสุดท้ายจริง
Janaka Bandara

คำตอบ:


181

โครเมียม :

  • ในแผงเครือข่ายของ devtools คลิกขวาและเลือกคัดลอกเป็น cURL
  • วาง / แก้ไขคำขอแล้วส่งจากเทอร์มินัลสมมติว่าคุณมีcurlคำสั่ง

ดูการจับภาพ:

ป้อนคำอธิบายรูปภาพที่นี่

อีกทางเลือกหนึ่งและในกรณีที่คุณต้องการส่งคำขอในบริบทของเว็บเพจให้เลือก"คัดลอกเป็นการดึงข้อมูล"และแก้ไขส่งเนื้อหาจากแผงคอนโซลของจาวาสคริปต์


Firefox:

Firefox อนุญาตให้แก้ไขและส่ง XHR ได้จากแผงเครือข่าย จับด้านล่างมาจาก Firefox 36:

ป้อนคำอธิบายรูปภาพที่นี่


นี่อาจเป็นสิ่งที่ฉันกำลังมองหา ฉันรู้ว่าฉันสามารถคัดลอกการเรียก cURL แต่ฉันไม่สามารถเรียกใช้จากเทอร์มินัลของฉันได้โดยตรงเนื่องจากฉันจะได้รับการรับรองความถูกต้อง แต่ด้วยเทอร์มินัลสร้างตรงไปที่ Chorme ฉันคิดว่าการโทรนั้นทำจาก "ภายใน" เบราว์เซอร์ ถ้าเป็นเช่นนั้นสิ่งนี้ควรประทับตราข้อตกลง
madsobel

14
ฉันเพิ่มข้อมูลเกี่ยวกับ Firefox ในคำตอบ
Michael P. Bazos

เคล็ดลับเล็ก ๆ : หากคุณต้องการเห็น cURL output ในเบราว์เซอร์ให้รันใน CLI เช่นนี้curl ... > preview.htmlจากนั้นเปิดไฟล์ในเบราว์เซอร์
afilina

@afilina เพื่อทำให้กระบวนการนี้เป็นไปโดยอัตโนมัติยิ่งขึ้นคุณสามารถเพิ่ม&& open preview.htmlบน macOS และไฟล์จะเปิดขึ้นโดยตรงหลังจากการร้องขอ
CodeBrauer

2
ในกรณีนี้ Firefox กำลังทำผลงานได้ดีกว่ามาก!
jpenna

41

ตอนนี้ Chrome มีการคัดลอกเป็นการดึงข้อมูลในเวอร์ชัน 67:

คัดลอกเป็นการดึงข้อมูล

คลิกขวาที่คำขอเครือข่ายแล้วเลือกคัดลอก> คัดลอกเป็นดึงเพื่อคัดลอกfetch()รหัสที่เทียบเท่าสำหรับคำขอนั้นไปยังคลิปบอร์ดของคุณ

https://developers.google.com/web/updates/2018/04/devtools#fetch

ตัวอย่างผลลัพธ์:

fetch("https://stackoverflow.com/posts/validate-body", {
  credentials: "include",
  headers: {},
  referrer: "https://stackoverflow.com/",
  referrerPolicy: "origin",
  body:
    "body=Chrome+now+has+_Copy+as+fetch_+in+version+67%3A%0A%0A%3E+Copy+as+fetch%0ARight-click+a+network+request+then+select+**Copy+%3E+Copy+As+Fetch**+to+copy+the+%60fetch()%60-equivalent+code+for+that+request+to+your+clipboard.%0A%0A&oldBody=&isQuestion=false",
  method: "POST",
  mode: "cors"
});

ความแตกต่างคือการคัดลอกเป็น cURLจะรวมส่วนหัวของคำขอทั้งหมด (เช่นคุกกี้และยอมรับ) และเหมาะสำหรับการเล่นซ้ำการร้องขอนอก Chrome fetch()รหัสเหมาะสำหรับภายใน replaying ของเบราว์เซอร์เดียวกัน


6
ขอบคุณสำหรับสิ่งนี้. สำหรับคนอื่นที่สงสัย - คุณสามารถวางfetchคำสั่งได้โดยตรงในคอนโซล Chrome และเล่นซ้ำคำขอ
Eric Kigathi

7
คุณสามารถใช้ข้อมูลต่อไปนี้หลังจากดึงข้อมูลเพื่อแก้ไขสัญญาที่ส่งคืนโดยดึงข้อมูลและดูเนื้อหาการตอบสนอง (สมมติว่าเป็น JSON).then(r => r.json()).then(json => console.log(json))
เป็นไปตาม POSIX

1
@Josh Lee ฉันคิดว่าเคล็ดลับของ POSIX-compliant นั้นดีและสามารถเพิ่มในคำตอบนี้ได้
Nabi KAZ

@ POSIX ที่สอดคล้องกับเคล็ดลับที่ดีมีคำสั่งที่เล็กกว่านี้ที่สามารถจำได้ไหม
Nabi KAZ

สำหรับผู้ที่สงสัยว่าจะวางรหัสดึงข้อมูล: วางและปรับเปลี่ยนที่คอนโซล
dotista2008

20

คำแนะนำสองข้อของฉัน:

  1. Postman ปลั๊กอินของ Chromeด้าน + Interceptor ปลั๊กอินบุรุษไปรษณีย์ ข้อมูลเพิ่มเติม: บุรุษไปรษณีย์จับเอกสารคำขอ

  2. หากคุณใช้ Windows ตัวเลือกของ Fiddler ของ Telerik เป็นตัวเลือก มีตัวเลือกผู้แต่งเพื่อเล่นคำขอ HTTP อีกครั้งและฟรี


8
ตั้งแต่ฉันเริ่มใช้ส่วนขยายโครเมี่ยม Postman + the Interceptor ฉันไม่จำเป็นต้องมี Fiddler
กระทู้ที่

3
FYI แอปบุรุษไปรษณีย์สำหรับ Chrome จะเลิกตอนนี้และการตั้งค่านี้ในรุ่นแบบสแตนด์อโลนเป็นบิตยาก
yefrem

ขอบคุณมากสิ่งที่ฉันกำลังมองหา!
Mohammad


4

สำหรับ Firefox ปัญหาแก้ไขตัวเอง มันมีคุณสมบัติ "แก้ไขและส่งซ้ำ"

สำหรับส่วนขยายของ Chrome Tamperดูเหมือนจะทำเคล็ดลับ


ซึ่งไม่ได้อัพเดทอีกแล้วและมีรีวิวค่อนข้างแย่ ทางเลือกที่ดีที่สุดคือการใช้ Firefox สำหรับงานประเภทนี้
T3rm1

ใช่. ดูเหมือนว่าสถานการณ์การส่งใหม่จะเปลี่ยนไปค่อนข้างเร็ว ตอนนี้ Chrome มีคำขอส่งซ้ำ XHR แต่ไม่อนุญาตให้แก้ไข
Jari Turkia

ระวัง Firefox ver.76 ที่ดูเหมือนว่ามีปัญหากับ CSRF-token ในคุกกี้เมื่อทำการแก้ไขและส่งซ้ำ การทดลองใช้ ver 37 ทำงานได้ดี แต่ด้วย ver76 มีปัญหาการตรวจสอบโทเค็น CSRF
puppyceceyoyo

1

5 ปีที่ผ่านมาและข้อกำหนดที่สำคัญนี้ไม่ได้รับการปฏิเสธโดยผู้พัฒนา Chrome
แม้ว่าพวกเขาจะไม่มีวิธีแก้ไขข้อมูลเช่นเดียวกับใน Firefox แต่ก็มีการเล่นซ้ำ XHR เต็มรูปแบบ
ซึ่งอนุญาตให้ดีบักการโทร ajax "Replay XHR" จะทำซ้ำการส่งทั้งหมด
ป้อนคำอธิบายรูปภาพที่นี่


0

มีสองสามวิธีในการทำเช่นนี้ตามที่กล่าวข้างต้น แต่ในประสบการณ์ของฉันวิธีที่ดีที่สุดในการจัดการคำขอ XHR และส่งใหม่คือการใช้เครื่องมือ dev dev ของ Chrome เพื่อคัดลอกคำขอเป็นคำขอ cURL (คลิกขวาที่คำขอในแท็บเครือข่าย ) และเพียงนำเข้าแอพบุรุษไปรษณีย์ (ปุ่มนำเข้าขนาดใหญ่ที่มุมบนซ้าย)


0

ไม่จำเป็นต้องติดตั้งส่วนขยายของบุคคลที่สาม!

มีjavascript-snippet อยู่แล้วซึ่งคุณสามารถเพิ่มเป็นเบราว์เซอร์บุ๊กมาร์กจากนั้นเปิดใช้งานบนไซต์ใดก็ได้เพื่อติดตามและแก้ไขคำขอ ดูเหมือนว่า:

ป้อนคำอธิบายรูปภาพที่นี่

สำหรับคำแนะนำเพิ่มเติมโปรดอ่านหน้า GitHub

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.