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

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

Jecelyn Yeen

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

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

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

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

ปัญหา Chromium: 1303521

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

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

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

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

ปัญหา Chromium: 1306756

สร้างส่วนขยายสำหรับแผงโปรแกรมอัดเสียง

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

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

ส่วนขยายที่กำหนดเองสำหรับแผงโปรแกรมอัดเสียง

ปัญหา Chromium: 1325751

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

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

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

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

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

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

ปัญหา Chromium: 960909

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

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

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

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

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

ปัญหา Chromium: 1322808

แสดงสล็อตที่กำหนดขององค์ประกอบ

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

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

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

แสดงสล็อตที่กำหนดขององค์ประกอบ

ปัญหา Chromium: 1018906

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

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

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

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

ปัญหา Chromium: 1297439

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

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

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

ปัญหา Chromium: 1285091

ระบุเฟรมการบล็อกในแผง Back-Forward Cache

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

ระบุเฟรมการบล็อกในแผง Back-Forward Cache

ปัญหา Chromium: 1288158

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

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

มีคุณสมบัติที่แจกแจงได้ของตัวเอง
เป็นเจ้าของพร็อพเพอร์ตี้ที่แจกแจงไม่ได้
พร็อพเพอร์ตี้แจกแจงที่รับช่วงมา
พร็อพเพอร์ตี้ที่แจกแจงไม่ได้ซึ่งรับค่ามา

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

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

ปัญหา Chromium: 1299241

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

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

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

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

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

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

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

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

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

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

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

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