การตรวจสอบโปรโตคอล: ดูและส่งคำขอ CDP

Dale St. Marthe

ใช้เครื่องมือตรวจสอบโปรโตคอลเพื่อดูคําขอและคําตอบ CDP ทั้งหมดที่ DevTools สร้างขึ้น และส่งคําสั่ง CDP โดยตรง

ภาพรวม

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ใช้ Chrome DevTools Protocol (CDP) เพื่อวัดผล ตรวจสอบ แก้ไขข้อบกพร่อง และสร้างโปรไฟล์ของเบราว์เซอร์ Chrome นักพัฒนาแอปสามารถใช้เครื่องมือตรวจสอบโปรโตคอลเพื่อทํางานกับ CDP แบบเป็นโปรแกรมได้

เครื่องมือตรวจสอบโปรโตคอลช่วยให้คุณทําสิ่งต่อไปนี้ได้

• บันทึกคำขอและการตอบกลับ CDP
• ตรวจสอบข้อความ CDP
• บันทึกข้อความ CDP
• ส่งคำสั่ง CDP

เปิดเครื่องมือตรวจสอบโปรโตคอล

หากต้องการเปิดเครื่องมือตรวจสอบโปรโตคอล ให้ทำตามขั้นตอนต่อไปนี้

1. ตรวจสอบว่าได้เปิดใช้การทดสอบแล้ว เลือกช่องทําเครื่องหมายเครื่องมือตรวจสอบโปรโตคอลในส่วนการตั้งค่าการตั้งค่า > การทดสอบ

2. เปิดเมนูคำสั่งโดยกดแป้นต่อไปนี้

   • macOS: Command+Shift+P
   • Windows, Linux, ChromeOS: Control+Shift+P

3. เริ่มพิมพ์ Protocol monitor เลือกแสดงเครื่องมือตรวจสอบโปรโตคอล แล้วกด Enter DevTools จะแสดงแผงเครื่องมือตรวจสอบโปรโตคอลที่ด้านล่างของหน้าต่าง DevTools

หรือที่มุมขวาบน ให้เลือก more_vert ตัวเลือกเพิ่มเติม > เครื่องมือเพิ่มเติม > เครื่องมือตรวจสอบโปรโตคอล

บันทึกคำขอและการตอบกลับ CDP

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

หากต้องการหยุดหรือเริ่มบันทึก ให้คลิกปุ่มบันทึกทางด้านซ้ายของแถบการดำเนินการที่ด้านบนของแผง

ตรวจสอบข้อความ CDP

เมื่อเครื่องมือตรวจสอบโปรโตคอลบันทึก ข้อความ CDP จะบันทึกไว้ในตารางทางด้านซ้ายของแผง

คลิกเซลล์เมธอด คําขอ หรือคําตอบเพื่อเปิดมุมมองแบบละเอียดของข้อมูลคําขอหรือคําตอบทางด้านขวาของแผง

สลับระหว่างข้อมูลคําขอหรือคําตอบโดยคลิกแท็บส่วนหัวที่เกี่ยวข้อง

การคลิกขวาที่ค่าในคอลัมน์วิธีการจะแสดงตัวเลือกตามบริบท

ล้างและดาวน์โหลดข้อความ CDP

หากต้องการล้างข้อความ CDP ที่บันทึกไว้ทั้งหมด ให้คลิกปุ่มล้างบล็อกในแถบการดำเนินการ

หากต้องการดาวน์โหลดข้อความที่บันทึกไว้เป็นไฟล์ JSON ให้คลิกดาวน์โหลด download

ส่งคำสั่ง CDP ที่เป็นข้อมูลดิบ

การส่งคําสั่ง CDP ผ่านเครื่องมือตรวจสอบโปรโตคอลมี 2 วิธีหลักๆ ดังนี้

• หากคำสั่งไม่ต้องใช้พารามิเตอร์ใดๆ ให้พิมพ์คำสั่งลงในช่องป้อนข้อมูลด้านล่างของเครื่องมือตรวจสอบโปรโตคอล แล้วกดEnter เช่น Page.captureScreenshot

  หากคำสั่งต้องใช้พารามิเตอร์ ให้ระบุพารามิเตอร์ในรูปแบบ JSON เช่น {"cmd":"Page.captureScreenshot","args":{"format": "jpeg"}}

  เมนูแบบเลื่อนลงทางด้านขวาของช่องป้อนข้อมูลจะระบุเป้าหมาย

• นอกจากนี้ คุณยังใช้เครื่องมือแก้ไข CDP เพื่อแก้ไขและออกคําสั่งได้ด้วย โดยทําดังนี้

  1. เปิดเครื่องมือแก้ไขคําสั่งโดยคลิกปุ่ม left_panel_open Show CDP command editor ข้างช่องป้อนคําสั่ง
  2. เลือกเป้าหมายจากรายการแบบเลื่อนลง แล้วเริ่มพิมพ์คําสั่ง CDP ข้างพรอมต์คำสั่ง ฟีเจอร์เติมข้อความอัตโนมัติจะแสดงตัวเลือกที่เกี่ยวข้อง เลือกคำสั่งที่ต้องการใช้
  3. หลังจากป้อนคําสั่ง CDP แล้ว เครื่องมือแก้ไขจะสร้างพารามิเตอร์รูปแบบที่มีโครงสร้างตามคําจํากัดความของโปรโตคอล กรอกพารามิเตอร์เหล่านี้เพื่อส่งไปพร้อมกับคําสั่ง
  4. ส่งคําสั่งโดยคลิกปุ่มส่ง ส่งคําสั่ง หรือกด Ctrl + Enter

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับเครื่องมือแก้ไข CDP ได้ที่หัวข้อเขียนคําสั่ง Chrome Devtools Protocol (CDP) อย่างมีประสิทธิภาพด้วยเครื่องมือแก้ไขคําสั่งแบบใหม่