หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

ตอนนี้คุณสามารถใช้ 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

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

ตอนนี้แท็บ WebAuthn มีช่องทำเครื่องหมายรองรับ BLOB ขนาดใหญ่สำหรับ Authenticator เสมือน

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

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

ปัญหา Chromium: 1321803

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

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

สลับแถบด้านข้างการนำทาง (ซ้าย) ด้วย Control / Command + Shift + Y
สลับแถบด้านข้างของdebugger (ขวา) ด้วย Control / Command + Shift + H

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

ปัญหา Chromium: 1226363

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

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

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

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

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

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

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

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

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

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

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