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

Kayce Basques

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ปัญหา Chromium #991906

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

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

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

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

    การบันทึกเหตุการณ์ตัวจัดการการชําระเงิน

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

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

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

    การดูเหตุการณ์ตัวจัดการการชําระเงิน

    รูปที่ 6 การดูเหตุการณ์ตัวจัดการการชําระเงิน

ปัญหา Chromium #980291

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

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

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

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

ปัญหา Chromium #772558

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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