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

Jecelyn Yeen

เครื่องมือแก้ไขข้อบกพร่องของ CSS Grid ใหม่

ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บรองรับการแก้ไขข้อบกพร่องของ CSS Grid ได้ดีขึ้นแล้ว

การแก้ไขข้อบกพร่องของกริด CSS

เมื่อองค์ประกอบ HTML ในหน้าเว็บมี display: grid หรือ display: inline-grid คุณจะเห็นป้าย grid ข้างองค์ประกอบนั้นในแผงองค์ประกอบ คลิกป้ายเพื่อสลับการแสดง การวางซ้อนตารางกริดในหน้า

บานหน้าต่างเลย์เอาต์ใหม่มีส่วนตารางกริดซึ่งมีตัวเลือกมากมายให้คุณดู ตารางกริด

ดูข้อมูลเพิ่มเติมได้ในเอกสารประกอบ

ปัญหาใน Chromium: 1047356

แท็บ WebAuthn ใหม่

ตอนนี้คุณสามารถจำลองโปรแกรมตรวจสอบสิทธิ์และแก้ไขข้อบกพร่องของ Web Authentication API ได้แล้วด้วยแท็บ WebAuthn ใหม่

เลือกตัวเลือกเพิ่มเติม > เครื่องมือเพิ่มเติม > WebAuthn เพื่อเปิดแท็บ WebAuthn

แท็บ WebAuthn

ก่อนที่จะมีแท็บ WebAuthn ใหม่ Chrome ไม่รองรับการแก้ไขข้อบกพร่องของ WebAuthn โดยเนทีฟ นักพัฒนาซอฟต์แวร์จำเป็นต้องมีเครื่องมือตรวจสอบสิทธิ์จริงเพื่อทดสอบเว็บแอปพลิเคชันด้วย Web Authentication API

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์ WebAuthn ได้ในเอกสารประกอบ

ปัญหาใน Chromium: 1034663

ย้ายเครื่องมือระหว่างแผงด้านบนและด้านล่าง

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

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

ย้ายไปด้านล่างสุด

ในทำนองเดียวกัน คุณสามารถย้ายแท็บด้านล่างไปไว้ด้านบนได้โดยคลิกขวาที่แท็บแล้วเลือกย้ายไปด้านบน

ย้ายไปด้านบนสุด

ปัญหาใน Chromium: 1075732

การอัปเดตแผงองค์ประกอบ

ดูแผงแถบด้านข้างของรูปแบบที่คำนวณแล้วในแผงรูปแบบ

ตอนนี้คุณสามารถเปิด/ปิดแผงแถบด้านข้างที่คำนวณแล้วในแผงรูปแบบได้แล้ว

ระบบจะยุบแผงแถบด้านข้างที่คำนวณแล้วในแผงรูปแบบโดยค่าเริ่มต้น คลิกปุ่มเพื่อ เปิด/ปิด

แผงแถบด้านข้างของรูปแบบที่คำนวณแล้ว

ปัญหาใน Chromium: 1073899

จัดกลุ่มคุณสมบัติ CSS ในแผง "คำนวณ"

ตอนนี้คุณจัดกลุ่มพร็อพเพอร์ตี้ CSS ตามหมวดหมู่ในแผงคำนวณได้แล้ว

ฟีเจอร์การจัดกลุ่มใหม่นี้จะช่วยให้คุณไปยังส่วนต่างๆ ในแผงที่คำนวณได้ง่ายขึ้น (เลื่อนน้อยลง) และมุ่งเน้นที่ชุดพร็อพเพอร์ตี้ที่เกี่ยวข้องสำหรับการตรวจสอบ CSS ได้อย่างเฉพาะเจาะจง

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

การจัดกลุ่มพร็อพเพอร์ตี้ CSS

ปัญหาเกี่ยวกับ Chromium: 1096230, 1084673, 1106251

Lighthouse 6.4 ในแผง Lighthouse

แผง Lighthouse กำลังเรียกใช้ Lighthouse 6.4 ดูรายการการเปลี่ยนแปลงทั้งหมดได้ในบันทึกประจำรุ่น

ประภาคาร

การตรวจสอบใหม่ใน Lighthouse 6.4

  • โหลดแบบอักษรล่วงหน้า ตรวจสอบว่ามีการโหลดล่วงหน้าสำหรับแบบอักษรทั้งหมดที่ใช้font-display: optional
  • การแมปแหล่งที่มาที่ถูกต้อง ตรวจสอบว่าหน้าเว็บมีแผนที่แหล่งที่มาที่ถูกต้องสำหรับ JavaScript ขนาดใหญ่ของบุคคลที่หนึ่งหรือไม่
  • [ทดลอง] ไลบรารี JavaScript ขนาดใหญ่ ไลบรารี JavaScript ขนาดใหญ่อาจทำให้ประสิทธิภาพต่ำ การตรวจสอบนี้แนะนำทางเลือกที่ถูกกว่าสำหรับไลบรารี JavaScript ขนาดใหญ่ที่ใช้กันทั่วไป เช่น moment.js

ปัญหาใน Chromium: 772558

performance.mark() เหตุการณ์ในส่วนระยะเวลา

ส่วนเวลาของการบันทึกประสิทธิภาพจะทำเครื่องหมายเหตุการณ์ performance.mark()

เหตุการณ์ Performance.mark

ตัวกรอง resource-type และ url ใหม่ในแผงเครือข่าย

ใช้คีย์เวิร์ด resource-type และ url ใหม่ในแผงเครือข่ายเพื่อกรองคำขอเครือข่าย

เช่น ใช้ resource-type:image เพื่อโฟกัสคำขอเครือข่ายที่เป็นรูปภาพ

ตัวกรองประเภททรัพยากร

ดูกรองคำขอตามพร็อพเพอร์ตี้เพื่อค้นหาคีย์เวิร์ดพิเศษอื่นๆ เช่น resource-type และ url

ปัญหาเกี่ยวกับ Chromium: 1121141, 1104188

การอัปเดตมุมมองรายละเอียดเฟรม

แสดงปลายทาง COEP และ COOP reporting to

ตอนนี้คุณดู Cross-Origin Embedder Policy (COEP) และ Cross-Origin Opener Policy (COOP)reporting to ได้ในส่วนความปลอดภัยและการแยก

Reporting API กำหนดส่วนหัว HTTP ใหม่ Report-To ซึ่งช่วยให้นักพัฒนาเว็บระบุปลายทางของเซิร์ฟเวอร์เพื่อให้เบราว์เซอร์ส่งคำเตือนและข้อผิดพลาดไปได้

การรายงานไปยังอุปกรณ์ปลายทาง

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

ปัญหาใน Chromium: 1051466

โหมดแสดง COEP และ COOP report-only

ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงป้ายกำกับ report-only สำหรับ COEP และ COOP ที่ตั้งค่าเป็นโหมด report-only

ป้ายกำกับการรายงานเท่านั้น

ดูวิดีโอนี้เพื่อดูวิธีป้องกันการรั่วไหลของข้อมูลและเปิดใช้ COOP และ COEP ใน เว็บไซต์

ปัญหาใน Chromium: 1051466

การเลิกใช้งาน Settings ในเมนูเครื่องมือเพิ่มเติม

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

การตั้งค่าในแผงหลัก

ปัญหาใน Chromium: 1121312

ฟีเจอร์ทดลอง

ดูและแก้ไขปัญหาคอนทราสต์ของสีในแผงภาพรวม CSS

ตอนนี้แผงภาพรวม CSS จะแสดงรายการข้อความที่มีคอนทราสต์ของสีต่ำในหน้าเว็บของคุณ

ในตัวอย่างนี้ หน้าเว็บตัวอย่างมีปัญหาเกี่ยวกับคอนทราสต์ของสีในระดับต่ำ คลิกปัญหาเพื่อดูรายการองค์ประกอบที่มีปัญหา

ปัญหาคอนทราสต์ของสีต่ำ

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

ปัญหาใน Chromium: 1120316

ปรับแต่งแป้นพิมพ์ลัดในเครื่องมือสำหรับนักพัฒนาเว็บ

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

ไปที่การตั้งค่า > แป้นพิมพ์ลัด วางเมาส์เหนือคำสั่ง แล้วคลิกปุ่มแก้ไข (ไอคอนปากกา) เพื่อปรับแต่งแป้นพิมพ์ลัด

ปรับแต่งแป้นพิมพ์ลัด

หากต้องการรีเซ็ตแป้นพิมพ์ลัดทั้งหมด ให้คลิกคืนค่าแป้นพิมพ์ลัดเริ่มต้น

ปัญหาใน Chromium: 174309

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

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

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

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

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

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