Chrome DevTools Protocol (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 ไปยังคลิปบอร์ด ให้คลิกไอคอนคัดลอก 
ทางด้านซ้ายสุดของแถบเครื่องมือ นอกจากนี้ โปรดทราบว่าหากคุณป้อนคำสั่งลงในแถบอินพุตโดยตรง คำสั่งนั้นจะสร้างตัวแก้ไขได้โดยไม่มีสะดุด และในทางกลับกัน
บทสรุป
เป้าหมายของการออกแบบเครื่องมือแก้ไข CDP ของทีมเครื่องมือสำหรับนักพัฒนาเว็บใหม่นี้คือการลดความซับซ้อนของการพิมพ์คำสั่ง CDP นอกจากนี้ คุณยังใช้ตัวแก้ไขใหม่เพื่อดูพารามิเตอร์ควบคู่กับเอกสารประกอบและส่งคำสั่ง CDP ได้ง่ายขึ้นอีกด้วย
ดาวน์โหลดช่องตัวอย่าง
ลองใช้ Chrome Canary, Dev หรือเบต้าเป็นเบราว์เซอร์สำหรับการพัฒนาเริ่มต้น ตัวอย่างช่องทางเหล่านี้จะช่วยให้คุณสามารถเข้าถึงฟีเจอร์ล่าสุดของเครื่องมือสำหรับนักพัฒนาเว็บ ทดสอบ API แพลตฟอร์มเว็บที่ล้ำสมัย และค้นหาปัญหาในเว็บไซต์ก่อนที่ผู้ใช้จะทำงานได้
ติดต่อทีมเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
ใช้ตัวเลือกต่อไปนี้เพื่อพูดคุยเกี่ยวกับฟีเจอร์ใหม่ๆ และการเปลี่ยนแปลงในโพสต์หรือเรื่องอื่นๆ ที่เกี่ยวข้องกับเครื่องมือสำหรับนักพัฒนาเว็บ
- ส่งคำแนะนำหรือความคิดเห็นถึงเราผ่าน crbug.com
- รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บโดยใช้ตัวเลือกเพิ่มเติม
> ความช่วยเหลือ > รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บในเครื่องมือสำหรับนักพัฒนาเว็บ - ทวีตที่ @ChromeDevTools
- แสดงความคิดเห็นเกี่ยวกับ "มีอะไรใหม่ในวิดีโอ YouTube สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ" หรือเคล็ดลับเครื่องมือสำหรับนักพัฒนาเว็บวิดีโอ YouTube