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

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

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

ปัญหา 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[
• การไฮไลต์ไวยากรณ์สำหรับช่องส่วนตัว - ตอนนี้ช่องคลาสส่วนตัวได้รับการไฮไลต์ไวยากรณ์และแสดงผลอย่างถูกต้องในแผงแหล่งที่มา
• การไฮไลต์ไวยากรณ์สำหรับโอเปอเรเตอร์ Nullish coalescing - ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บแสดงโอเปอเรเตอร์ Nullish coalescing ในแผงแหล่งที่มาอย่างถูกต้องแล้ว

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

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

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

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

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

ปัญหา Chromium #955497

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

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

ปัญหา Chromium #1066579

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

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

ปัญหา Chromium #1073899

ส่วนต่างของไบต์โค้ดสำหรับไฟล์ WebAssembly

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

ปัญหา Chromium #1071432

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

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

ปัญหา Chromium #800028

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

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

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

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

ปัญหา Chromium #1082963

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

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

ปัญหา Chromium #1055875

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

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

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

ปัญหา Chromium #912581

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

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

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

ปัญหา Chromium #974550

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

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

ปัญหา Chromium #1041830

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

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

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

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

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

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

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