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

Jecelyn Yeen

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

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

ในตัวอย่างนี้ ให้เริ่มการบันทึกและลองทำตามขั้นตอนต่อไปนี้

• ดับเบิลคลิกการ์ดเพื่อขยาย
• คลิกขวาที่การ์ดแล้วเลือกการดำเนินการจากเมนูตามบริบท

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

• ดับเบิลคลิกจะบันทึกเป็น type: doubleClick
• เหตุการณ์คลิกขวาจะบันทึกเป็น type: click แต่ตั้งค่าพร็อพเพอร์ตี้ button เป็น secondary ค่า button ของการคลิกเมาส์ปกติคือ primary

ปัญหาเกี่ยวกับ Chromium: 1300839, 1322879, 1299701, 1323688

ช่วงเวลาและโหมดสแนปชอตใหม่ในแผง Lighthouse

ตอนนี้คุณใช้ Lighthouse เพื่อวัดประสิทธิภาพของเว็บไซต์นอกเหนือไปจากการโหลดหน้าเว็บได้แล้ว

ปัจจุบันแผง Lighthouse รองรับการวัดการไหลเวียนของผู้ใช้ 3 โหมด ได้แก่

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

ตัวอย่างเช่น มาวัดประสิทธิภาพในการเพิ่มสินค้าลงในรถเข็นในหน้าสาธิตนี้กัน เลือกโหมดช่วงเวลา แล้วคลิกเริ่มช่วงเวลา เลื่อนแล้วเพิ่มสินค้า 2-3 รายการลงในรถเข็น เมื่อเสร็จแล้ว ให้คลิกสิ้นสุดช่วงเวลาเพื่อสร้างรายงาน Lighthouse เกี่ยวกับการโต้ตอบของผู้ใช้

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

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

ข้อมูลอัปเดตเกี่ยวกับข้อมูลเชิงลึกด้านประสิทธิภาพ

การควบคุมการซูมที่ได้รับการปรับปรุงในแผงข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพ

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

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

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

ยืนยันเพื่อลบบันทึกการแสดง

ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงกล่องโต้ตอบการยืนยันก่อนลบการบันทึกประสิทธิภาพ

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

เรียงลำดับแผงใหม่ในแผงองค์ประกอบ

คุณจัดเรียงแผงใหม่ในแผงองค์ประกอบตามที่ต้องการได้แล้ว

ตัวอย่างเช่น เมื่อคุณเปิดเครื่องมือสำหรับนักพัฒนาเว็บบนหน้าจอที่แคบ แผงการช่วยเหลือพิเศษจะซ่อนอยู่ใต้ปุ่มแสดงเพิ่มเติม หากคุณแก้ไขข้อบกพร่องของการช่วยเหลือพิเศษอยู่บ่อยๆ ตอนนี้คุณสามารถลากแผงไปด้านหน้าเพื่อการเข้าถึงที่ง่ายขึ้นได้แล้ว

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

การเลือกสีนอกเบราว์เซอร์

ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บรองรับการเลือกสีนอกเบราว์เซอร์แล้ว ก่อนหน้านี้คุณสามารถเลือกสีได้ในเบราว์เซอร์เท่านั้น

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

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

ปรับปรุงการแสดงตัวอย่างค่าในหน้าระหว่างการแก้ไขข้อบกพร่อง

ตอนนี้โปรแกรมแก้ไขข้อบกพร่องแสดงตัวอย่างค่าในบรรทัดได้อย่างถูกต้องแล้ว

ในตัวอย่างนี้ ฟังก์ชัน double มีพารามิเตอร์อินพุต a และตัวแปร x ใส่เบรกพอยท์ที่บรรทัด return และเรียกใช้โค้ด ตัวอย่างในบรรทัดแสดงค่า a และ x อย่างถูกต้อง ก่อนหน้านี้ โปรแกรมแก้ไขข้อบกพร่องไม่ได้แสดงค่า x ในตัวอย่างแบบอินไลน์

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

สนับสนุน BLOB ขนาดใหญ่สำหรับ Authenticator เสมือน

ขณะนี้แท็บ WebAuthn มีช่องทำเครื่องหมาย Supports Large BLOB ใหม่สำหรับ Authenticator เสมือน

ช่องทำเครื่องหมายนี้จะถูกปิดใช้โดยค่าเริ่มต้น คุณจะเปิดใช้ได้เฉพาะสำหรับ Authenticator ที่มีโปรโตคอล ctap2 ซึ่งรองรับคีย์ที่ใช้ประจำเท่านั้น

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

แป้นพิมพ์ลัดใหม่ในแผงแหล่งที่มา

ตอนนี้มีแป้นพิมพ์ลัดใหม่ 2 รายการในแผงแหล่งที่มา ดังนี้

• สลับแถบด้านข้างการนำทาง (ซ้าย) โดยใช้ Control / Command + Shift + Y
• สลับแถบด้านข้างโปรแกรมแก้ไขข้อบกพร่อง (ขวา) โดยใช้ Control / Command + Shift + H

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

การปรับปรุงการแมปแหล่งที่มา

ก่อนหน้านี้นักพัฒนาแอปพบความล้มเหลวแบบสุ่มระหว่าง

• ตัวอย่างการแก้ไขข้อบกพร่องด้วย Codepen
• การระบุตำแหน่งแหล่งที่มาของปัญหาด้านประสิทธิภาพในตัวอย่าง Codepen
• ไม่มีแท็บคอมโพเนนต์เมื่อเปิดใช้ React DevTools

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

• แก้ไขการจับคู่ระหว่างตำแหน่งและออฟเซ็ตสำหรับสคริปต์ในหน้าและตำแหน่งต้นทาง
• ใช้ข้อมูลสำรองสำหรับตำแหน่งข้อความของเฟรม
• แก้ไข URL สัมพัทธ์อย่างเหมาะสมด้วย URL ของเฟรม

ปัญหาเกี่ยวกับ Chromium: 1319828, 1318635, 1305475

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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