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

Dale St. Marthe
Dale St. Marthe

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

ภาพรวม

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

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

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

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

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

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

  2. เปิดเมนูคำสั่งโดยกด

    • สำหรับ macOS: Command+Shift+P
    • Windows, Linux, ChromeOS: Control+Shift+P เมนูคำสั่งที่มี
  3. เริ่มพิมพ์ Protocol monitor เลือกแสดงการตรวจสอบโปรโตคอล แล้วกด Enter เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงแผงเครื่องมือตรวจสอบโปรโตคอลที่ด้านล่างของหน้าต่างเครื่องมือสำหรับนักพัฒนาเว็บ

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

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

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

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

ปุ่มบันทึกในแผงตรวจสอบโปรโตคอล

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

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

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

วิธีการที่มีการไฮไลต์ในแผงการตรวจสอบโปรโตคอล

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

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

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

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

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

ส่งคำสั่ง CDP ดิบ

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

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

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

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

ไฮไลต์เมนูแบบเลื่อนลง "เป้าหมาย" ในเครื่องมือตรวจสอบโปรโตคอล

  • คุณใช้ตัวแก้ไข CDP เพื่อแก้ไขและออกคำสั่งต่อไปนี้ได้

    1. เปิดตัวแก้ไขคำสั่งโดยคลิกปุ่ม left_panel_open แสดงตัวแก้ไขคำสั่ง CDP ข้างช่องป้อนข้อมูลคำสั่ง
    2. เลือกเป้าหมายจากรายการแบบเลื่อนลง แล้วเริ่มพิมพ์คำสั่ง CDP ถัดจาก Command Prompt การเติมข้อความอัตโนมัติมีตัวเลือกที่เกี่ยวข้องให้กับคุณ เลือกคำสั่งที่ต้องการใช้ อินพุตคำสั่งในการตรวจสอบโปรโตคอล
    3. หลังจากที่คุณป้อนคำสั่ง CDP ตัวแก้ไขจะสร้างรูปแบบโครงสร้างของพารามิเตอร์ตามคำจำกัดความของโปรโตคอล กรอกพารามิเตอร์เหล่านี้เพื่อส่งด้วยคำสั่ง อินพุตพารามิเตอร์ที่มีพารามิเตอร์ที่เกี่ยวข้องกับ Service Worker ที่ระบุไว้สำหรับการกรอกข้อมูล
    4. ส่งคำสั่งโดยคลิกที่ปุ่ม send SendCommand หรือกด Ctrl + Enter

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

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