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

การอัปเดตโปรแกรมอัดเสียง

การรองรับส่วนขยายการเล่นซ้ำ

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

ลองใช้ส่วนขยายตัวอย่าง เลือกตัวเลือกการเล่นซ้ำที่กำหนดเองแบบใหม่เพื่อเปิด UI การเล่นซ้ำที่กำหนดเอง

หากต้องการปรับแต่งโปรแกรมอัดเสียงตามความต้องการและผสานรวมเข้ากับเครื่องมือ ให้ลองพัฒนาส่วนขยายของคุณเองโดยไปที่ chrome.devtools.recorder API และดูตัวอย่างส่วนขยายเพิ่มเติม

ปัญหาเกี่ยวกับ Chromium: 1400243

บันทึกพร้อมตัวเลือกเจาะร่างกาย

นอกเหนือจากตัวเลือก CSS, ARIA, ข้อความ และ XPath แบบกำหนดเอง คุณสามารถบันทึกโดยใช้ตัวเลือก Pierce ได้แล้ว ตัวเลือกเหล่านี้มีลักษณะการทำงานเหมือนกับ CSS แต่ก็สามารถเจาะผ่านรากที่เป็นเงาได้ด้วย

เริ่มการบันทึกใหม่ในหน้าเว็บด้วย Shadow DOM และทำเครื่องหมายที่ Pierce ในประเภทตัวเลือกที่จะบันทึก บันทึกการโต้ตอบกับองค์ประกอบใน Shadow DOM และตรวจสอบขั้นตอนที่เกี่ยวข้อง

ปัญหาเกี่ยวกับ Chromium: 1411188

ส่งออกเป็นสคริปต์ Puppeteer ด้วยการวิเคราะห์ Lighthouse

โปรแกรมอัดเสียงเปิดตัวตัวเลือกการส่งออกใหม่ ได้แก่ Puppeteer (รวมถึงการวิเคราะห์ Lighthouse) Puppeteer จะช่วยให้คุณควบคุม Chrome ให้เป็นแบบอัตโนมัติได้ Lighthouse ช่วยให้คุณบันทึกและปรับปรุงประสิทธิภาพเว็บไซต์ได้

เปิดไฟล์บันทึกเสียง คลิก ส่งออก เลือกตัวเลือกใหม่ แล้วบันทึกไฟล์ .js

เรียกใช้สคริปต์ Puppeteer เพื่อรับรายงาน Lighthouse ในไฟล์ flow.report.html

รับส่วนขยาย

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

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

ปัญหาเกี่ยวกับ Chromium: 1417104, 1413168

องค์ประกอบ > การอัปเดตสไตล์

เอกสารประกอบ CSS

คุณค้นหาเอกสารประกอบเกี่ยวกับพร็อพเพอร์ตี้ CSS วันละกี่ครั้ง องค์ประกอบ > ตอนนี้แผงรูปแบบจะแสดงคำอธิบายสั้นๆ เมื่อคุณวางเมาส์เหนือพร็อพเพอร์ตี้

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

หากคุณรู้จัก CSS ดี คุณอาจพบว่าเคล็ดลับเครื่องมือเป็นเรื่องที่น่ารำคาญ หากต้องการปิดทั้งหมด ให้เลือก ไม่แสดง

หากต้องการเปิดอีกครั้ง ให้ตรวจสอบ การตั้งค่า > ค่ากำหนด > องค์ประกอบ > แสดงเคล็ดลับเครื่องมือเอกสารประกอบ CSS

ปัญหาเกี่ยวกับ Chromium: 1401107

การรองรับการฝัง CSS

องค์ประกอบ > ตอนนี้แผงรูปแบบรู้จักไวยากรณ์ CSS Nest และใช้รูปแบบที่ซ้อนกันกับองค์ประกอบที่เหมาะสมแล้ว

ปัญหาเกี่ยวกับ Chromium: 1172985

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

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

• การเรียกใช้ console.* ครั้งในเบรกพอยท์แบบมีเงื่อนไขโดยมีเครื่องหมายคำถามสีส้ม ?
• ข้อความ Logpoint ที่มีจุดสีชมพู 2 จุด ..

ตอนนี้คอนโซลจะให้ลิงก์ Anchor ที่เหมาะสมไปยังเบรกพอยท์ในไฟล์ต้นฉบับแทนสคริปต์ VM<number> ที่ Chrome สร้างขึ้นเพื่อเรียกใช้ JavaScript ส่วนใดก็ตามใน V8

คลิกลิงก์ถัดจากข้อความเบรกพอยท์เพื่อข้ามไปยังตัวแก้ไขเบรกพอยท์โดยตรง

ปัญหาเกี่ยวกับ Chromium: 1027458

ละเว้นสคริปต์ที่ไม่เกี่ยวข้องระหว่างการแก้ไขข้อบกพร่อง

เพื่อช่วยให้คุณมุ่งเน้นไปที่ส่วนที่สำคัญที่สุดของโค้ด ตอนนี้คุณสามารถเพิ่มสคริปต์ที่ไม่เกี่ยวข้องลงในรายการละเว้นได้จากผังไฟล์ในแหล่งที่มา > โดยตรง หน้า

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

สคริปต์และโฟลเดอร์ที่อยู่ในรายการละเว้นทั้งหมดจะเป็นสีเทาในแผนผังไฟล์

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

ปัญหาของ Chromium: 883325

เริ่มเลิกใช้งานเครื่องมือสร้างโปรไฟล์ JavaScript แล้ว

ตั้งแต่ Chrome 58 ทีม DevTools วางแผนที่จะเลิกใช้งานเครื่องมือสร้างโปรไฟล์ JavaScript และให้นักพัฒนาซอฟต์แวร์ Node.js และ Deno ใช้แผงประสิทธิภาพในการทำโปรไฟล์ประสิทธิภาพของ CPU ของ JavaScript

DevTools เวอร์ชัน (112) นี้เริ่มการเลิกใช้งาน JavaScript Profiler 4 ระยะ แผงเครื่องมือสร้างโปรไฟล์ JavaScript จะแสดงแบนเนอร์คำเตือนที่เกี่ยวข้อง

ใช้แผงประสิทธิภาพเพื่อกำหนดโปรไฟล์ CPU แทนการใช้ Profiler

ดูข้อมูลเพิ่มเติมและแสดงความคิดเห็นใน RFC และ crbug.com/1354548 ที่เกี่ยวข้อง

ปัญหาเกี่ยวกับ Chromium: 1417647

จำลองคอนทราสต์ที่ลดลง

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

โปรดทราบว่าตัวเลือกรายการได้รับการอัปเดตเพื่อแจ้งให้คุณทราบถึงความไวของสีที่ตัวเลือกแสดง

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

ปัญหาเกี่ยวกับ Chromium: 1412719, 1412721

ประภาคาร 10

ขณะนี้แผง Lighthouse จะเรียกใช้ Lighthouse 10.0.1 โปรดดูรายละเอียดเพิ่มเติมที่หัวข้อมีอะไรใหม่ใน Lighthouse 10.0.1

ดูข้อมูลเบื้องต้นในการใช้แผง Lighthouse ใน DevTools ได้ที่ Lighthouse: เพิ่มประสิทธิภาพความเร็วเว็บไซต์

Lighthouse > การนำทางเดิมจะปิดใช้อยู่โดยค่าเริ่มต้น ตัวเลือกนี้ใช้การกำหนดค่า Lighthouse แบบเดิมในโหมดการไปยังส่วนต่างๆ

ตอนนี้ Lighthouse 10 ใช้ Moto G Power เป็นอุปกรณ์การจำลองเริ่มต้น เครื่องมือสำหรับนักพัฒนาเว็บเพิ่มอุปกรณ์นี้ใน การตั้งค่า > อุปกรณ์

ปัญหาเกี่ยวกับ Chromium: 772558

คำเตือนของคอนโซลให้นำเครื่องจัดการการดึงข้อมูลโปรแกรมทำงานของบริการที่ไม่มีการดำเนินการออก

Chrome 112 ข้ามตัวแฮนเดิลสำหรับดึงข้อมูลของ Service Worker ที่ไม่ต้องดำเนินการ (ไม่มีการดำเนินการ) เนื่องจากอาจทำให้การนำทางช้าลงแต่ไม่เป็นไปตามวัตถุประสงค์ เว็บไซต์ของคุณไม่จําเป็นต้องใช้ตัวแฮนเดิลดังกล่าวเพื่อจัดว่าเป็น Progressive Web App อีกต่อไป

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

ปัญหาเกี่ยวกับ Chromium: 1347319

ไฮไลต์เบ็ดเตล็ด

การแก้ไขที่สำคัญในรุ่นนี้มีดังนี้

• แหล่งที่มา > ตอนนี้แผงเบรกพอยท์แสดงเส้นทางไฟล์ที่แตกต่างกันข้างชื่อไฟล์ที่กำกวม (1403924)
• ตอนนี้ส่วนหลักในแผนภูมิแบบเปลวไฟของแผงประสิทธิภาพจะระบุ CpuProfiler::StartProfiling เป็น Profiler Overhead (1358602)
• เครื่องมือสำหรับนักพัฒนาเว็บได้ปรับปรุงการเติมข้อความอัตโนมัติ:
  • แหล่งที่มา: การเติมคำใดก็ตามที่สอดคล้องกัน (1320204)
  • คอนโซล: Arrow down เลือกคำแนะนำแรกและคำแนะนำที่ได้รับคำแนะนำ Tab รายการ (1276960)
• DevTools เพิ่มเบรกพอยท์ของ Listener เหตุการณ์เพื่อช่วยให้คุณหยุดชั่วคราวได้เมื่อเปิดหน้าต่างการแสดงภาพซ้อนภาพในเอกสาร (1315352)
• เครื่องมือสำหรับนักพัฒนาเว็บตั้งค่าวิธีแก้ปัญหาเบื้องต้นที่แสดงอาร์ติแฟกต์ Webpack Vue2 เป็น JavaScript ได้อย่างถูกต้อง (1416562)
• การตั้งค่าคอนโซลมีชื่อที่ดีกว่าเดิม: ขยายข้อความconsole.trace() โดยอัตโนมัติ (1139616)

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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