ฉันจะดีบัก HTTP POST ใน Chrome ได้อย่างไร

196

ฉันต้องการดูข้อมูล HTTP POST ที่ส่งใน Chrome

ข้อมูลอยู่ในหน่วยความจำตอนนี้และฉันมีความสามารถในการส่งแบบฟอร์มอีกครั้ง

ฉันรู้ว่าถ้าฉันส่งเซิร์ฟเวอร์อีกครั้งจะเกิดข้อผิดพลาดฉันสามารถดูข้อมูลที่อยู่ในหน่วยความจำของ Chrome ได้หรือไม่

google-chrome debugging post

มีตัวอย่างวิดีโอ giff ที่ดีเกี่ยวกับวิธีการ ge ไปยังแท็บเครือข่ายที่นี่: wpza.net/using-google-chrome-to-capture-post-data-in-wordpress

— WPZA

232

ไปที่เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome (เมนู Chrome -> เครื่องมือเพิ่มเติม -> เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์)
เลือกแท็บ "เครือข่าย"
รีเฟรชหน้าเว็บที่คุณเปิดอยู่
คุณจะได้รับรายการการสืบค้น http ที่เกิดขึ้นขณะที่เปิดคอนโซลเครือข่าย เลือกหนึ่งในด้านซ้าย
เลือกแท็บ "ส่วนหัว"

Voila!

— mrówa
แหล่งที่มา

74

นี่คือ GET ไม่ใช่ POST

— QkiZ

7

มันรวบรวมคำขอ GET และ POST, @QkiZ

— almulo

48

หมายเหตุ: ในการดูคำขอโพสต์ที่โหลดหน้าเว็บของคุณใหม่คุณต้องตรวจสอบ "เก็บบันทึก"

— Bryce Guinta

39

ฉันไม่พบเนื้อหาคำขอที่นี่ :-(

— Timo

3

ใน Chrome 71 ร่างกาย (เช่นข้อมูล POST-ed) จะปรากฏขึ้นที่ด้านล่างของแท็บส่วนหัวภายใต้ส่วนหัว "ขอ Payload"

— MSC

139

คุณสามารถกรองสำหรับการร้องขอ HTTP POST กับDevTools Chrome เพียงทำต่อไปนี้:

เปิด Chrome DevTools ( Cmd+ Opt+ Iบน Mac, Ctrl+ Shift+ IหรือF12Windows) แล้วคลิกที่แท็บ "เครือข่าย"
คลิกที่ไอคอน "ตัวกรอง"
ป้อนวิธีการกรองของคุณ: method:POST
เลือกคำขอที่คุณต้องการแก้ปัญหา
ดูรายละเอียดของคำขอที่คุณต้องการแก้ปัญหา

ภาพหน้าจอ

ทดสอบกับ Chrome เวอร์ชัน 53

— Benny Neugebauer
แหล่งที่มา

1

ทำงานบน Chrome 70 การกรองโดยใช้method:POSTมีประโยชน์มาก

— user1071847

14

คุณสามารถใช้Chrome รุ่น Canaryเพื่อดูคำขอน้ำหนักบรรทุกของคำขอ POST

— mihijs
แหล่งที่มา

มีลิงค์ใด ๆ สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับสิ่งนี้หรือเมื่อมีการเปลี่ยนแปลง? แก้ไข: ตอบคำถามของฉันเอง หากคุณกำลังใช้การดึงข้อมูล API, Chrome ไม่ได้จับคำขอเหล่านี้จะแสดงในแท็บ เห็นได้ชัดว่านกขมิ้นเป็นหรือจะเร็ว ๆ นี้

— virtualandy

6

ตอนนี้มันมีให้ในการสร้างมาตรฐานของโครเมี่ยม!

— Nachiketha

5

ตัวเลือกอื่นที่อาจมีประโยชน์คือเครื่องมือดีบัก HTTP เฉพาะ มีอยู่ไม่กี่ตัวฉันขอแนะนำHTTP Toolkit : โครงการโอเพนซอร์ซที่ฉันทำงานอยู่ (ใช่ฉันอาจจะลำเอียง) เพื่อแก้ปัญหาเดียวกันนี้ให้ตัวเอง

ความแตกต่างที่สำคัญคือการใช้งานและพลังงาน เครื่องมือ Chrome dev นั้นดีสำหรับสิ่งง่าย ๆ และฉันขอแนะนำให้เริ่มต้นที่นั่น แต่ถ้าคุณกำลังดิ้นรนเพื่อทำความเข้าใจข้อมูลที่นั่นและคุณต้องการคำอธิบายเพิ่มเติมหรือใช้พลังงานมากขึ้นเครื่องมือโฟกัสที่เหมาะสมจะมีประโยชน์!

สำหรับกรณีนี้มันจะแสดงเนื้อหา POST แบบเต็มที่คุณกำลังมองหาด้วยเครื่องมือแก้ไขที่เป็นมิตรและเน้น (ทั้งหมดขับเคลื่อนโดยรหัส VS ) เพื่อให้คุณสามารถขุดไปรอบ ๆ แน่นอนว่าคุณจะได้รับคำขอและส่วนหัวตอบกลับ แต่ด้วยข้อมูลเพิ่มเติมเช่นเอกสารจาก MDN ( Mozilla Developer Network ) สำหรับทุกส่วนหัวและรหัสสถานะที่คุณเห็น

รูปภาพมีค่าหนึ่งพัน StackOverflow คำตอบ:

— ทิมเพอร์รี่
แหล่งที่มา

1

ดูมีแนวโน้มมาก แต่มีปัญหาบางอย่างในเครื่องของฉันโพสต์ไว้ใน GitHub

— userlond

0

คนอื่น ๆ ให้คำตอบที่ดีมาก แต่ฉันต้องการทำงานให้เสร็จด้วยเครื่องมือพัฒนาเพิ่มเติม มันถูกเรียกว่าสดส่วนหัว HTTPและคุณสามารถติดตั้งลงในFirefoxและChromeเรามีปลั๊กอินเดียวกันเช่นนี้

การทำงานกับมันเป็นเรื่องง่าย

ใช้ Firefox ของคุณนำทางไปยังเว็บไซต์ที่คุณต้องการรับคำขอโพสต์
ในเมนู Firefox Tools-> Live Http Headers
หน้าต่างใหม่จะป๊อปอัปสำหรับคุณและรายละเอียดของวิธี HTTP ทั้งหมดจะถูกบันทึกไว้ในหน้าต่างนี้ให้คุณ คุณไม่จำเป็นต้องทำอะไรในขั้นตอนนี้
ในเว็บไซต์ให้ทำกิจกรรม (เข้าสู่ระบบส่งแบบฟอร์ม ฯลฯ )
ดูหน้าต่างปลั๊กอินของคุณ มันถูกบันทึกไว้ทั้งหมด

เพียงจำไว้ว่าคุณต้องตรวจสอบจับภาพ

— ชะแลงขนาดสั้น
แหล่งที่มา

0

มีสถานการณ์ที่ยุ่งยาก: หากคุณส่งแบบฟอร์มการโพสต์ Chrome จะเปิดแท็บใหม่เพื่อส่งคำขอ จนถึงตอนนี้ แต่ถ้าเป็นเหตุการณ์ที่ทำให้เกิดการดาวน์โหลดไฟล์แท็บนี้จะปิดทันทีเพื่อที่คุณจะไม่สามารถจับคำขอนี้ในเครื่องมือ Dev

วิธีแก้ไข: ก่อนที่จะส่งแบบฟอร์มโพสต์คุณต้องตัดเครือข่ายของคุณซึ่งทำให้การร้องขอไม่สามารถส่งได้สำเร็จเพื่อที่แท็บจะไม่ถูกปิด จากนั้นคุณสามารถจับภาพข้อความคำขอใน Chrome Devtool (รีเฟรชแท็บใหม่หากจำเป็น)

— Dcalsky
แหล่งที่มา