ขอการตรวจสอบใน Chrome


208

ใน Firefox ฉันใช้ Firebug ซึ่งทำให้ฉันสามารถดูการร้องขอ http ทุกครั้งที่โทร ajax ของฉันได้ ฉันได้เปลี่ยนการพัฒนาเป็น Chrome และฉันชอบมันมาก อย่างไรก็ตามข้อร้องเรียนเพียงอย่างเดียวของฉันคือเครื่องมือของนักพัฒนาซอฟต์แวร์ดูเหมือนจะไม่อนุญาตให้คุณดูคำขอ ajax แต่ละรายการ ฉันเคยเกิดขึ้นหนึ่งครั้งที่แผงทรัพยากรแสดงคำขอหลายครั้งไปยังทรัพยากรเดียวกัน แต่ทำเพียงครั้งเดียวและไม่เคยทำซ้ำอีกเลย

มีวิธีที่จะดูคำขอ HTTP ทุกครั้งที่หน้าเว็บทำผ่านจาวาสคริปต์จากใน Chrome หรือไม่

[แก้ไข: 11/30/09 11:55]

ขณะนี้เพื่อให้ได้สิ่งนี้ฉันใช้ Fiddler ถัดจาก Chrome เพื่อดูคำขอของฉัน แต่ถ้ามีวิธีที่จะทำได้จากภายในเบราว์เซอร์ฉันต้องการมัน


2
ฉันมีปัญหาเดียวกัน - ได้ลองวิธีแก้ปัญหาทั้งหมดที่นี่ ไม่มีสิ่งใดปรากฏในส่วน Response ของหน้าต่าง XHR ในเครื่องมือ dev มันเพิ่งแสดง "คำขอนี้ไม่มีข้อมูลการตอบกลับ" หากฉันเรียกใช้รหัสเดียวกันโดยใช้ firebug มันจะแสดงผลดี ในการตั้งค่าเครื่องมือ cog dev ฉันได้ลองทำเครื่องหมาย "บันทึก XMLHttpRequest" แต่นี่ไม่ได้ช่วย (ประเภทการตอบสนองคือ application / json) ฉันต้องทำการดีบักทั้งหมดใน firebug Firebug ยังจัดรูปแบบ JSON เป็นอย่างดีเครื่องมือ Chrome dev ไม่สามารถใช้เพื่อแสดงการตอบสนอง (เช่นโดยไม่ใช้ ajax)
John Little

คำตอบ:


359

ฉันรู้ว่านี่เป็นด้ายเก่า แต่ฉันคิดว่าฉันจะพูดสอด

ปัจจุบัน Chrome มีโซลูชันในตัว

  1. ใช้CTRL+SHIFT+I(หรือไปที่Current Page Control > Developer > Developer Toolsใน Chrome รุ่นใหม่กว่าให้คลิกที่ไอคอนประแจ> เครื่องมือ> เครื่องมือสำหรับนักพัฒนา) เพื่อเปิดใช้งานเครื่องมือสำหรับนักพัฒนา
  2. จากภายในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ให้คลิกที่Networkปุ่ม หากยังไม่ได้เปิดใช้งานสำหรับเซสชันหรือตลอดเวลา
  3. คลิกที่ปุ่ม"XHR"ย่อย
  4. AJAX callเริ่มต้นการ
  5. "Resources"คุณจะเห็นรายการเริ่มต้นที่จะแสดงขึ้นในคอลัมน์ด้านซ้ายใต้
  6. คลิกทรัพยากรและมี 2 แท็บที่แสดงส่วนหัวและส่งคืนเนื้อหา

2
ขอบคุณ Phil! ฉันได้วางมันไว้และพึ่งพาอาศัยพู้ทำเล่นเป็นส่วนใหญ่ แต่ปุ่ม XHR นั้นเป็นสิ่งที่ฉันกำลังมองหา: D
Wes P

เมื่อวานฉันเพิ่งพูดว่าถ้าเครื่องมือโครเมี่ยมสามารถทำสิ่งนี้ได้มันจะสมบูรณ์แบบขอบคุณ
GermánRodríguez

3
สวัสดีทุกคนลองหาปุ่ม "XHR sub-button" ฉันคิดว่าฉันอาจจะพลาดมันมีคนบอกฉันได้ไหมว่าที่ไหน นี่คือสิ่งที่ผู้ตรวจสอบของฉันดูเหมือนimgur.com/9e6yDcB
เดวิดวิลเลียมส์

2
สิ่งนี้ดูเหมือนว่าจะเกิดขึ้นหากการโทร AJAX ได้รับการตอบกลับ แต่จะไม่แสดงการร้องขอขาออกที่อาจไม่คาดหวังการตอบกลับ มีใครรู้วิธีเปิดใช้งานหรือไม่
MoMo

1
หากหน้าเปลี่ยนเส้นทางในหน้าต่างเดียวกันคุณสามารถใช้ช่องทำเครื่องหมาย 'บันทึกการเก็บรักษา' ที่ด้านบนของตัวเลือกแท็บเครือข่าย (หากไม่ใช่คุณสามารถเปลี่ยนลิงค์นั้นเพื่อเปิดในหน้าต่างเดียวกันได้โดยการตั้งค่าtarget='_self') จากนั้นตัวอย่างเช่นคุณสามารถเห็นการตอบสนองจากแบบฟอร์มที่ส่งมาหลังจากที่เปลี่ยนเส้นทางคุณ ตรวจสอบให้แน่ใจว่าได้สังเกตเห็นตัวกรองว่าการตอบสนองเกิดขึ้นเมื่อโหลดหน้าใหม่
JeremyS

57

คำตอบที่เป็นปัจจุบันที่สุดคือ: คำตอบเหล่านี้จะแสดงรายการภายใต้ปุ่ม 'เครือข่าย' ในเครื่องมือสำหรับนักพัฒนาและไม่อยู่ภายใต้ 'ทรัพยากร' อย่างที่เคยเป็น


5
ที่จริงมันอยู่ที่ไหนตอนนี้เอาฉันค้นหากองล้นเพื่อค้นหาหลังจากอัพเกรด
Kzqai

42

ปรับปรุง

Chrome เปลี่ยนวิธีตรวจสอบคำขอและแนะนำให้ใช้Catapult Netlog Viewerกับบันทึกที่ส่งออกจากchrome: // net-export /

chrome://net-export/

ข้อมูลเพิ่มเติม

Chrome รุ่นเก่า

นอกจากนี้คุณยังสามารถใช้ลิงก์นี้ใน Chrome เพื่อดูข้อมูลโดยละเอียดมากกว่าที่ผู้ตรวจสอบทำ

chrome://net-internals/#events

นี่จะแสดงบันทึกของคำขอทั้งหมดของเบราว์เซอร์ขณะที่เปิด


คุณส่งออกได้ไหม
Pacerier

14

ไม่ทราบว่ามีรุ่นใดพร้อมใช้งานใน Chrome แต่ฉันพบการตั้งค่า 'คอนโซล - บันทึก XMLHttpRequests' (คลิกที่ไอคอนที่มุมล่างขวาของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ใน chrome บน mac)


3
นี่เป็นวิธีที่ง่ายที่สุดและดีที่สุดในการตรวจสอบคำขอ XHR
CourtDemone

6

เปิด DevTools ของคุณและกด F1 เพื่อเข้าถึงการตั้งค่า ค้นหาส่วนคอนโซลและทำเครื่องหมายที่ช่องทำเครื่องหมาย "Log XMLHttpRequests"

ตอนนี้อาแจ็กซ์ของคุณและคำขออื่น ๆ ที่คล้ายกันจะถูกบันทึกไว้ในคอนโซล

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


4

คุณสามารถใช้Fiddlerซึ่งเป็นเครื่องมือฟรีที่ดี


1
ใช่ฉันมีพู้ทำเล่นซึ่งเป็นสิ่งที่ฉันใช้ในการทำเช่นนี้ เพียงมองหาวิธีที่จะทำได้จากภายในเบราว์เซอร์เพราะสะดวกกว่า
Wes P

3

ขอบคุณทุกคนที่พยายามช่วยในโพสต์นี้

ฉันมีอูบุนตู 13.10 และรุ่น chrome คือ 34.0

สำหรับสถานการณ์ของฉันนี้ใช้งานได้

1.open developer tools in chrome(or use right click on your page and then select inspect element)
2.go to "Network" tab
3.find your ajax request in "Name Path" column 
4.click on the specific ajax link

ตอนนี้คุณควรเห็นแผงใหม่ต่อหน้าคุณร้องขอ

in this panel select "Response" tab

1

ในขั้นตอนที่ 5 ของ Phil "ทรัพยากร" ไม่สามารถใช้ได้ใน Chrome เวอร์ชันใหม่อีกต่อไป คุณต้องคลิกที่ไอคอนหน้าข้างอาแจ็กซ์หน้ารายการในบานหน้าต่างด้านล่างที่มีคอลัมน์ชื่อวิธีการสถานะ ...

จากนั้นจะแสดงพาเนลเพิ่มเติมที่คุณจะพบข้อความแสดงข้อผิดพลาด


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