หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Jecelyn Yeen

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

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

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

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

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

สแต็กเทรซที่ดียิ่งขึ้น

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

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

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

// application.component.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ข้อบกพร่องของ 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

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

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

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

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

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

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

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

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

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

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

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

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

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