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

Jecelyn Yeen

การแก้ไขรูปแบบสำหรับเฟรมเวิร์ก CSS-in-JS

ตอนนี้แผงรูปแบบรองรับการแก้ไขรูปแบบที่สร้างด้วย API ของ CSS Object Model (CSSOM) ได้ดียิ่งขึ้น เฟรมเวิร์กและไลบรารี CSS-in-JS จำนวนมากใช้ CSSOM API เบื้องหลังเพื่อสร้างสไตล์

นอกจากนี้ คุณยังแก้ไขรูปแบบที่เพิ่มใน JavaScript โดยใช้ Constructable Stylesheets ได้แล้วตอนนี้ Constructable Stylesheets เป็นวิธีใหม่ในการสร้างและเผยแพร่สไตล์ที่นำกลับมาใช้ซ้ำได้เมื่อใช้ Shadow DOM

เช่น ก่อนหน้านี้คุณจะแก้ไขh1รูปแบบที่เพิ่มด้วย CSSStyleSheet (CSSOM API) ไม่ได้ ตอนนี้คุณแก้ไขได้ในแผงรูปแบบ

ปัญหาใน Chromium #946975

Lighthouse 6 ในแผง Lighthouse

ตอนนี้แผง Lighthouse กำลังเรียกใช้ Lighthouse 6 ดูข้อมูลสรุปการเปลี่ยนแปลงที่สำคัญทั้งหมดได้ในมีอะไรใหม่ใน Lighthouse 6.0 หรือดูรายการการเปลี่ยนแปลงทั้งหมดได้ในบันทึกประจำรุ่น v6.0.0

Lighthouse 6.0 ได้เพิ่มเมตริกใหม่ 3 รายการลงในรายงาน ได้แก่ Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) และ Total Blocking Time (TBT) LCP และ CLS เป็น 2 รายการใน Core Web Vitals ใหม่ของ Google และ TBT เป็นพร็อกซีการวัดในห้องทดลองสำหรับ Core Web Vitals อีกรายการหนึ่ง นั่นคือ First Input Delay

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

เมตริกประสิทธิภาพใหม่ใน Lighthouse 6.0

ปัญหาใน Chromium #772558

การเลิกใช้งาน First Meaningful Paint (FMP)

Lighthouse 6.0 เลิกใช้งาน First Meaningful Paint (FMP) แล้ว นอกจากนี้ เรายังได้นำเมตริกนี้ออกจาก แผงประสิทธิภาพแล้วด้วย Largest Contentful Paint เป็นเมตริกที่แนะนำให้ใช้แทน FMP ดูFirst Meaningful Paint เพื่อดูคำอธิบายสาเหตุที่เลิกใช้งาน

ปัญหาใน Chromium #1096008

การรองรับฟีเจอร์ JavaScript ใหม่

ตอนนี้ DevTools รองรับฟีเจอร์ภาษา JavaScript ล่าสุดบางอย่างได้ดีขึ้นแล้ว ดังนี้

ปัญหาใน Chromium #1083214, #1073903, #1083797

คำเตือนใหม่เกี่ยวกับทางลัดของแอปในแผงไฟล์ Manifest

ทางลัดของแอปช่วยให้ผู้ใช้เริ่มงานทั่วไปหรือที่แนะนำภายในเว็บแอปได้อย่างรวดเร็ว

ตอนนี้แผง Manifest จะแสดงคำเตือนในกรณีต่อไปนี้

  • ไอคอนทางลัดของแอปมีขนาดเล็กกว่า 96x96 พิกเซล
  • ไอคอนทางลัดของแอปและไอคอน Manifest ไม่เป็นสี่เหลี่ยมจัตุรัส (เนื่องจากระบบจะละเว้น)

คำเตือนเกี่ยวกับทางลัดของแอป

ปัญหาใน Chromium #955497

เหตุการณ์ Service Worker respondWith ในแท็บ Timing

ตอนนี้แท็บ Timing ของแผงเครือข่ายมีrespondWithเหตุการณ์ของ Service Worker แล้ว respondWith คือเวลาก่อนที่ตัวแฮนเดิลเหตุการณ์ fetch ของ Service Worker จะทำงานจนถึงเวลาที่พรอมิส respondWith ของตัวแฮนเดิล fetchได้รับการจัดการ

`respondWith` ของ Service Worker

ปัญหาใน Chromium #1066579

การแสดงแผง "คำนวณแล้ว" อย่างสม่ำเสมอ

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

ปัญหาใน Chromium #1073899

ออฟเซ็ตไบต์โค้ดสำหรับไฟล์ WebAssembly

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

ออฟเซ็ตไบต์โค้ด

ปัญหาใน Chromium #1071432

การคัดลอกและตัดทีละบรรทัดในแผงแหล่งที่มา

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

ปัญหาใน Chromium #800028

การอัปเดตการตั้งค่าคอนโซล

ยกเลิกการจัดกลุ่มข้อความคอนโซลเดียวกัน

ตอนนี้ปุ่มเปิด/ปิดจัดกลุ่มข้อความที่คล้ายกันในการตั้งค่าคอนโซลจะมีผลกับข้อความที่ซ้ำกันแล้ว ก่อนหน้านี้ฟีเจอร์นี้ ใช้ได้กับข้อความที่คล้ายกันเท่านั้น

ตัวอย่างเช่น ก่อนหน้านี้ DevTools จะไม่ยกเลิกการจัดกลุ่มข้อความ hello แม้ว่าจะไม่ได้เลือกจัดกลุ่มข้อความที่คล้ายกัน ก็ตาม ตอนนี้ระบบจะยกเลิกการจัดกลุ่มข้อความ hello ดังนี้

ปัญหาใน Chromium #1082963

การคงการตั้งค่าบริบทที่เลือกไว้เท่านั้น

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

บริบทที่เลือกไว้เท่านั้น

ปัญหาใน Chromium #1055875

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

ข้อมูลแคชการคอมไพล์ JavaScript ในแผงประสิทธิภาพ

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

ข้อมูลแคชการคอมไพล์ JavaScript

ปัญหา #912581 ใน Chromium

แผงประสิทธิภาพเคยแสดงเวลาในไม้บรรทัดตามเวลาที่เริ่มบันทึก ตอนนี้การบันทึกที่ผู้ใช้ไปยังส่วนต่างๆ จะมีการเปลี่ยนแปลง โดย DevTools จะแสดงเวลาของไม้บรรทัดที่สัมพันธ์ กับการไปยังส่วนต่างๆ แทน

จัดแนวเวลาการนำทางในแผงประสิทธิภาพ

นอกจากนี้ เรายังได้อัปเดตเวลาสำหรับเหตุการณ์ DOMContentLoaded, First Paint, First Contentful Paint และ Largest Contentful Paint ให้สัมพันธ์กับการเริ่มต้นการนำทาง ซึ่งหมายความว่าเวลาเหล่านี้จะตรงกับ เวลาที่ PerformanceObserver รายงาน

ปัญหาใน Chromium #974550

ไอคอนใหม่สำหรับเบรกพอยท์ เบรกพอยท์แบบมีเงื่อนไข และ Logpoint

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

เบรกพอยท์

ปัญหาใน Chromium #1041830

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

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

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

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

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

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