มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ (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) ใน คอนโซลแทน

แผงคุณสมบัติที่เลิกใช้งานแล้ว

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

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

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

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

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

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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