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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

ข้อมูลอัปเดตเกี่ยวกับโปรแกรมอัดเสียง

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

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

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

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

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

ปัญหาใน Chromium: 1400243

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

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

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

การตั้งค่าเครื่องบันทึกให้ใช้ตัวเลือก Pierce และตัวเลือก Pierce ในการทำงาน

ปัญหาใน 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

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

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

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

ปัญหาใน Chromium: 1401107

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

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

ปัญหาใน Chromium: 1172985

การทำเครื่องหมาย Logpoint และเบรกพอยท์แบบมีเงื่อนไขในคอนโซล

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

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

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

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

ลิงก์ Anchor ข้างข้อความ Logpoint ที่เปิดเครื่องมือแก้ไขจุดพัก

ปัญหาใน Chromium: 1027458

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

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

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

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

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

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

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

ปัญหาใน Chromium: 883325

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

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

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

แบนเนอร์การเลิกใช้งานที่ด้านบนของ Profiler

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

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

ปัญหาใน Chromium: 1417647

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

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

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

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

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

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

Lighthouse 10

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

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

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

ปิดใช้การนำทางเวอร์ชันเดิม

ตอนนี้ Lighthouse 10 ใช้ Moto G Power เป็นอุปกรณ์จำลองเริ่มต้น DevTools ได้เพิ่มอุปกรณ์นี้ลงในการตั้งค่า การตั้งค่า > อุปกรณ์

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)
    • Console: Arrow down เลือกคำแนะนำแรกและคำแนะนำจะได้รับTabคำใบ้ (1276960)
  • เครื่องมือสำหรับนักพัฒนาเว็บได้เพิ่มเบรกพอยท์ของ Listener เหตุการณ์เพื่อให้คุณหยุดชั่วคราวได้เมื่อเปิดหน้าต่างการแสดงภาพซ้อนภาพของเอกสาร (1315352)
  • DevTools ได้ตั้งค่าวิธีแก้ปัญหาที่จะแสดงอาร์ติแฟกต์ Vue2 webpack เป็น JavaScript อย่างถูกต้อง (1416562)
  • การตั้งค่าคอนโซลจะได้รับการเปลี่ยนชื่อให้ดีขึ้นเป็น "ขยายข้อความ console.trace() โดยอัตโนมัติ" (1139616)

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

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

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

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

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

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