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

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

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

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

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

หากต้องการทดสอบการแก้ไขข้อบกพร่อง 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 ในเทรดหลักของแผงประสิทธิภาพแล้ว

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

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

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

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

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

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

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

• แทร็ก Web Vitals ให้ดูเวลาที่เกี่ยวข้องในแทร็กการจับเวลาแทนเมื่อวางเมาส์เหนือ
• แทร็กย่อย Long Tasks คุณสามารถดูงานลักษณะนี้ได้อยู่แล้วในแทร็ก Main ที่แรเงาเป็นสีแดงและมีรูปสามเหลี่ยมสีแดง

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

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

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

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

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

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

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

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

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

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

• ตอนนี้ตัวเลือกสีจะตรวจหาค่า HWB ที่ไม่อยู่ในขอบเขตเมื่อตัด (1429271)
• แผงแหล่งที่มา
  • เปิดใช้การไฮไลต์ไวยากรณ์ JSON สำหรับการแมปแหล่งที่มา (1385374)
  • หยุดแสดง "ตรวจพบการแมปแหล่งที่มา" เมื่อคุณปิดใช้การแมปแหล่งที่มาด้วยตนเอง (1423718)
• ตอนนี้คอนโซลจะให้คุณประเมินนิพจน์ JavaScript ที่ไม่สมบูรณ์ด้วย Ctrl + Enter และข้อผิดพลาดทางไวยากรณ์ของเอาต์พุต (1314700)
• ตอนนี้กล่องโต้ตอบการแก้ไขเบรกพอยท์มีปุ่มปิดแล้ว ก่อนหน้านี้คุณต้องกด Enter หรือยกเลิกการโฟกัสกล่องโต้ตอบ (1412980)

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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