ฟีเจอร์ใหม่ใน Microsoft Edge ช่วยนักพัฒนาเว็บวัดผลและแก้ปัญหาได้ตรงจุด

อัปเดตสำหรับนักพัฒนาเว็บใน Microsoft Edge ครอบคลุมตั้งแต่การวัดประสิทธิภาพและดีบัก ไปจนถึงการรองรับการทำงานร่วมกับเอเจนต์ AI และการจัดการข้อความในช่องกรอกข้อมูล จุดที่ควรดูควบคู่กับแต่ละฟีเจอร์คือสถานะการใช้งาน: บางอย่างมีอยู่ในเอกสารหรือเครื่องมือ DevTools แล้ว บางอย่างยังเน้นให้ทดลอง และบางอย่าง—เช่นองค์ประกอบเมนูแบบเนทีฟ—ยังเป็นเพียงแผน 16333940

วัดการเปลี่ยนหน้าที่ช้าในแอปหน้าเดียว

ตัวชี้วัดการโหลดหน้าเว็บแบบเดิมอาจไม่บอกภาพทั้งหมดของแอปหน้าเดียว (single-page app หรือ SPA) เพราะผู้ใช้เปลี่ยนมุมมองได้โดยไม่ต้องโหลดเอกสารใหม่ทั้งหน้า Edge เพิ่มรายการข้อมูลใน Performance API สองประเภทเพื่อช่วยตรวจสอบการเปลี่ยนแปลงเหล่านี้ ได้แก่ soft-navigation ซึ่งรายงานการเปลี่ยนสถานะประวัติภายในเอกสารเดียวที่เกิดจากการโต้ตอบของผู้ใช้ และ interaction-contentful-paint ซึ่งรายงานเมื่อมีเนื้อหาใหม่ปรากฏในส่วนของหน้าที่เปลี่ยนไปหลังการโต้ตอบ 40

บันทึกการอัปเดตของ Edge ยังกล่าวถึง heuristics สำหรับตรวจจับ soft navigation เพื่อเก็บข้อมูลประสิทธิภาพของ SPA ด้วย ข้อมูลเหล่านี้ช่วยให้นักพัฒนาตรวจสอบได้ว่าการเปลี่ยนมุมมองเกิดขึ้นเมื่อใด และเนื้อหาที่เกี่ยวข้องปรากฏเมื่อใด แต่เป็นสัญญาณสำหรับวิเคราะห์ปัญหา ไม่ใช่เครื่องมือที่แก้ปัญหาความช้าให้โดยอัตโนมัติ 3940

แยกเวลารันโค้ดออกจากงานที่เบราว์เซอร์ทำ

JavaScript Self-Profiling markers เพิ่มบริบทเกี่ยวกับงานของเบราว์เซอร์ระหว่างตัวอย่างการทำงานของ JavaScript เช่น การจัดรูปแบบ การคำนวณเลย์เอาต์ การวาดภาพ และการเก็บกวาดหน่วยความจำ วิธีนี้ช่วยให้นักพัฒนาพอแยกได้ว่าเวลาที่ใช้ไปอยู่กับโค้ดของแอป หรือกับงานส่วนอื่นของเบราว์เซอร์ ก่อนนำไปใช้ในกระบวนการทำงานจริง ควรตรวจสอบเอกสาร Edge และสถานะการเปิดใช้งานฟีเจอร์ในรุ่นที่ใช้อยู่ก่อน 1

ส่งคำขอเครือข่ายซ้ำและแก้ไขก่อนทดสอบ

คำสั่ง Resend ในเครื่องมือ Network จะส่งคำขอที่บันทึกไว้ซ้ำได้โดยไม่ต้องโหลดหน้าเว็บใหม่ จึงสะดวกสำหรับตรวจสอบผลเมื่อส่งคำขอเดิมอีกครั้ง 18

ส่วนเวิร์กโฟลว์ Edit and resend as Fetch ให้แก้ไขคำขอที่เลือกแล้วลองส่งเป็นการเรียก fetch() ใน Console ได้ เครื่องมือเหล่านี้ช่วยให้การดีบักคำขอสะดวกขึ้น แต่ไม่ได้ทำให้การเชื่อมต่อเครือข่ายเร็วขึ้นโดยตรง โดย Microsoft กล่าวถึงเวิร์กโฟลว์ใหม่นี้ในการอัปเดตสำหรับนักพัฒนา และมีเอกสาร Edge อธิบายการส่งคำขอซ้ำ 118

เตรียมเว็บไซต์ให้เอเจนต์โต้ตอบผ่าน WebMCP

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

จัดการช่วงข้อความในช่องกรอกข้อมูลด้วย OpaqueRange

OpaqueRange ใช้แทนช่วงข้อความที่ยังเปลี่ยนแปลงได้ภายในค่าของ <input> แบบข้อความหรือ <textarea> นักพัฒนาสามารถนำช่วงดังกล่าวไปสร้างการโต้ตอบที่อิงตำแหน่งข้อความในช่องกรอก เช่น วางส่วนติดต่อที่เกี่ยวข้องหรือทำไฮไลต์ โดยไม่ต้องเปิดเผยโครงสร้างภายในของโหนดข้อความในคอนโทรล Microsoft ระบุ OpaqueRange ไว้ในการอัปเดตแพลตฟอร์มเว็บของ Edge 152 133

ทดสอบ Web Install API โดยเข้าใจข้อจำกัด

Web Install API เปิดให้เว็บไซต์ขอให้เบราว์เซอร์ติดตั้งเว็บแอปอื่นบนอุปกรณ์ ผ่านฟังก์ชันแบบ asynchronous navigator.install() และใช้ประสบการณ์ติดตั้งเว็บแอปที่มีมาในเบราว์เซอร์ Microsoft ประกาศให้ทดลอง API นี้บนเว็บไซต์ของนักพัฒนาผ่าน origin trial ใน Edge ซึ่งเป็นช่องทางทดสอบ ไม่ได้หมายความว่าจะรองรับในเบราว์เซอร์ทุกตัวหรือเปิดให้ผู้ใช้ทุกคนแล้ว 6

องค์ประกอบเมนูแบบเนทีฟยังเป็นแผน

Microsoft ยังได้กล่าวถึงองค์ประกอบ <menu> แบบเนทีฟที่ตั้งใจให้มีพฤติกรรมเมนูมาในตัว อย่างไรก็ตาม ฟีเจอร์นี้ยังอยู่ในแผน นักพัฒนาจึงไม่ควรถือว่าใช้งานได้ทั่วไป หรือสร้างฟังก์ชันสำหรับระบบจริงโดยพึ่งพาฟีเจอร์นี้ จนกว่าจะยืนยันการรองรับได้ 1

สรุป: อะไรลองได้ และอะไรควรติดตามต่อ

เอกสาร Edge ระบุการส่งคำขอซ้ำใน DevTools และบันทึก Edge 152 ระบุ OpaqueRange ส่วน Web Install API มีช่องทางทดลองแบบ origin trial สำหรับรายการ soft-navigation, WebMCP และ JavaScript Self-Profiling markers ควรตรวจสอบรุ่น Edge และเงื่อนไขการทดลองล่าสุดก่อนนำไปพึ่งพาในงานจริง ขณะที่องค์ประกอบเมนูแบบเนทีฟยังเป็นเพียงแผน 1618333940