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

Kayce Basques

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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