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

Dale St. Marthe
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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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