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

Jecelyn Yeen

เครื่องมือแก้ไขข้อบกพร่องของตารางกริด CSS ใหม่

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

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

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

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

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

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

แท็บ WebAuthn ใหม่

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

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

แท็บ WebAuthn

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

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

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

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

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

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

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

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

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

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

ปัญหาเกี่ยวกับ 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 ที่แสดง

ตอนนี้คุณดูนโยบายเครื่องมือฝังแบบข้ามต้นทาง (COEP) และนโยบายเครื่องมือเปิดแบบข้ามต้นทางได้แล้ว (COOP)reporting to ปลายทางในส่วนความปลอดภัยและ การแยก

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

กำลังรายงานไปยังปลายทาง

อ่านบทความนี้เพื่อดูวิธีเปิดใช้ COEP และ COOP และวิธีสร้างเว็บไซต์ "cross-origin Isolated"

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

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

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

ป้ายกำกับเฉพาะรายงาน

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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