มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ (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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

รายการทุกอย่างที่ครอบคลุมในชุดมีอะไรใหม่ใน DevTools