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

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

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

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

ปัญหาใน Chromium: 1018906

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

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

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

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

ปัญหาใน Chromium: 1297439

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

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

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

ปัญหาใน Chromium: 1285091

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

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

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

ปัญหาใน Chromium: 1288158

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

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

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

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

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

ปัญหาใน Chromium: 1299241

การปรับปรุง Source Map

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

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

ปัญหาใน Chromium: 1329113, 1322115

ไฮไลต์อื่นๆ

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

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

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

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

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

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

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

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