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

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

Kayce Basques

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

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

โปรดดูค้นหาและแก้ไขปัญหาด้วยแท็บปัญหาเกี่ยวกับ 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

ตัวอย่าง Console ที่ใช้คำศัพท์เดิมที่ "แก้ปัญหาแล้ว"

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

ตัวอย่างคอนโซลที่ใช้คําศัพท์ใหม่ว่า "ดำเนินการแล้ว"

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

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

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

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

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

ข้อบกพร่องของ 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 สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ