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

Kayce Basques
Kayce Basques
X GitHub

แก้ไขปัญหาเกี่ยวกับเว็บไซต์ด้วยแท็บปัญหาใหม่

แท็บปัญหาใหม่ในลิ้นชักมีจุดมุ่งหมายเพื่อช่วยลดการแจ้งเตือนที่มากเกินไปและความรกของคอนโซล ปัจจุบัน คอนโซลเป็นศูนย์กลางสำหรับนักพัฒนาเว็บไซต์ ไลบรารี เฟรมเวิร์ก และ Chrome เองในการบันทึกข้อความ คำเตือน และข้อผิดพลาด แท็บปัญหาจะแสดงคำเตือนจากเบราว์เซอร์ในลักษณะที่มีโครงสร้าง รวบรวม และนำไปใช้ได้จริง ลิงก์ไปยังทรัพยากรที่ได้รับผลกระทบภายในเครื่องมือสำหรับนักพัฒนาเว็บ และให้คำแนะนำเกี่ยวกับวิธีแก้ไขปัญหา ในอนาคต คำเตือนของ Chrome จะแสดงในแท็บปัญหามากขึ้นเรื่อยๆ แทนที่จะแสดงใน Console ซึ่งจะช่วยลดความซับซ้อนของ Console ได้

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

แท็บปัญหา

ข้อบกพร่องของ Chromium: #1068116

ดูข้อมูลการช่วยเหลือพิเศษในเคล็ดลับเครื่องมือโหมดตรวจสอบ

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

เคล็ดลับเครื่องมือโหมดตรวจสอบที่มีข้อมูลการช่วยเหลือพิเศษ

ข้อบกพร่องของ Chromium: #1040025

การอัปเดตแผงประสิทธิภาพ

ดูข้อมูลระยะเวลาทั้งหมดในการบล็อก (TBT) ในส่วนท้าย

หลังจากบันทึกประสิทธิภาพการโหลดแล้ว ตอนนี้แผงประสิทธิภาพจะแสดงข้อมูลเวลาที่ถูกบล็อกทั้งหมด (TBT) ในส่วนท้าย TBT เป็นเมตริกประสิทธิภาพการโหลดที่ช่วยระบุระยะเวลาที่หน้าเว็บใช้ในการพร้อมใช้งาน โดยพื้นฐานแล้ว เมตริกนี้จะวัดระยะเวลาที่หน้าเว็บดูเหมือนจะใช้งานได้ (เนื่องจากเนื้อหาแสดงผลบนหน้าจอแล้ว) แต่ใช้งานจริงไม่ได้เนื่องจาก JavaScript บล็อกเทรดหลัก และหน้าเว็บจึงไม่สามารถตอบสนองต่ออินพุตของผู้ใช้ได้ TBT เป็นเมตริกในห้องทดลองหลัก สำหรับการประมาณค่า First Input Delay ซึ่งเป็นหนึ่งใน Core Web Vitals ใหม่ของ Google

หากต้องการดูข้อมูลเวลาในการบล็อกทั้งหมด อย่าใช้เวิร์กโฟลว์โหลดหน้าเว็บซ้ำ โหลดหน้าเว็บซ้ำ เพื่อบันทึกประสิทธิภาพการโหลดหน้าเว็บ แต่ให้คลิกบันทึก บันทึก โหลดหน้าเว็บซ้ำด้วยตนเอง รอให้หน้าเว็บโหลด แล้วหยุดบันทึก หากคุณเห็น Total Blocking Time: Unavailable แสดงว่าเครื่องมือสำหรับนักพัฒนาเว็บไม่ได้รับข้อมูลที่ต้องการจาก ข้อมูลการจัดทำโปรไฟล์ภายในของ Chrome

ข้อมูลเวลาทั้งหมดในการบล็อกในส่วนท้ายของการบันทึกแผงประสิทธิภาพ

ข้อบกพร่องของ Chromium: #1054381

เหตุการณ์การเปลี่ยนเลย์เอาต์ในส่วนประสบการณ์การใช้งานแบบใหม่

ส่วนประสบการณ์ใหม่ในแผงประสิทธิภาพจะช่วยให้คุณตรวจพบการเปลี่ยนเลย์เอาต์ได้ Cumulative Layout Shift (CLS) เป็นเมตริกที่จะช่วยให้คุณวัดความไม่เสถียรของภาพที่ไม่ต้องการได้ และเป็นหนึ่งใน Core Web Vitals ใหม่ของ Google

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

รายละเอียดการเปลี่ยนแปลงเลย์เอาต์

คำศัพท์เกี่ยวกับสัญญาที่แม่นยำยิ่งขึ้นใน Console

เมื่อบันทึกPromise Console เคยอธิบายสถานะของPromiseอย่างไม่ถูกต้องเป็น resolved:

ตัวอย่างของ Console ที่ใช้คำศัพท์ "แก้ไขแล้ว" แบบเก่า

ตอนนี้ Console ใช้คำว่า fulfilled ซึ่งสอดคล้องกับPromiseข้อกำหนด

ตัวอย่างของ Console ที่ใช้คำศัพท์ใหม่ "ดำเนินการเสร็จสมบูรณ์"

ข้อบกพร่องใน V8: #6751

การอัปเดตแผงรูปแบบ

การรองรับคีย์เวิร์ด revert

ตอนนี้ UI การเติมข้อความอัตโนมัติของแผงรูปแบบจะตรวจหาคีย์เวิร์ด CSS revert ซึ่งจะเปลี่ยนค่าแบบเรียงซ้อนของพร็อพเพอร์ตี้กลับเป็นค่าที่พร็อพเพอร์ตี้จะมีหากไม่มีการเปลี่ยนแปลงการจัดรูปแบบขององค์ประกอบ

การตั้งค่าพร็อพเพอร์ตี้เพื่อเปลี่ยนกลับ

ข้อบกพร่องของ Chromium: #1075437

ตัวอย่างรูปภาพ

วางเมาส์เหนือค่า background-image ในแผงรูปแบบเพื่อดูตัวอย่างรูปภาพในเคล็ดลับเครื่องมือ

วางเมาส์เหนือค่า background-image

ข้อบกพร่องของ Chromium: #1040019

ตอนนี้ตัวเลือกสีใช้สัญกรณ์สีฟังก์ชันที่คั่นด้วยช่องว่างแล้ว

โมดูลสี CSS ระดับ 4 ระบุว่าฟังก์ชันสี เช่น rgb() ควรรองรับอาร์กิวเมนต์ที่คั่นด้วยช่องว่าง เช่น rgb(0, 0, 0) มีค่าเท่ากับ rgb(0 0 0)

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

การใช้อาร์กิวเมนต์ที่คั่นด้วยช่องว่างในแผงรูปแบบ

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

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

เบราว์เซอร์ส่วนใหญ่รองรับไวยากรณ์อาร์กิวเมนต์ที่คั่นด้วยช่องว่างมาสักระยะหนึ่งแล้ว ดูฉันใช้สัญกรณ์สีเชิงฟังก์ชันที่คั่นด้วยช่องว่างได้ไหม

ข้อบกพร่องของ Chromium: #1072952

การเลิกใช้งานแผงคุณสมบัติในแผงองค์ประกอบ

เลิกใช้งานแผงคุณสมบัติในแผงองค์ประกอบแล้ว เรียกใช้ console.dir($0) ในคอนโซลแทน

แผงพร็อพเพอร์ตี้ที่เลิกใช้งานแล้ว

ข้อมูลอ้างอิง:

การรองรับทางลัดของแอปในแผง Manifest

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

ดูข้อมูลเพิ่มเติมได้ที่ทำสิ่งต่างๆ ได้อย่างรวดเร็วด้วยทางลัดของแอป

ทางลัดของแอปในแผง Manifest

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

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

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

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

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

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