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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

ปัญหา Chromium: 1146146

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

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

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

ปัญหา Chromium: 1245191

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

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

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

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

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

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

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

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

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

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

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

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