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

Jecelyn Yeen

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

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

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

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

สแต็กเทรซที่ได้รับการปรับปรุง

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

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

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

// application.component.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ไฮไลต์เบ็ดเตล็ด

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

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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