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

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

Jecelyn Yeen

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

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

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

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

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

ประภาคาร 6 ในแผงประภาคาร

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

Lighthouse 6.0 เปิดตัวเมตริกใหม่ 3 เมตริกในรายงาน ได้แก่ Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) และ Total block 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)

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

ปัญหา Chromium #1096008

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

ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บสามารถรองรับฟีเจอร์ภาษา JavaScript ล่าสุดบางรายการได้ดียิ่งขึ้น

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

ปัญหาเกี่ยวกับ Chromium #1083214, #1073903, #1083797

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

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

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

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

คำเตือนทางลัดของแอป

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

เหตุการณ์ `respondWith` ของโปรแกรมทำงานของบริการในแท็บเวลา

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

โปรแกรมทำงานของบริการ "responseWith"

ปัญหา Chromium #1066579

การแสดงผลที่สอดคล้องกันของแผงที่คำนวณแล้ว

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

ปัญหา Chromium #1073899

การชดเชยไบต์โค้ดสำหรับไฟล์ WebAssembly

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

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

ปัญหา Chromium #1071432

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

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

ปัญหา Chromium #800028

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

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

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

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

ปัญหา Chromium #1082963

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

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

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

ปัญหา Chromium #1055875

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

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

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

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

ปัญหา Chromium #912581

การปรับเวลาการไปยังส่วนต่างๆ ในแผงประสิทธิภาพ

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

ปรับเวลาการไปยังส่วนต่างๆ ให้สอดคล้องกันในแผงประสิทธิภาพ

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

ปัญหา Chromium #974550

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

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

เบรกพอยท์

ปัญหา Chromium #1041830

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

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

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

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

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