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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ปัญหาของ 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

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

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

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

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

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

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

ประภาคาร 10

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • ตอนนี้แผงแหล่งที่มา > เบรกพอยท์จะแสดงเส้นทางไฟล์ที่แตกต่าง ถัดจากชื่อไฟล์ที่กำกวม (1403924)
  • ตอนนี้ส่วนหลักในแผนภูมิ Flame ของแผงประสิทธิภาพจะระบุ 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 สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ

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

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

ยกเลิก Chrome 82 แล้ว

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59