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

Sofia Emelianova
Sofia Emelianova
GitHub
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 ในเครื่องมือสำหรับนักพัฒนาเว็บที่หัวข้อ 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 ให้ดูเวลาที่เกี่ยวข้องในแทร็กการจับเวลาเมื่อวางเมาส์เหนือสถานที่นั้นๆ แทน
  • การติดตามย่อยงานที่ใช้เวลานาน คุณจะพบงานดังกล่าวได้ในแทร็ก Main ที่แรเงาเป็นสีแดงและรูปสามเหลี่ยมสีแดง

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

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

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

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

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

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

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

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

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

ปัญหา Chromium: 1428026

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

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

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

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

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

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

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

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

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

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