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

Jecelyn Yeen

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

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

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

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

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

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

สแต็กเทรซที่ลิงก์สําหรับการดําเนินการแบบไม่พร้อมกัน

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

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

// application.component.ts

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

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

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

สแต็กเทรซที่ลิงก์สําหรับการดําเนินการแบบไม่พร้อมกัน

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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