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

Kayce Basques

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

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

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

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

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

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

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

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

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

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

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

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

เหตุการณ์ Layout Shift ในส่วน Experience ใหม่

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

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

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

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

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

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

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

การสนับสนุนคีย์เวิร์ด revert

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• console.dir()
• $0

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

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

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

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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