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

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

Sofia Emelianova

Jecelyn Yeen

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

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

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

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

UI การเล่นซ้ำที่กำหนดเอง

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

ปัญหา Chromium: 1400243

บันทึกพร้อมตัวเลือกเพียร์ซ

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

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

การตั้งค่าโปรแกรมอัดเสียงให้ใช้ตัวเลือกเพียร์ซ ในการใช้งานตัวเลือกเพียร์

ปัญหา Chromium: 1411188

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

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

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

ส่งออก Puppeteer (รวมถึงการวิเคราะห์ Lighthouse)

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

เปิดรายงาน Lighthouse ใน Chrome

ดาวน์โหลดส่วนขยาย

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

ตัวเลือกรับส่วนขยายในเมนูแบบเลื่อนลง ส่งออก

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

ปัญหา Chromium: 1417104, 1413168

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

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

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

เคล็ดลับเครื่องมือพร้อมเอกสารประกอบเกี่ยวกับพร็อพเพอร์ตี้ CSS

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

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

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

ปัญหา Chromium: 1401107

การรองรับการซ้อน CSS

ตอนนี้แผงองค์ประกอบ > รูปแบบ รับรู้ไวยากรณ์ CSS Nesting และใช้รูปแบบที่ซ้อนกันกับองค์ประกอบด้านขวาแล้ว

ปัญหา Chromium: 1172985

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

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

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

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

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

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

ลิงก์ Anchor ที่อยู่ข้างข้อความจุดตรวจสอบที่เปิดเครื่องมือแก้ไขเบรกพอยท์

ปัญหา Chromium: 1027458

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

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

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

เมนูตามบริบทของโฟลเดอร์และสคริปต์ที่มีตัวเลือกที่เกี่ยวข้องกับการละเว้น

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

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

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

ปัญหา Chromium: 883325

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

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

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

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

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

ปัญหา Chromium: 1417647

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

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

ตัวเลือกคอนทราสต์ที่ลดลงที่เลือกไว้ในฟังก์ชัน "จำลองภาวะบกพร่องทางการมองเห็น"

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

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

ปัญหา Chromium: 1412719, 1412721

Lighthouse 10

ตอนนี้แผง Lighthouse จะทำงาน Lighthouse 10.0.1 ดูรายละเอียดเพิ่มเติมได้ที่มีอะไรใหม่ใน Lighthouse 10.0.1

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

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

ปิดใช้การนำทางแบบเดิมแล้ว

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

Moto G Power ในรายการอุปกรณ์

ปัญหาของ Chromium: 772558

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

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

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

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

ปัญหาของ Chromium: 1347319

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

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

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

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

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

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

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

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