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

Jecelyn Yeen

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

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

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

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

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

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

ดูและไฮไลต์โค้ดโฟลว์ของผู้ใช้ในเครื่องบันทึก

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

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

มุมมองโค้ดในเครื่องบันทึก

ปัญหาใน Chromium: 1385489

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

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

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

ปัญหาใน Chromium: 1384431

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

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

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

ปัญหาใน Chromium: 1381971

การจัดรูปแบบในที่อัตโนมัติ

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

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

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

ปัญหาใน Chromium: 1383453, 1382752, 1382397

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

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

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

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

ตัวอย่างในบรรทัดสำหรับ Vue

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

ลิงก์การแมปแหล่งที่มาสำหรับ SASS

ปัญหาใน Chromium: 1385374, 1385632, 1385281, 1385269, 1383892, 1361862, 1383451, 1392106, 1149734

การเติมข้อความอัตโนมัติที่สอดคล้องและใช้งานง่ายในคอนโซล

DevTools ปรับปรุงประสบการณ์การเติมข้อความอัตโนมัติด้วยการเปลี่ยนแปลงต่อไปนี้

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

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

  • Console จะแสดงรายการคำแนะนำที่เติมข้อความอัตโนมัติ โดยมีเส้นประบางๆ รอบตัวเลือกด้านบนเพื่อระบุว่ายังไม่ได้เริ่มการนำทาง เส้นขอบประรอบตัวเลือกการเติมข้อความอัตโนมัติด้านบน

  • Console จะเรียกใช้บรรทัดเมื่อคุณกด Enter ก่อนหน้านี้ระบบจะเติมบรรทัดให้โดยอัตโนมัติด้วยคำแนะนำอันดับแรก หากต้องการเติมข้อความอัตโนมัติ ให้กด Tab หรือ Arrow Right ดำเนินการบรรทัดเมื่อกด Enter

  • คอนโซลจะไฮไลต์ตัวเลือกที่เลือกขณะที่คุณเลื่อนดูรายการคำแนะนำโดยใช้แป้นลัด 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 หรือ Beta เป็นเบราว์เซอร์เริ่มต้นสำหรับการพัฒนา ช่องตัวอย่างเหล่านี้ช่วยให้คุณเข้าถึงฟีเจอร์ล่าสุดของ DevTools ทดสอบ API ของแพลตฟอร์มเว็บที่ล้ำสมัย และช่วยคุณค้นหาปัญหาในเว็บไซต์ก่อนที่ผู้ใช้จะพบ

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

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

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

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