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

Jecelyn Yeen

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

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

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

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

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

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

  • ดับเบิลคลิกจะบันทึกเป็น 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

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

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

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

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

ปัญหา Chromium: 1146146

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

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

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

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

ปัญหา Chromium: 1245191

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

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

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

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

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

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

ตอนนี้แท็บ WebAuthn มีช่องทำเครื่องหมายรองรับ BLOB ขนาดใหญ่ใหม่สำหรับโปรแกรมตรวจสอบสิทธิ์เสมือน

ช่องทําเครื่องหมายนี้จะปิดอยู่โดยค่าเริ่มต้น คุณจะเปิดใช้ตัวเลือกนี้ได้สำหรับโปรแกรมตรวจสอบสิทธิ์ที่มีโปรโตคอล ctap2 ที่รองรับคีย์ที่อยู่ในเครื่องเท่านั้น

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

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

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

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

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

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