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

Jecelyn Yeen

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

ตอนนี้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์รองรับการแก้ไขข้อบกพร่องตาราง CSS ได้ดียิ่งขึ้น

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

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

แผงเลย์เอาต์ใหม่มีส่วนตารางกริดที่มีตัวเลือกต่างๆ ในการดูตารางกริด

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

ปัญหา Chromium: 1047356

แท็บ WebAuthn ใหม่

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

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

แท็บ WebAuthn

ก่อนหน้านี้ Chrome ยังไม่รองรับการแก้ไขข้อบกพร่อง WebAuthn ในตัวในแท็บ 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ไว้ล่วงหน้าแล้ว
  • ไฟล์ Map แหล่งที่มาที่ถูกต้อง ตรวจสอบว่าหน้าเว็บมีแผนที่แหล่งที่มาที่ถูกต้องสําหรับ 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

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

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

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

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

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

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

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