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

Jecelyn Yeen

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

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

นอกจากนี้ คุณยังแก้ไขรูปแบบที่เพิ่มใน JavaScript โดยใช้สไตล์ชีตที่สร้างได้ได้แล้วตอนนี้ 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 ล่าสุดบางอย่างได้ดีขึ้นแล้ว ดังนี้

  • การเติมข้อความอัตโนมัติของไวยากรณ์การเชื่อมโยงแบบออปชันนัล - ตอนนี้การเติมข้อความอัตโนมัติของพร็อพเพอร์ตี้ใน Console รองรับไวยากรณ์การเชื่อมโยงแบบออปชันนัลแล้ว เช่น ตอนนี้ name?. ใช้ได้แล้วนอกเหนือจาก name. และ name[
  • การไฮไลต์ไวยากรณ์สำหรับฟิลด์ส่วนตัว - ตอนนี้ฟิลด์คลาสส่วนตัวจะได้รับการไฮไลต์ไวยากรณ์และจัดรูปแบบอย่างถูกต้องในแผงแหล่งที่มา
  • การไฮไลต์ไวยากรณ์สำหรับตัวดำเนินการรวมค่า Null - ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บจะจัดรูปแบบโค้ด ตัวดำเนินการรวมค่า Null ในแผงแหล่งที่มาได้อย่างถูกต้องแล้ว

ปัญหาใน 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 ทั้งหมดอย่างสม่ำเสมอ ก่อนหน้านี้แผง Computed จะผสานรวมภายในแผง Styles เมื่อความกว้างของวิวพอร์ตของ DevTools แคบ

ปัญหาใน Chromium #1073899

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

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

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

ปัญหาใน Chromium #1071432

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

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

ปัญหาใน Chromium #800028

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

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

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

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

ปัญหาใน Chromium #1082963

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

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

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

ปัญหาใน Chromium #1055875

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

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

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

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

ปัญหาใน Chromium #912581

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

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

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

ปัญหาใน Chromium #974550

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

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

เบรกพอยท์

ปัญหาเกี่ยวกับ Chromium #1041830

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

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

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

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

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

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