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

Kayce Basques
Kayce Basques
X GitHub

ฟีเจอร์ใหม่และการเปลี่ยนแปลงที่สำคัญซึ่งจะมาพร้อมกับเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ใน Chrome 72 มีดังนี้

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

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

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

First Meaningful Paint ในส่วนการจับเวลา

รูปที่ 1 First Meaningful Paint ในส่วนการจับเวลา

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

เมื่อวางเมาส์เหนือโหนดข้อความใน DOM Tree ตอนนี้ DevTools จะไฮไลต์โหนดข้อความนั้นใน วิวพอร์ต

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

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

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

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

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

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

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

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

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

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

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

ตรวจพบไลบรารี JavaScript

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

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

การพิมพ์ "Lighthouse" ในเมนูคำสั่ง

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

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

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

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

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

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

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