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

Kayce Basques

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

บันทึกประจำรุ่นฉบับวิดีโอ

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

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

First Meaningful Paint ในส่วน "เวลา"

รูปที่ 1 First Meaningful Paint ในส่วน "เวลา"

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

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

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

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

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

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

หากต้องการดูการอ้างอิงไปยังโหนด DOM อย่างรวดเร็ว ให้คลิกขวาที่โหนด DOM แล้วเลือกคัดลอก > คัดลอกเส้นทาง JS เครื่องมือสำหรับนักพัฒนาเว็บจะคัดลอกนิพจน์ 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

พิมพ์ "ประภาคาร" ลงในเมนูคำสั่ง

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

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

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

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

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

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

รายการทุกอย่างที่ครอบคลุมในชุดมีอะไรใหม่ใน DevTools