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

Kayce Basques

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

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

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

แท็บปัญหา

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

การอัปเดตแผงสไตล์

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

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

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

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

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

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

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

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

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

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

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

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

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

รายการทุกอย่างที่ครอบคลุมในชุดมีอะไรใหม่ใน DevTools