หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Kayce Basques

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

แท็บปัญหาใหม่ในลิ้นชักนี้มีจุดประสงค์เพื่อช่วยลดความเหนื่อยล้าของการแจ้งเตือนและความยุ่งเหยิงในคอนโซล ปัจจุบันคอนโซลเป็นพื้นที่ส่วนกลางสำหรับนักพัฒนาเว็บไซต์ ไลบรารี เฟรมเวิร์ก และ Chrome เองในการบันทึกข้อความ คำเตือน และข้อผิดพลาด แท็บปัญหาจะแสดงคำเตือนจากเบราว์เซอร์ในลักษณะที่มีโครงสร้าง รวบรวม และดำเนินการได้ รวมถึงลิงก์ไปยังแหล่งข้อมูลที่ได้รับผลกระทบภายในเครื่องมือสำหรับนักพัฒนาเว็บ และให้คำแนะนำในการแก้ไขปัญหา เมื่อเวลาผ่านไป คำเตือนของ Chrome จำนวนมากขึ้นจะแสดงในแท็บ "ปัญหา" แทนที่จะเป็นคอนโซล ซึ่งจะช่วยลดความยุ่งเหยิงของ 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

เหตุการณ์ Layout Shift ในส่วนประสบการณ์แบบใหม่

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

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

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

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

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

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

ตอนนี้คอนโซลใช้คําว่า 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

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

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