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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

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

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

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

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

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

หากต้องการทดสอบการแก้ไขข้อบกพร่อง WASM ให้ติดตั้งส่วนขยายการสนับสนุน C/C++ DevTools (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() command จะป้อนข้อมูลในประสิทธิภาพ > หลัก

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

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

ปัญหา Chromium: 1429191

คําเตือนสําหรับการโต้ตอบของผู้ใช้ที่ช้า

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

คำเตือน INP

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

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

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

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

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

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

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

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

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

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

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

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

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

ปัญหา Chromium: 1428026

ไฮไลต์อื่นๆ

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

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

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

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

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

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

รายการทุกอย่างที่ครอบคลุมในชุดมีอะไรใหม่ใน DevTools