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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

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

แก้ไขโฟลว์ผู้ใช้ขณะบันทึก

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

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

จัดรูปแบบรูปภาพได้ง่ายๆ ในที่เดียว

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

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

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

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

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

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

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

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

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

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

• 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 DevTools

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

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

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

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