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

ข้าม Step over ในโค้ดต้นฉบับจะหลีกเลี่ยงการหยุดชั่วคราวในการแยกชิ้นส่วน (ไฟล์ .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 จะแสดงข้อมูลใน Performance > Main

ตอนนี้คำสั่ง profile() และ profileEnd() ในConsole จะเริ่มและหยุดการสร้างโปรไฟล์ 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 เป็นต้นมา ทีม DevTools วางแผนที่จะเลิกใช้งาน JavaScript Profiler ในที่สุด และให้นักพัฒนา Node.js และ Deno ใช้แผงประสิทธิภาพเพื่อสร้างโปรไฟล์ประสิทธิภาพ CPU ของ JavaScript

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

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

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

ปัญหาใน Chromium: 1428026

ไฮไลต์อื่นๆ

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

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

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

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

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

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

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