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

Jecelyn Yeen

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

ตอนนี้แผงรูปแบบมีการสนับสนุนที่ดียิ่งขึ้นสำหรับการแก้ไขรูปแบบที่สร้างด้วยออบเจ็กต์ CSS Model (CSSOM) API เฟรมเวิร์กและไลบรารี 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 Block Time (TBT) LCP และ CLS เป็น 2 แพลตฟอร์มหลักของ Google Core Web Vitals และ TBT เป็นพร็อกซีการวัดผลในห้องทดลองสำหรับ Core Web Vitals อีกรายการ ซึ่งก็คือ First Input ล่าช้า

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

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

ปัญหา Chromium #772558

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

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

ปัญหา Chromium #1096008

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

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

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

ปัญหาเกี่ยวกับ 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 จะยังคงอยู่ ก่อนหน้านี้คือการตั้งค่า ได้รับการรีเซ็ตทุกครั้งที่คุณปิดและเปิดเครื่องมือสำหรับนักพัฒนาเว็บอีกครั้ง การเปลี่ยนแปลงนี้ทำให้การตั้งค่าลักษณะการทำงาน สอดคล้องกับตัวเลือกการตั้งค่าคอนโซลอื่นๆ

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

ปัญหา 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 สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ

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

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