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

Jecelyn Yeen
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 สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ

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

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

ยกเลิก Chrome 82 แล้ว

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59