หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Kayce Basques

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

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

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

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

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

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

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

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

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

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

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

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

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

หากต้องการรับการอ้างอิงไปยังโหนด 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 หรือเบต้าเป็นเบราว์เซอร์สำหรับการพัฒนาเริ่มต้น ตัวอย่างช่องทางเหล่านี้จะช่วยให้คุณสามารถเข้าถึงฟีเจอร์ล่าสุดของเครื่องมือสำหรับนักพัฒนาเว็บ ทดสอบ API แพลตฟอร์มเว็บที่ล้ำสมัย และค้นหาปัญหาในเว็บไซต์ก่อนที่ผู้ใช้จะทำงานได้

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

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

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