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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

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

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

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

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

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

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

ปัญหา Chromium: 1400243

บันทึกด้วยตัวเลือกเจาะ

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

เริ่มการบันทึกใหม่ในหน้าเว็บด้วย Shadow DOM และทำเครื่องหมายที่ ช่องทำเครื่องหมาย Pierce ในประเภทตัวเลือกที่จะบันทึก บันทึกการโต้ตอบกับองค์ประกอบใน 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

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

หากคุณคุ้นเคยกับ CSS เป็นอย่างดี คุณอาจพบว่าเคล็ดลับเครื่องมือรบกวน หากต้องการปิดทั้งหมด ให้เลือกช่องทำเครื่องหมาย Don't show

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

ปัญหา Chromium: 1401107

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

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

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

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

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

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

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

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

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

ปัญหา Chromium: 1027458

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

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

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

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

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

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

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

ปัญหา Chromium: 883325

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

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

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

แบนเนอร์การเลิกใช้งานที่ด้านบนของเครื่องมือวิเคราะห์

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

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

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

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

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

ตัวเลือกลดคอนทราสต์ที่เลือกไว้ในส่วนฟังก์ชันการทำงาน &quot;จําลองข้อบกพร่องด้านการมองเห็น&quot;

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

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

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

ประภาคาร 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 แบบ No-Op (ไม่มีการดำเนินการ) เนื่องจากอาจทำให้การไปยังส่วนต่างๆ ช้าลงแต่ไม่มีจุดประสงค์ ไม่จำเป็นต้องใช้ตัวแฮนเดิลดังกล่าวอีกต่อไปเพื่อให้เว็บไซต์ของคุณมีคุณสมบัติเป็น Progressive Web App

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

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

ปัญหา Chromium: 1347319

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

การแก้ไขที่น่าสังเกตบางส่วนในรุ่นนี้ ได้แก่

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

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

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

ติดต่อทีม Chrome DevTools

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

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

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