มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ (Chrome 72)

Kayce Basques

ฟีเจอร์ใหม่และการเปลี่ยนแปลงที่สำคัญของ Chrome DevTools ใน Chrome 72 ได้แก่

• แสดงภาพเมตริกประสิทธิภาพในแผงประสิทธิภาพ
• ไฮไลต์โหนดข้อความในแผนผัง DOM
• คัดลอกเส้นทาง JS จากโหนด DOM จากแผนผัง DOM
• การอัปเดตแผงการตรวจสอบ รวมถึงการตรวจสอบใหม่ที่ตรวจหาไลบรารี JS และคีย์เวิร์ดใหม่สำหรับ เข้าถึงแผงการตรวจสอบได้จากเมนูคำสั่ง

เวอร์ชันวิดีโอของบันทึกประจำรุ่นเหล่านี้

แสดงภาพเมตริกประสิทธิภาพ

หลังจากบันทึกการโหลดหน้าเว็บแล้ว ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บจะทำเครื่องหมายเมตริกประสิทธิภาพ เช่น DOMContentLoaded และ การแสดงผลที่มีความหมายครั้งแรกในส่วนการจับเวลา

รูปที่ 1 การแสดงผลที่มีความหมายครั้งแรกในส่วนระยะเวลา

ไฮไลต์โหนดข้อความ

เมื่อคุณวางเมาส์เหนือโหนดข้อความในแผนผัง DOM ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บจะไฮไลต์โหนดข้อความดังกล่าวใน วิวพอร์ต

รูปที่ 2 การไฮไลต์โหนดข้อความ

คัดลอกเส้นทาง JS

สมมติว่าคุณเขียนการทดสอบการทำงานอัตโนมัติที่เกี่ยวข้องกับการคลิกโหนด (โดยใช้แท็กของ Puppeteer page.click() บางที) และคุณต้องการดูการอ้างอิงไปยังโหนด DOM นั้นอย่างรวดเร็ว ขั้นตอนการทำงานปกติก็คือไปที่แผงองค์ประกอบ คลิกขวาที่โหนดในแผนผัง DOM แล้วเลือก คัดลอก > คัดลอกตัวเลือก แล้วส่งตัวเลือก CSS นั้นไปยัง document.querySelector() แต่ถ้า โหนดอยู่ใน Shadow DOM วิธีนี้ใช้ไม่ได้ผลเนื่องจากตัวเลือกแสดงเส้นทางจาก ภายในเงาต้นไม้

หากต้องการรับการอ้างอิงโหนด DOM อย่างรวดเร็ว ให้คลิกขวาที่โหนด DOM แล้วเลือกคัดลอก > คัดลอก JS เส้นทาง เครื่องมือสำหรับนักพัฒนาเว็บจะคัดลอกนิพจน์ document.querySelector() ที่ชี้ไปยังคลิปบอร์ด ดังที่กล่าวไว้ข้างต้น วิธีนี้เป็นประโยชน์อย่างยิ่งเมื่อทำงานกับ Shadow DOM แต่คุณสามารถใช้ สำหรับโหนด DOM ทุกโหนด

รูปที่ 3 คัดลอกเส้นทาง JS

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

document.querySelector('#demo1').shadowRoot.querySelector('p:nth-child(2)')

การอัปเดตแผงการตรวจสอบ

แผงการตรวจสอบกำลังทำงานอยู่ Lighthouse 3.2 เวอร์ชัน 3.2 มีการตรวจสอบใหม่ที่เรียกว่า ตรวจพบไลบรารี JavaScript การตรวจสอบนี้แสดงรายการไลบรารี JS ที่ Lighthouse ตรวจพบ หน้าเว็บ คุณดูการตรวจสอบนี้ได้ในรายงานในส่วนแนวทางปฏิบัติแนะนำ > การตรวจสอบที่ผ่าน

รูปที่ 4 ตรวจพบไลบรารี JavaScript

นอกจากนี้ คุณยังเข้าถึงแผงการตรวจสอบได้จากเมนูคำสั่งโดยพิมพ์ Lighthouse หรือ PWA

รูปที่ 5 พิมพ์ lighthouse ลงในเมนูคำสั่ง

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

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

ติดต่อทีม Chrome DevTools

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

• ส่งข้อเสนอแนะหรือความคิดเห็นถึงเราทาง crbug.com
• รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บโดยใช้ตัวเลือกเพิ่มเติม   > ความช่วยเหลือ > รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บในเครื่องมือสำหรับนักพัฒนาเว็บ
• ทวีตที่ @ChromeDevTools
• แสดงความคิดเห็นว่ามีอะไรใหม่ในวิดีโอ YouTube เครื่องมือสำหรับนักพัฒนาเว็บ หรือวิดีโอ YouTube สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ

มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ

รายการข้อมูลทั้งหมดที่ครอบคลุมในซีรีส์มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ