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

Jecelyn Yeen
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

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

ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บรองรับเครื่องมือย้ายในเครื่องมือสำหรับนักพัฒนาเว็บระหว่างแผงด้านบนและด้านล่างแล้ว วิธีนี้ทำให้คุณสามารถ ดูเครื่องมือ 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 ที่แสดง

ตอนนี้คุณสามารถดูปลายทางนโยบายเครื่องมือฝังแบบข้ามต้นทาง (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 จะแสดงรายการข้อความคอนทราสต์สีต่ำของหน้า

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

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

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

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

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

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

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

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

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

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

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

ยกเลิก Chrome 82 แล้ว

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59