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

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

Jecelyn Yeen

กำลังล้างแผงประสิทธิภาพเมื่อโหลดซ้ำ

ตอนนี้แผงประสิทธิภาพจะล้างทั้งภาพหน้าจอและการติดตามเมื่อคุณคลิกปุ่มเริ่มทำโปรไฟล์และโหลดหน้าซ้ำ

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

กำลังล้างแผงประสิทธิภาพเมื่อโหลดซ้ำ

ปัญหาเกี่ยวกับ Chromium: 1101268, 1382044

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

ดูและไฮไลต์โค้ดการไหลเวียนของผู้ใช้ในโปรแกรมอัดเสียง

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

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

มุมมองโค้ดในโปรแกรมอัดเสียง

ปัญหา Chromium: 1385489

ปรับแต่งประเภทตัวเลือกสำหรับการบันทึก

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

ตัวเลือกใหม่เพื่อปรับแต่งประเภทตัวเลือก

ปัญหา Chromium: 1384431

แก้ไขการไหลเวียนของผู้ใช้ขณะบันทึก

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

การแก้ไขระหว่างการบันทึกโฟลว์ผู้ใช้

ปัญหา Chromium: 1381971

จัดรูปแบบที่พิมพ์ด้วยรูปลักษณ์อัตโนมัติ

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

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

แสดงไฟล์ที่ลดขนาดรูปภาพก่อนและหลังการพิมพ์ที่สวยสะดุดตาแบบอัตโนมัติ

ปัญหาเกี่ยวกับ Chromium: 1383453, 1382752, 1382397

ไฮไลต์ไวยากรณ์ที่ดีขึ้นและการแสดงตัวอย่างในหน้าสำหรับ Vue, SCSS และอื่นๆ

แผงแหล่งที่มาได้ปรับปรุงการไฮไลต์ไวยากรณ์สำหรับรูปแบบไฟล์ที่ใช้งานกันอย่างแพร่หลายหลายรูปแบบ ซึ่งช่วยให้คุณอ่านโค้ดได้ง่ายขึ้นและจดจำโครงสร้างโค้ด ได้แก่ Vue, JSX, Dart, LESS, SCSS, SASS และ CSS แบบอินไลน์

การไฮไลต์ไวยากรณ์ใน Vue

นอกจากนี้ เครื่องมือสำหรับนักพัฒนาเว็บยังปรับปรุงการแสดงตัวอย่างแบบอินไลน์สำหรับ Vue, HTML แบบอินไลน์ และ TSX วางเมาส์เหนือตัวแปรเพื่อดูตัวอย่างค่า

ตัวอย่างแบบอินไลน์สำหรับ Vue

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

ลิงก์การแมปแหล่งที่มาของ SASS

ปัญหาเกี่ยวกับ Chromium: 1385374, 1385632, 1385281, 1385269, 1383892, 1361862, 1383451, {146{1383451, {146

เติมข้อความอัตโนมัติตามหลักการยศาสตร์และสอดคล้องกันในคอนโซล

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

Tab จะใช้สำหรับการเติมข้อความอัตโนมัติเสมอ
ลักษณะการทำงานของ Arrow right และ Enter จะแตกต่างกันไปตามบริบท
การเติมข้อความอัตโนมัติจะทำงานเหมือนกันในเครื่องมือแก้ไขข้อความต่างๆ ในแผงคอนโซล แหล่งที่มา และองค์ประกอบ

ตัวอย่างเช่น ต่อไปนี้คือสิ่งที่จะเกิดขึ้นเมื่อคุณพิมพ์ cons ในคอนโซล

คอนโซลจะแสดงรายการคำแนะนำที่เติมข้อความอัตโนมัติ โดยมีเส้นขอบประเล็กน้อยรอบๆ ตัวเลือกด้านบนเพื่อบ่งบอกว่าระบบยังไม่เริ่มการนำทาง
คอนโซลจะเรียกใช้บรรทัดเมื่อคุณกด Enter ก่อนหน้านี้ ระบบจะเติมบรรทัดที่มีคําแนะนํายอดนิยมให้โดยอัตโนมัติ หากต้องการเติมข้อความอัตโนมัติ ให้กด Tab หรือ Arrow Right
คอนโซลจะไฮไลต์ตัวเลือกที่เลือกไว้เมื่อคุณไปยังรายการคำแนะนำโดยใช้ทางลัด Arrow up และ Arrow down
หากต้องการเติมข้อความอัตโนมัติด้วยตัวเลือกที่เลือกไว้ในระหว่างการนำทาง ให้ใช้แป้นบนแป้นพิมพ์ Tab, Enter หรือ Arrow Right
เมื่อแก้ไขอยู่ตรงกลางของโค้ด เช่น เมื่อเคอร์เซอร์อยู่ระหว่าง n ถึง s ให้ใช้ Tab สำหรับการเติมข้อความอัตโนมัติ Enter เพื่อเรียกใช้บรรทัด และ Arrow Right เพื่อเลื่อนเคอร์เซอร์ไปข้างหน้า

ปัญหาเกี่ยวกับ Chromium: 1399436, 1276960

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

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

ปัญหาการถดถอยในเครื่องมือสำหรับนักพัฒนาเว็บไม่สามารถหยุดคำสั่ง debugger ในสคริปต์ในบรรทัดได้รับการแก้ไขแล้ว (1385374)
การตั้งค่าคอนโซลใหม่ที่ให้คุณขยายหรือยุบข้อความ console.trace() รายการได้โดยค่าเริ่มต้น สลับการตั้งค่าผ่านการตั้งค่า > ค่ากำหนด > ขยายข้อความconsole.trace() โดยค่าเริ่มต้น (1139616)
แผงตัวอย่างข้อมูลในแผงแหล่งที่มารองรับการเติมข้อความอัตโนมัติที่ปรับปรุงแล้ว ซึ่งคล้ายกับคอนโซล (772949)

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

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

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

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

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