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

Jecelyn Yeen

รีสตาร์ทเฟรมระหว่างการแก้ไขข้อบกพร่อง

ฟีเจอร์รีสตาร์ทเฟรมกลับมาแล้ว คุณสามารถเรียกใช้โค้ดก่อนหน้าอีกครั้งเมื่อหยุดชั่วคราวในฟังก์ชัน ก่อนหน้านี้เราได้เลิกใช้งานและนำฟีเจอร์นี้ออกจาก Chrome 92 เนื่องจากปัญหาด้านความเสถียร

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

ปัญหา Chromium: 1303521

ตัวเลือกการเล่นซ้ำแบบช้าในแผงโปรแกรมอัดเสียง

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

เปิดแผงโปรแกรมอัดเสียง แล้วเริ่มการบันทึกใหม่ เมื่อบันทึกเสร็จแล้ว ให้คลิกปุ่มเมนูแบบเลื่อนลงเล่นซ้ำ เลือกความเร็วเพื่อเริ่มเล่นซ้ำ

ปัญหา Chromium: 1306756

สร้างส่วนขยายสำหรับแผงโปรแกรมบันทึก

ตอนนี้คุณสร้างหรือติดตั้งส่วนขยาย Chrome เพื่อส่งออกสคริปต์การเล่นซ้ำในรูปแบบที่ต้องการได้แล้ว ดูวิธีสร้างได้จากเอกสารประกอบของ Recorder extension API

หากต้องการติดตั้งชิ้นงานสาธิต ให้ทําตามขั้นตอนเหล่านี้ที่ระบุไว้ในเอกสารประกอบ

ปัญหา Chromium: 1325751

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

เปิดใช้ตัวเลือกใหม่อย่างจัดกลุ่มไฟล์ตามสถานะ "เขียนแล้ว" หรือ "ทำให้ใช้งานได้แล้ว" เพื่อจัดระเบียบไฟล์ในแผงแหล่งที่มา เมื่อพัฒนาเว็บแอปพลิเคชันด้วยเฟรมเวิร์ก (เช่น React, Angular) การไปยังส่วนต่างๆ ของไฟล์ต้นฉบับอาจทำได้ยากเนื่องจากไฟล์ที่บีบอัดซึ่งเครื่องมือสร้างสร้างขึ้น (เช่น Webpack, Vite)

ช่องทําเครื่องหมายนี้ช่วยให้คุณจัดกลุ่มไฟล์เป็น 2 หมวดหมู่เพื่อให้ค้นหาไฟล์ได้เร็วขึ้น ดังนี้

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

ลองดูด้วยตัวคุณเองในการสาธิต React นี้

ปัญหาเกี่ยวกับ Chromium: 960909

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

แสดงภาพเครื่องหมาย performance.measure() ในการบันทึกด้วยแทร็กการจับเวลาของผู้ใช้ใหม่ในแผงข้อมูลเชิงลึกด้านประสิทธิภาพ

ตัวอย่างเช่น หน้าเว็บนี้ใช้เมธอด performance.measure() เพื่อคํานวณเวลาที่ใช้ไปในการโหลดข้อความ

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

ปัญหา Chromium: 1322808

แสดงช่องที่กําหนดขององค์ประกอบ

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

ตัวอย่างนี้มีการ์ดที่มีหลายช่องที่มีชื่อ ตรวจสอบช่อง person-occupation ของการ์ด แล้วคลิกป้าย slot ข้างการ์ดเพื่อดูช่องที่กําหนด

ดูวิธีใช้องค์ประกอบ <template> และ <slot> เพื่อสร้างเทมเพลตที่ยืดหยุ่นซึ่งจะใช้เพื่อป้อนข้อมูลใน Shadow DOM ของคอมโพเนนต์เว็บได้

ปัญหา Chromium: 1018906

จำลองการเกิดขึ้นพร้อมกันของฮาร์ดแวร์สำหรับการบันทึกประสิทธิภาพ

การตั้งค่าการเรียกใช้ฮาร์ดแวร์พร้อมกันใหม่ในแผงประสิทธิภาพช่วยให้นักพัฒนาซอฟต์แวร์กําหนดค่าที่ navigator.hardwareConcurrency รายงานได้

แอปพลิเคชันบางรายการใช้ navigator.hardwareConcurrency เพื่อควบคุมระดับการทำงานแบบขนานของแอปพลิเคชัน เช่น เพื่อควบคุมขนาดพูล pthread ของ Emscripten ฟีเจอร์นี้ช่วยให้นักพัฒนาแอปทดสอบประสิทธิภาพของแอปพลิเคชันด้วยจำนวนแกนประมวลผลที่แตกต่างกันได้

ปัญหา Chromium: 1297439

แสดงตัวอย่างค่าที่ไม่ใช่สีเมื่อป้อนตัวแปร CSS อัตโนมัติ

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

ปัญหา Chromium: 1285091

ระบุเฟรมที่บล็อกในแผงแคชย้อนหลัง

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

ปัญหา Chromium: 1288158

ปรับปรุงคำแนะนำที่เติมข้อความอัตโนมัติสำหรับออบเจ็กต์ JavaScript

ตอนนี้การเติมข้อความอัตโนมัติสำหรับพร็อพเพอร์ตี้ออบเจ็กต์ JavaScript จะแสดงตามลําดับนี้

1. พร็อพเพอร์ตี้ที่นับได้ของตนเอง
2. พร็อพเพอร์ตี้ที่ไม่ใช่รายการที่เป็นเจ้าของ
3. พร็อพเพอร์ตี้ที่รับค่าได้ซึ่งรับค่ามาจากคลาสหลัก
4. พร็อพเพอร์ตี้ที่รับค่าไม่ได้ซึ่งรับช่วงมา

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

ปัญหา Chromium: 1299241

การปรับปรุงแผนที่แหล่งที่มา

การแก้ไขแผนที่ซอร์สโค้ดบางส่วนเพื่อปรับปรุงประสบการณ์การแก้ไขข้อบกพร่องโดยรวมมีดังนี้

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

ปัญหาเกี่ยวกับ Chromium: 1329113, 1322115

ไฮไลต์อื่นๆ

การแก้ไขที่น่าสังเกตในรุ่นนี้ ได้แก่

• แก้ไขการตั้งค่าการเติมข้อความอัตโนมัติสำหรับแผงแหล่งที่มา ก่อนหน้านี้ การเติมข้อความอัตโนมัติจะเปิดอยู่เสมอแม้ว่าการตั้งค่าจะปิดอยู่ก็ตาม (1323286)
• อัปเดตแท็บ Manifest ในแผงแอปพลิเคชันเพื่อแยกวิเคราะห์รูปแบบชุดสีล่าสุด (1318305)
• ปรับปรุงคำแนะนำสำหรับ<script async>ปัญหาการบล็อกการแสดงผลในแผงข้อมูลเชิงลึกด้านประสิทธิภาพ ก่อนหน้านี้ เครื่องมือสำหรับนักพัฒนาเว็บแนะนำให้ add async attribute to the script tag แม้ว่าสคริปต์จะได้รับการทําเครื่องหมายเป็น async อยู่แล้วก็ตาม (1334096)
• ตอนนี้แผงข้อมูลเชิงลึกด้านประสิทธิภาพจะตรวจหา iframe ที่อาจเป็นสาเหตุของการเปลี่ยนเลย์เอาต์ คุณดูรายละเอียด iframe ได้ในแผงรายละเอียด (1328873)
• เมื่อเปิดไฟล์ในเมนูคำสั่ง ไฟล์ที่เขียน (ไฟล์ที่ Source Map สร้างขึ้น) จะมีอันดับสูงกว่าเพื่อให้ปรากฏเหนือสคริปต์ที่ติดตั้งใช้งานซึ่งมีชื่อคล้ายกัน (1312929)

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

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

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

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

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

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

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