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

Jecelyn Yeen

จัดกลุ่มไฟล์ตามสถานะ "เขียนแล้ว" หรือ "ทำให้ใช้งานได้แล้ว" ในแผงแหล่งที่มา

ตอนนี้จัดกลุ่มไฟล์ตามสถานะ "เขียนแล้ว" หรือ "ทำให้ใช้งานได้แล้ว" จะแสดงในเมนู 3 จุด ก่อนหน้านี้จะแสดงในแผงการนำทางโดยตรง

เปิดการสาธิตนี้ เปิดใช้การตั้งค่าจัดกลุ่มไฟล์ตามผู้สร้าง / การติดตั้งใช้งานเพื่อดูซอร์สโค้ดต้นฉบับ (ผู้สร้าง) ก่อนและไปยังซอร์สโค้ดได้เร็วขึ้น

จัดกลุ่มไฟล์ตามสถานะ "เขียนแล้ว" หรือ "ทำให้ใช้งานได้แล้ว"

ข้อบกพร่องของ Chromium: 1352488

สแต็กเทรซที่ปรับปรุงแล้ว

สแต็กเทรซที่ลิงก์สำหรับการดำเนินการแบบอะซิงโครนัส

เมื่อมีการกำหนดเวลาให้การดำเนินการบางอย่างเกิดขึ้นแบบไม่พร้อมกัน ตอนนี้ Stack Trace ในเครื่องมือสำหรับนักพัฒนาเว็บจะบอก "เรื่องราวทั้งหมด" ของการดำเนินการนั้น ซึ่งก่อนหน้านี้จะบอกข้อมูลเพียงบางส่วนเท่านั้น

เช่น เปิดเดโมนี้ แล้วคลิกปุ่มเพิ่ม ขยายข้อความแสดงข้อผิดพลาดในคอนโซล ในซอร์สโค้ด การดำเนินการจะมีtimeoutการดำเนินการแบบไม่พร้อมกัน

// application.component.ts

async increment() {
    await Promise.resolve().then(() => timeout(100));
    …
}

ก่อนหน้านี้ สแต็กเทรซจะแสดงเฉพาะการดำเนินการที่หมดเวลา แต่ไม่ได้แสดง "สาเหตุหลัก" ของการดำเนินการ

การเปลี่ยนแปลงล่าสุดทำให้ตอนนี้ DevTools แสดงการดำเนินการที่มาจากเหตุการณ์ onClick ในคอมโพเนนต์ปุ่ม จากนั้นฟังก์ชัน increment และการดำเนินการหมดเวลา

สแต็กเทรซที่ลิงก์สำหรับการดำเนินการแบบอะซิงโครนัส

เบื้องหลัง DevTools ได้เปิดตัวฟีเจอร์ใหม่ที่ชื่อว่า "การติดแท็กสแต็กแบบไม่พร้อมกัน" คุณสามารถเล่าเรื่องราวทั้งหมดของการดำเนินการได้โดยการลิงก์โค้ดแบบอะซิงโครนัสทั้ง 2 ส่วนเข้าด้วยกันด้วยเมธอด console.createTask() ใหม่ ดูข้อมูลเพิ่มเติมได้ที่การแก้ไขข้อบกพร่องที่ทันสมัยในเครื่องมือสำหรับนักพัฒนาเว็บ

ฟังดูซับซ้อนไหม ไม่เลย โดยส่วนใหญ่แล้ว เฟรมเวิร์กที่คุณใช้จะจัดการการจัดกำหนดการและการดำเนินการแบบไม่พร้อมกัน ในกรณีดังกล่าว เฟรมเวิร์กจะเป็นผู้ใช้ API เอง คุณจึงไม่ต้องกังวล (เช่น Angular ได้ใช้การเปลี่ยนแปลงเหล่านี้)

ข้อบกพร่องของ Chromium: 1334585

ไม่สนใจสคริปต์ของบุคคลที่สามที่รู้จักโดยอัตโนมัติ

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

เปิดเดโมนี้ แล้วคลิกปุ่มเพิ่ม ขยายข้อความแสดงข้อผิดพลาดในคอนโซล สแต็กเทรซจะแสดงเฉพาะโค้ดของคุณ (เช่น app.component.ts button.component.ts) คลิกแสดงเฟรมเพิ่มเติมเพื่อดูสแต็กเทรซแบบเต็ม

ก่อนหน้านี้ Stack Trace มีสคริปต์ของบุคคลที่สาม เช่น zone.js และ core.mjs ไฟล์เหล่านี้ไม่ใช่ซอร์สโค้ด แต่เป็นไฟล์ที่สร้างขึ้นโดย Bundler (เช่น Webpack) หรือเฟรมเวิร์ก (เช่น Angular) ใช้เวลานานขึ้นในการระบุสาเหตุของข้อผิดพลาด

ไม่สนใจสคริปต์ของบุคคลที่สามที่รู้จักในสแต็กเทรซโดยอัตโนมัติ

เบื้องหลังการทำงาน เครื่องมือสำหรับนักพัฒนาเว็บจะละเว้นสคริปต์ของบุคคลที่สามตามพร็อพเพอร์ตี้ x_google_ignoreList ใหม่ในการแมปแหล่งที่มา เฟรมเวิร์กและเครื่องมือจัดแพ็กเกจต้องระบุข้อมูลนี้ ดูกรณีศึกษา: การแก้ไขข้อบกพร่องของ Angular ที่ดีขึ้นด้วยเครื่องมือสำหรับนักพัฒนาเว็บ

หากต้องการดู Stack Trace แบบเต็มเสมอ คุณสามารถปิดการตั้งค่าได้โดยไปที่การตั้งค่า > รายการละเว้น > เพิ่มสคริปต์ของบุคคลที่สามที่รู้จักลงในรายการละเว้นโดยอัตโนมัติ

การตั้งค่าเพื่อเพิ่มสคริปต์ของบุคคลที่สามที่รู้จักลงในรายการละเว้นโดยอัตโนมัติ

ข้อบกพร่องของ Chromium: 1323199

ปรับปรุงสแต็กการเรียกใช้ระหว่างการแก้ไขข้อบกพร่อง

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

เปิดการสาธิตนี้และตั้งค่าเบรกพอยต์ที่ฟังก์ชัน increment() ใน app.component.ts คลิกปุ่มเพิ่มในหน้าเพื่อเรียกใช้เบรกพอยต์ สแต็กการเรียกใช้จะแสดงเฉพาะเฟรมจากโค้ดของคุณ (เช่น app.component.ts และ button.component.ts)

หากต้องการดูเฟรมทั้งหมด ให้เปิดใช้แสดงเฟรมที่อยู่ในรายการละเว้น ก่อนหน้านี้ DevTools จะแสดงเฟรมทั้งหมดโดยค่าเริ่มต้น

ปรับปรุงสแต็กการเรียกใช้ระหว่างการแก้ไขข้อบกพร่อง

ข้อบกพร่องของ Chromium: 1352488

ซ่อนแหล่งที่มาที่อยู่ในรายการละเว้นในแผงแหล่งที่มา

เปิดใช้ซ่อนแหล่งที่มาที่อยู่ในรายการละเว้นเพื่อซ่อนไฟล์ที่ไม่เกี่ยวข้องในแผงการนำทาง วิธีนี้จะช่วยให้คุณมุ่งเน้นเฉพาะโค้ดได้

เปิดการสาธิตนี้ ในแผงแหล่งที่มา node_modules และ webpack คือสคริปต์ของบุคคลที่สาม คลิกเมนู 3 จุด แล้วเลือกซ่อนแหล่งที่มาในรายการที่ละเว้นเพื่อซ่อนแหล่งที่มาเหล่านั้นจากแผง

ซ่อนแหล่งที่มาที่อยู่ในรายการละเว้นในแผงแหล่งที่มา

ข้อบกพร่องของ Chromium: 1352488

การตั้งค่าซ่อนแหล่งที่มาที่อยู่ในรายการที่ละเว้นจะช่วยให้คุณค้นหาไฟล์ได้เร็วขึ้นด้วยเมนูคำสั่ง ก่อนหน้านี้การค้นหาไฟล์ในเมนูคำสั่งจะแสดงไฟล์ของบุคคลที่สามซึ่งอาจไม่เกี่ยวข้องกับคุณ

เช่น เปิดใช้การตั้งค่าซ่อนแหล่งที่มาที่อยู่ในรายการที่ละเว้น แล้วคลิกเมนู 3 จุด เลือกเปิดไฟล์ พิมพ์ "ton" เพื่อค้นหาคอมโพเนนต์ปุ่ม ก่อนหน้านี้ ผลการค้นหารวมถึงไฟล์จาก node_modules โดยไฟล์ node_modules บางไฟล์ยังปรากฏเป็นผลการค้นหาแรกด้วย

ซ่อนไฟล์ที่อยู่ในรายการละเว้นในเมนูคำสั่ง

ข้อบกพร่องของ Chromium: 1336604

แทร็กการโต้ตอบใหม่ในแผงประสิทธิภาพ

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

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

การโต้ตอบที่ติดตามในแผงประสิทธิภาพ

ข้อบกพร่องของ Chromium: 1347390

รายละเอียดระยะเวลา LCP ในแผงข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพ

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

รายละเอียดระยะเวลา LCP ในแผงข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพ

ข้อบกพร่องของ Chromium: 1351735

สร้างชื่อเริ่มต้นสำหรับไฟล์บันทึกเสียงในแผงโปรแกรมอัดเสียงโดยอัตโนมัติ

ตอนนี้แผงเครื่องบันทึกจะสร้างชื่อสำหรับการบันทึกใหม่โดยอัตโนมัติ

ชื่อเริ่มต้นของไฟล์บันทึกในแผงเครื่องบันทึก

ข้อบกพร่องของ Chromium: 1351383

ไฮไลต์อื่นๆ

  • ก่อนหน้านี้ส่วนขยายของโปรแกรมอัดเสียงจะไม่แสดงในแผงโปรแกรมอัดเสียงเป็นครั้งคราว (1351416)
  • ตอนนี้บานหน้าต่างรูปแบบจะแสดงเครื่องมือเลือกสีสำหรับพร็อพเพอร์ตี้ stop-color ขององค์ประกอบ SVG <stop> (1351096)
  • ระบุสคริปต์ที่ทำให้เกิดการเปลี่ยนแปลงเลย์เอาต์อย่างรวดเร็วเป็นสาเหตุต้นตอที่อาจทำให้เกิดการเปลี่ยนแปลงเลย์เอาต์ในแผงข้อมูลเชิงลึกด้านประสิทธิภาพ (1343019)
  • แสดงเส้นทางที่สำคัญสำหรับแบบอักษรบนเว็บของ LCP ในแผงข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพ (1350390)

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

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

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

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

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

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