มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ (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 เพื่อควบคุมระดับการทำงานพร้อมกันของแอปพลิเคชัน เช่น เพื่อควบคุมขนาดกลุ่ม pthread ของ Emscripten ฟีเจอร์นี้ช่วยให้นักพัฒนาแอปทดสอบประสิทธิภาพของแอปพลิเคชันด้วยจํานวนหลักที่แตกต่างกันได้

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

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

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

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

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

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

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

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

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

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

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

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

  1. พร็อพเพอร์ตี้ที่แจกแจงได้ของตัวเอง
  2. พร็อพเพอร์ตี้ที่ไม่สามารถนับได้ของตัวเอง
  3. พร็อพเพอร์ตี้ที่แจกแจงได้ที่รับมา
  4. พร็อพเพอร์ตี้ที่แจกแจงไม่ได้ที่รับช่วงมา

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

คำแนะนำที่เติมข้อความอัตโนมัติสำหรับออบเจ็กต์ 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 DevTools

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

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

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

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