ใช้เครื่องมือตรวจสอบโปรโตคอลเพื่อดูคำขอและคำตอบ CDP ทั้งหมดที่สร้างโดยเครื่องมือสำหรับนักพัฒนาเว็บและส่งคำสั่ง CDP โดยตรง
ภาพรวม
เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ใช้โปรโตคอลเครื่องมือสำหรับนักพัฒนาเว็บ (CDP) ของ Chrome เพื่อกำหนดเครื่องมือ ตรวจสอบ แก้ไขข้อบกพร่อง และสร้างโปรไฟล์เบราว์เซอร์ Chrome นักพัฒนาซอฟต์แวร์ใช้การตรวจสอบโปรโตคอลเพื่อทำงานกับ CDP แบบเป็นโปรแกรมได้
เครื่องมือตรวจสอบโปรโตคอลช่วยให้คุณทำสิ่งต่อไปนี้ได้
- บันทึกคำขอและการตอบกลับ CDP
- ตรวจสอบข้อความ CDP
- บันทึกข้อความ CDP
- ส่งคำสั่ง CDP
เปิดเครื่องมือตรวจสอบโปรโตคอล
หากต้องการเปิดเครื่องมือตรวจสอบโปรโตคอล ให้ทำตามขั้นตอนต่อไปนี้
โปรดตรวจสอบว่าเปิดใช้การทดสอบแล้ว เลือกช่องทำเครื่องหมายการตรวจสอบโปรโตคอลใต้การตั้งค่าการตั้งค่า > การทดสอบ
เปิดเมนูคำสั่งโดยกด
- สำหรับ macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
เริ่มพิมพ์
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 เพื่อแก้ไขและออกคำสั่งต่อไปนี้ได้
- เปิดตัวแก้ไขคำสั่งโดยคลิกปุ่ม left_panel_open แสดงตัวแก้ไขคำสั่ง CDP ข้างช่องป้อนข้อมูลคำสั่ง
- เลือกเป้าหมายจากรายการแบบเลื่อนลง แล้วเริ่มพิมพ์คำสั่ง CDP ถัดจาก Command Prompt การเติมข้อความอัตโนมัติมีตัวเลือกที่เกี่ยวข้องให้กับคุณ เลือกคำสั่งที่ต้องการใช้
- หลังจากที่คุณป้อนคำสั่ง CDP ตัวแก้ไขจะสร้างรูปแบบโครงสร้างของพารามิเตอร์ตามคำจำกัดความของโปรโตคอล กรอกพารามิเตอร์เหล่านี้เพื่อส่งด้วยคำสั่ง
- ส่งคำสั่งโดยคลิกที่ปุ่ม send SendCommand หรือกด Ctrl + Enter
คุณยังแก้ไขและส่งคำสั่งอีกครั้งจากตารางได้ด้วย คลิกขวาที่รายการในตาราง แล้วเลือก "แก้ไขและส่งอีกครั้ง" จากเมนูแบบเลื่อนลง ซึ่งจะเปิดเครื่องมือแก้ไข CDP อีกครั้งโดยอัตโนมัติและป้อนข้อมูลล่วงหน้าด้วยคำสั่งที่คุณเ��ือก
โปรดดูข้อมูลเพิ่มเติมเกี่ยวกับเครื่องมือแก้ไข CDP ที่หัวข้อปรับแต่งคำสั่งของ Chrome Devtools Protocol (CDP) อย่างมีประสิทธิภาพด้วยเครื่องมือแก้ไขคำสั่งใหม่