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

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

Jecelyn Yeen

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

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

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

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

ปัญหา Chromium #946975

Lighthouse 6 ในแผง Lighthouse

แผง Lighthouse เรียกใช้ Lighthouse 6 ในขณะนี้ อ่านมีอะไรใหม่ใน Lighthouse 6.0 เพื่อดูสรุปการเปลี่ยนแปลงที่สำคัญทั้งหมด หรือดูรายการการเปลี่ยนแปลงทั้งหมดได้ในบันทึกประจำรุ่นของเวอร์ชัน 6.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)

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

ปัญหา Chromium #1096008

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

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

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

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

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

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

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

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

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

ปัญหา Chromium #955497

เหตุการณ์ `respondWith` ของ Service Worker ในแท็บระยะเวลา

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

Service Worker "responseWith"

ปัญหา Chromium #1066579

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

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

ปัญหา Chromium #1073899

การชดเชยไบต์สําหรับไฟล์ WebAssembly

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

การชดเชยไบต์โค้ด

ปัญหา Chromium #1071432

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

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

ปัญหา Chromium #800028

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

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

ตอนนี้การสลับกลุ่มที่คล้ายกันในการตั้งค่า Console จะมีผลกับข้อความที่ซ้ำกัน ก่อนหน้านี้ระบบก็ใช้กับข้อความที่คล้ายกัน

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

ปัญหา Chromium #1082963

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

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

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

ปัญหา 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 DevTools

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

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