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

Sofia Emelianova
Sofia Emelianova
Jecelyn Yeen
Jecelyn Yeen

การสนับสนุนการแก้ไขข้อบกพร่องของ WebAssembly

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

การทดสอบนี้ให้คุณหยุดการดำเนินการชั่วคราวและแก้ไขข้อบกพร่องของโค้ด C และ C++ ในแอป Wasm ได้ด้วยข้อมูลการแก้ไขข้อบกพร่องทั้งหมดต่อไป��ี้

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

แอปพลิเคชัน Wasm หยุดชั่วคราวในโปรแกรมแก้ไขข้อบกพร่อง

หากต้องการทดสอบการแก้ไขข้อบกพร่อง Wasm ให้ติดตั้งส่วนขยาย C/C++ DevTools Support (DWARF) แล้วทำขั้นตอนผ่านโค้ดในการสาธิต Mandelbrot

ปัญหา Chromium: 1414289

ปรับปรุงลักษณะการก้าวในแอป Wasm

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

อย่างไรก็ตาม การก้าวจะจบลงเมื่อออกนอกฟังก์ชันที่เริ่มทำงาน เช่น หลังจากกลับมาจากฟังก์ชัน

ลักษณะการทำงานนี้จะเปิดใช้โดยค่าเริ่มต้นใน การตั้งค่า การตั้งค่า > ค่ากำหนด > แหล่งที่มา

การตั้งค่าใหม่จะอยู่ใน "ค่ากำหนด" จากนั้นไปที่แหล่งที่มา

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

แก้ไขข้อบกพร่องของการป้อนข้อความอัตโนมัติโดยใช้แผงองค์ประกอบและแท็บปัญหา

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

หากต้องการใช้ฟีเจอร์นี้ ให้เปิดใช้ การตั้งค่า การตั้งค่า > การทดสอบ > ช่องทำเครื่องหมาย ไฮไลต์โหนดหรือแอตทริบิวต์ที่ละเมิดในแผนผัง DOM ของแผงองค์ประกอบ และตรวจสอบหน้าสาธิตนี้

ปัญหาการป้อนข้อความอัตโนมัติที่ไฮไลต์ในแผงองค์ประกอบและรายงานโดยแผงปัญหา

วางเมาส์เหนือปัญหาที่ไฮไลต์ในแผนผัง DOM แล้วคลิกดูปัญหาเพื่อเปิดแท็บปัญหาที่แสดงปัญหาที่ตรวจพบทั้งหมดและให้ข้อมูลเกี่ยวกับข้อผิดพลาด

ปัญหาของ Chromium: 1399414

การยืนยันในโปรแกรมอัดเสียง

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

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

วิดีโอนี้แสดงวิธียืนยัน

  • แอตทริบิวต์ HTML เช่น class ขององค์ประกอบ
  • พร็อพเพอร์ตี้ JavaScript ใน JSON เช่น .innerText

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

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

ปัญหา Chromium: 1423624

Lighthouse 10.1.1

ตอนนี้แผง Lighthouse จะเรียกใช้ Lighthouse 10.1.1 โดยมีการเปลี่ยนแปลงที่สำคัญใน 10.1.0 ตอนนี้การตรวจสอบทั้งหมดที่เกี่ยวข้องกับ URL จะจัดกลุ่มตามเอนทิตีและสถิติเชิงตัวเลขที่รวบรวมไว้ เช่น ขนาดหรือระยะเวลา บุคคลที่สามที่ได้รับความนิยมจะมีการติดแท็กหมวดหมู่ด้วยเพื่อให้ระบุวัตถุประสงค์บนหน้าเว็บได้ง่ายขึ้น

การตรวจสอบที่จัดกลุ่มตามเอนทิตี

ดูข้อมูลเบื้องต้นในการใช้แผง Lighthouse ใน DevTools ได้ที่ Lighthouse: เพิ่มประสิทธิภาพความเร็วเว็บไซต์

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

การเพิ่มประสิทธิภาพ

performance.mark() แสดงการจับเวลาเมื่อวางเมาส์เหนือ "ประสิทธิภาพ" > การจับเวลา

ตอนนี้เมธอดperformance.mark()จะแสดงช่วงเวลาเมื่อคุณวางเมาส์เหนือเครื่องหมายที่เกี่ยวข้องในประสิทธิภาพ > การจับเวลา ช่วงเวลาตรงนี้เป็นการประทับเวลาที่เกี่ยวข้องกับเหตุการณ์การนำทางก่อนหน้า

ป๊อปอัปที่มีการวางเมาส์เหนือเวลาอยู่ในส่วน "การจับเวลา"

ปัญหา Chromium: 1426762

คำสั่ง profile() เติมข้อมูลประสิทธิภาพ > หลัก

ตอนนี้คำสั่ง profile() และ profileEnd() ในคอนโซลจะเริ่มและหยุดทำโปรไฟล์ CPU ในเทรดหลักของแผงประสิทธิภาพแล้ว

คำสั่ง Console() จะสร้างโปรไฟล์ในแผงประสิทธิภาพ

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

คำเตือนเกี่ยวกับการโต้ตอบของผู้ใช้ที่ช้า

การโต้ตอบของผู้ใช้เป็นเวลานานกว่า 200 มิลลิวินาทีจะได้รับคำเตือนการโต้ตอบกับ Next Paint (INP) ในแท็บประสิทธิภาพ > สรุป

คำเตือน INP

นอกจากนี้ ระบบได้ย้ายรหัสการโต้ตอบจากเคล็ดลับเครื่องมือไปยังสรุปแล้ว

ปัญหาเกี่ยวกับ Chromium: 1432512, 1432509

ย้ายแทร็ก Web Vitals ไปแล้ว

แผงประสิทธิภาพได้นำแทร็กต่อไปนี้ออก

ทั้งแทร็ก Web Vitals และ Long Tasks มีข้อมูลที่ทำซ้ำในที่อื่นๆ นอกจากนี้ยังไม่มีการโต้ตอบ เมื่อเทียบกับตัวเลือกอื่นที่แนะนำอย่างสมบูรณ์กว่า ที่ให้ข้อมูลที่ละเอียดมากขึ้นเมื่อคลิก

ก่อนและหลังการย้าย Web Vitals ไปยังแทร็กการจับเวลา

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับ Web Vitals

การเลิกใช้งานเครื่องมือสร้างโปรไฟล์ JavaScript: ระยะที่ 3

ตั้งแต่ Chrome 58 ทีม DevTools วางแผนที่จะเลิกใช้งานเครื่องมือสร้างโปรไฟล์ JavaScript และให้นักพัฒนาซอฟต์แวร์ Node.js และ Deno ใช้แผงประสิทธิภาพในการทำโปรไฟล์ประสิทธิภาพของ CPU ของ JavaScript

DevTools เวอร์ชัน 114 เริ่มระยะที่ 3 ของการเลิกใช้งาน JavaScript Profiler 4 ระยะ ในขั้นตอนนี้ ระบบจะนำแผง JavaScript Profiler ออกจากเครื่องมือสำหรับนักพัฒนาเว็บ แต่ค��ณยังสามารถเปิดใช้ชั่วคราวผ่าน การตั้งค่า การตั้งค่า > การทดสอบ และเปิดแผงจากเมนู 3 จุด เมนู 3 จุด

ช่องทำเครื่องหมายเครื่องมือสร้างโปรไฟล์ JavaScript ในการตั้งค่า จากนั้นไปที่การทดสอบ

หากต้องการสร้างโปรไฟล์ประสิทธิภาพของ CPU ให้ใช้แผงประสิทธิภาพ

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

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

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

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

ลองใช้ 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