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

Hadrien Jaubert

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

ตัวอย่างเช่น นี่เป็นคําสั่ง CDP ที่แทรกกฎใหม่ที่มี ruleText ที่ระบุไว้ในสไตล์ชีตที่มี styleSheetId ที่ระบุ ณ ตําแหน่งที่ระบุโดย location

{ 
    command: 'CSS.addRule', 
    parameters: {
        styleSheetId: '2',
        ruleText:'Example', 
        location: {
            startLine: 1,
            startColumn: 1,
            endLine: 1,
            endColumn: 1
        }
    }
}

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

แถบบรรทัดคำสั่งที่ด้านล่างของเครื่องมือตรวจสอบโปรโตคอล

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

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

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

มาดูกันว่าเครื่องมือแก้ไขแบบใหม่นี้มีอะไรให้บ้างและคุณใช้ประโยชน์จากเครื่องมือนี้ได้อย่างไร

ฟีเจอร์การเติมข้อความอัตโนมัติ

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

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

พารามิเตอร์สตริงและตัวเลข

เครื่องมือแก้ไขใหม่นี้ช่วยให้คุณแก้ไขค่าของพารามิเตอร์พื้นฐานได้อย่างง่ายดาย หากต้องการเปิดเครื่องมือแก้ไข ให้คลิกไอคอน เปิดแผงด้านซ้าย ข้างอินพุตคำสั่ง

เมื่อป้อนชื่อคําสั่งแล้ว ตัวแก้ไขจะแสดงพารามิเตอร์ที่เกี่ยวข้องโดยอัตโนมัติ คุณไม่จําเป็นต้องค้นหาเอกสารประกอบเพื่อดูว่าพารามิเตอร์ใดใช้กับคําสั่งใด นอกจากนี้ เครื่องมือแก้ไขจะแสดงพารามิเตอร์ตามลําดับที่กำหนด โดยแสดงพารามิเตอร์ที่ต้องระบุก่อน (สีแดง) แล้วตามด้วยพารามิเตอร์ที่ไม่บังคับ (สีน้ำเงิน)

หากต้องการเพิ่มค่าลงในพารามิเตอร์ที่ไม่บังคับ ให้วางเมาส์เหนือชื่อพารามิเตอร์แล้วคลิกปุ่ม + หากต้องการรีเซ็ตพารามิเตอร์เป็น "ไม่ระบุ" ให้คลิกปุ่มรีเซ็ตเป็นค่าเริ่มต้น

ปุ่ม + และ "รีเซ็ตเป็นค่าเริ่มต้น"

พารามิเตอร์ enum และบูลีน

เมื่อแก้ไขพารามิเตอร์ Enum หรือบูลีน คุณจะเห็นเมนูแบบเลื่อนลงที่มีตัวเลือกค่าที่เป็นไปได้ (สําหรับ Enum) หรือตัวเลือก "จริง" หรือ "เท็จ" ที่ตรงไปตรงมาสําหรับบูลีน ฟีเจอร์นี้ช่วยลดโอกาสในการพิมพ์ค่าที่ไม่ถูกต้องสำหรับพารามิเตอร์ enum รวมถึงคงความถูกต้องและความเรียบง่ายไว้

เมนูแบบเลื่อนลงบูลีนและเอ็นเทม

พารามิเตอร์อาร์เรย์

สําหรับพารามิเตอร์อาร์เรย์ คุณสามารถเพิ่มค่าลงในอาร์เรย์ด้วยตนเองได้ วางเมาส์เหนือแถวของพารามิเตอร์ แล้วคลิกปุ่ม +

ปุ่ม + ที่เพิ่มรายการอาร์เรย์

หากต้องการลบรายการอาร์เรย์ทีละรายการ ให้คลิกปุ่มถังขยะข้างรายการ นอกจากนี้ คุณยังล้างพารามิเตอร์ทั้งหมดออกจากอาร์เรย์ได้ด้วยปุ่มบล็อก ในกรณีนี้ ระบบจะรีเซ็ตพารามิเตอร์อาร์เรย์เป็น []

ปุ่ม "ลบพารามิเตอร์" และ "รีเซ็ตเป็นค่าเริ่มต้น"

พารามิเตอร์ออบเจ็กต์

เมื่อป้อนคําสั่งที่ยอมรับพารามิเตอร์ออบเจ็กต์ ตัวแก้ไขจะแสดงคีย์ของออบเจ็กต์นี้และคุณสามารถแก้ไขค่าได้โดยตรง ซึ่งใช้ได้กับพารามิเตอร์ที่ฝังทุกประเภท

พารามิเตอร์ที่ฝังอยู่

ดูว่าคําสั่งและพารามิเตอร์ทํางานอย่างไรในเครื่องมือแก้ไข

คุณเคยไม่แน่ใจเกี่ยวกับวัตถุประสงค์ของพารามิเตอร์หรือคําสั่งไหม ตอนนี้คุณสามารถวางเมาส์เหนือคําสั่งหรือพารามิเตอร์แล้วเคล็ดลับเครื่องมือที่อธิบายจะปรากฏขึ้นพร้อมลิงก์ไปยังเอกสารประกอบออนไลน์

เคล็ดลับเครื่องมือที่อธิบายซึ่งปรากฏขึ้นเมื่อคุณวางเมาส์เหนือคำสั่ง

โปรดระวังก่อนส่งพารามิเตอร์ที่ไม่ถูกต้อง

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

ไอคอนข้อผิดพลาดข้างพารามิเตอร์ที่มีค่าไม่ถูกต้อง

ส่งคำสั่งอีกครั้ง

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

เมนูแบบเลื่อนลงของคําสั่งในตารางข้อมูลที่มีตัวเลือก "แก้ไขและส่งอีกครั้ง"

คัดลอกคําสั่งเป็นรูปแบบ JSON

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

บทสรุป

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

ดาวน์โหลดแชแนลตัวอย่าง

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

ติดต่อทีมเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

ใช้ตัวเลือกต่อไปนี้เพื่อพูดคุยเกี่ยวกับฟีเจอร์ใหม่ การอัปเดต หรือสิ่งอื่นๆ ที่เกี่ยวข้องกับเครื่องมือสำหรับนักพัฒนาเว็บ