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

Kayce Basques
Kayce Basques

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

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

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

คะแนนประสิทธิภาพเริ่มต้นคือ 70

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

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

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

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

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

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

จากนั้นตรวจสอบหน้าเว็บอีกครั้ง

คะแนนประสิทธิภาพดีขึ้นเป็น 97 หลังจากเปิดใช้การบล็อกคำขอ

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

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

ปัญหา Chromium #991906

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

ตอนนี้ส่วนบริการในเบื้องหลังของแผงแอปพลิเคชันรองรับเหตุการณ์ Payment Handler แล้ว

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

    การบันทึกเหตุการณ์ตัวแฮนเดิลการชำระเงิน

    รูปที่ 5 การบันทึกเหตุการณ์ตัวแฮนเดิลการชำระเงิน

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

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

    การดูเหตุการณ์ตัวแฮนเดิลการชำระเงิน

    รูปที่ 6 การดูเหตุการณ์ตัวแฮนเดิลการชำระเงิน

ปัญหา #980291 ใน Chromium

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

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

ภาพหน้าจอของการตรวจสอบ "การใช้งานของบุคคลที่สาม" ใน UI ของรายงาน Lighthouse

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

ปัญหา #772558 ใน Chromium

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

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

เครื่องหมาย LCP ในส่วนระยะเวลา

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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