เมื่อต้นเดือนตุลาคมไมโครซอฟท์ได้ประกาศออกส่วนขยาย Microsoft Edge Tools สำหรับ Visual Studio Code เครื่องมือซึ่งจะช่วยอำนวยความสะดวกให้กับการตรวจสอบและดีบักเว็บ ด้วยการดึง DevTools พร้อมหน้าเว็บจากเบราว์เซอร์ Microsoft Edge (Chromium) มาแสดงผลให้นักพัฒนาเรียกใช้งานได้จากภายใน VS Code ได้โดยตรง

ส่วนขยาย Microsoft Edge Tools เป็นรุ่นใช้งานจริง (general availability) ของ Elements for Microsoft Edge ซึ่งเปิดให้ทดสอบมาตั้งแต่ปีที่แล้ว และยังได้ผนวกเอาความสามารถของ Network for Microsoft Edge มาไว้ภายใต้ส่วนขยายเดียวกัน

ภาพโปรโมทจากทวิตเตอร์เมื่อครั้งเปิดตัวในชื่อ Elements for Microsoft Edge

ทำให้ความสามารถของส่วนขยายในตอนนี้ไม่ใช่เป็นแค่เพียงดึงแท็บ Elements จาก Edge DevTools มาเพือดีบัก DOM เท่านั้น แต่ยังสามารถตรวจสอบ request/response ที่เบราว์เซอร์ รับ/ส่ง ได้จากแท็บ Network อีกด้วย

ภาพตัวอย่างการใช้งานแท็บ Network

ไม่เพียงแค่นั้น ส่วนขยายเวอร์ชันนี้ได้เพิ่มตัวเลือกให้ผู้ใช้สามารถตั้งค่าการเปิด Edge ในโหมด headless หรือการเลือกเปิดเบราว์เซอร์ขึ้นมาใช้งานโดยไม่แสดงผลเป็นหน้าต่างใหม่ ช่วยแก้ปัญหาให้กับผู้ใช้เครื่อง Mac ซึ่งจะไม่สามารถใช้งานส่วนขยายได้เมื่อหน้าต่างเบราว์เซอร์โหมดปกติถูกซ่อนจากหน้าจอ

ภาพตัวอย่างการใช้งานแท็บ Elements เมื่อเปิดเบราว์เซอร์ในโหมดปกติ

ภาพตัวอย่างการใช้งานแท็บ Elements เมื่อเปิดเบราว์เซอร์ในโหมด headless

สำหรับเหตุผลในการพัฒนาส่วนขยาย Microsoft Edge Tools ไมโครซอฟท์กล่าวว่าแม้ VS Code จะมาพร้อมกับฟีเจอร์หลายๆ อย่างที่ทำให้การเขียนโปรแกรมสะดวกขึ้น แต่เมื่อนักพัฒนา (รวมถึงทางไมโครซอฟท์เอง) ต้องการปรับแต่งหน้าเว็บอย่างละเอียด DevTools บนเบราว์เซอร์นั้นยังคงเป็นเครื่องมือที่ใช้งานได้ดีกว่ามาก (เนื่องจากนักพัฒนาสามารถทดลองแก้ไขโค้ด HTML/CSS แล้วดูผลที่เปลี่ยนแปลงได้ทันที - ผู้เขียน)

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

ท่านใดสนใจเข้าไปศึกษาวิธีการใช้งานได้ที่หน้าดาวน์โหลดของส่วนขยายครับ

ที่มา - Microsoft Edge Blog via MSPoweruser