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

Kayce Basques

การสนับสนุนหลายลูกค้าในแผงการตรวจสอบ

ตอนนี้คุณสามารถใช้แผงการตรวจสอบร่วมกับฟีเจอร์อื่นๆ ของเครื่องมือสำหรับนักพัฒนาเว็บ เช่น คำขอ การบล็อกและการลบล้างในเครื่อง

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

รูปที่ 1 คะแนนประสิทธิภาพเริ่มต้น

รูปที่ 2 รายงานเบื้องต้นระบุว่ามีสคริปต์ที่บล็อกการแสดงผล 3 รายการ

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

รูปที่ 3 การใช้แท็บการบล็อกคำขอเพื่อบล็อกสคริปต์ที่มีปัญหา

จากนั้นตรวจสอบหน้านี้อีกครั้ง โดยทำดังนี้

รูปที่ 4 คะแนนประสิทธิภาพเพิ่มขึ้นเป็น 97 หลังจากบล็อกสคริปต์ที่เป็นปัญหา

คุณอาจใช้การลบล้างในเครื่องเพื่อเพิ่มแอตทริบิวต์ async ให้กับสคริปต์แต่ละรายการก็ได้ แต่ "เราจะปล่อยให้เป็นแบบฝึกหัดสำหรับผู้อ่าน" ไปที่การสาธิตหลายลูกค้าเพื่อทดลองใช้ ดูการสาธิตได้จากทวีตนี้

ปัญหาเกี่ยวกับ Chromium #991906

การแก้ไขข้อบกพร่องของเครื่องจัดการการชำระเงิน

ส่วนบริการที่ทำงานอยู่เบื้องหลังของแผงแอปพลิเคชันรองรับตัวแฮนเดิลการชำระเงินแล้ว กิจกรรม

1. ไปที่แผงแอปพลิเคชัน
2. เปิดแผงเครื่องจัดการการชำระเงิน

3. คลิกบันทึก เครื่องมือสำหรับนักพัฒนาเว็บจะบันทึกเหตุการณ์เครื่องจัดการการชำระเงินเป็นเวลา 3 วัน แม้ว่าเครื่องมือสำหรับนักพัฒนาเว็บจะ ปิดแล้ว

   

   รูปที่ 5 บันทึกเหตุการณ์ของเครื่องจัดการการชำระเงิน

4. เปิดใช้แสดงเหตุการณ์จากโดเมนอื่น หากเหตุการณ์ของเครื่องจัดการการชำระเงินเกิดขึ้นใน

5. หลังจากเรียกเหตุการณ์เครื่องจัดการการชำระเงินแล้ว ให้คลิกแถวของเหตุการณ์เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับเหตุการณ์

   

   รูปที่ 6 การดูเหตุการณ์เครื่องจัดการการชำระเงิน

ปัญหาเกี่ยวกับ Chromium #980291

Lighthouse 5.2 ในแผงการตรวจสอบ

แผงการตรวจสอบกำลังใช้งาน Lighthouse 5.2 การวินิจฉัยการใช้งานของบุคคลที่สามใหม่ การตรวจสอบจะบอกให้คุณทราบถึงจำนวนโค้ดของบุคคลที่สามที่มีการขอและระยะเวลาที่โค้ดของบุคคลที่สามถูกบล็อก เทรดหลักขณะที่โหลดหน้าเว็บ ดูเพิ่มประสิทธิภาพทรัพยากรของบุคคลที่สามเพื่อดูข้อมูลเพิ่มเติม เกี่ยวกับวิธีที่โค้ดของบุคคลที่สามทำให้ประสิทธิภาพการโหลดลดลง

รูปที่ 7 การตรวจสอบการใช้งานของบุคคลที่สาม

ปัญหาเกี่ยวกับ Chromium #772558

Largest Contentful Paint ในแผงประสิทธิภาพ

เมื่อวิเคราะห์ประสิทธิภาพการโหลดในแผงประสิทธิภาพ ส่วนการจับเวลา ตอนนี้ มีเครื่องหมายสำหรับ Largest Contentful Paint (LCP) LCP รายงานเวลาในการแสดงผล องค์ประกอบเนื้อหาขนาดใหญ่ที่สุดที่มองเห็นได้ในวิวพอร์ต

รูปที่ 8 เครื่องหมาย LCP ในส่วนการจับเวลา

วิธีไฮไลต์โหนด DOM ที่เชื่อมโยงกับ LCP

1. คลิกเครื่องหมาย LCP ในส่วนการจับเวลา

2. วางเมาส์เหนือโหนดที่เกี่ยวข้องในแท็บสรุปเพื่อไฮไลต์โหนดในวิวพอร์ต

   

   รูปที่ 9 ส่วนโหนดที่เกี่ยวข้องของแท็บสรุป

3. คลิกโหนดที่เกี่ยวข้องเพื่อเลือกโหนดในDOM Tree

ปัญหาเกี่ยวกับ File DevTools จากเมนูหลัก

หากเคยพบข้อบกพร่องใน DevTools และต้องการแจ้งปัญหา หรือหากมีไอเดียว่า เพื่อปรับปรุงเครื่องมือสำหรับนักพัฒนาเว็บและต้องการขอฟีเจอร์ใหม่ ให้ไปที่เมนูหลัก > ความช่วยเหลือ > รายงาน ปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บ เพื่อสร้างปัญหาในเครื่องมือติดตามของทีมวิศวกรเครื่องมือสำหรับนักพัฒนาเว็บ การระบุ ตัวอย่างน้อยที่สุดและทำซ้ำได้ใน Glitch ทำให้ทีมแก้ปัญหาได้อย่างมีประสิทธิภาพมากขึ้น ข้อบกพร่องหรือนำคำขอคุณลักษณะของคุณไปใช้!

ความช่วยเหลือ > รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บ" ความกว้าง="800" ความสูง="604">

รูปที่ 10 เมนูหลัก > ความช่วยเหลือ > รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บ

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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