Tags:
Node Thumbnail

นับเป็นข่าวดีสำหรับท่านผู้อ่านที่เป็นนักพัฒนาเว็บ ซึ่งมักจะต้องเปิด Developer Tools (DevTools) บนเว็บเบราว์เซอร์เพื่อดีบักและแก้ไขข้อผิดพลาดของเว็บที่กำลังพัฒนากันอยู่บ่อยๆ

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

ภาพจากทวิตเตอร์ @VisualStudio

No Description

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

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

การที่ส่วนขยาย Elements for Microsoft Edge ช่วยทำให้นักพัฒนาสามารถแก้ไขโค้ดต้นฉบับไปพร้อมๆ กับดูผลลัพธ์และดีบัก DOM ของหน้าเว็บได้ ภายใต้ VS Code เพียงหน้าต่างเดียวน่าจะช่วยลดความน่าสับสนที่เกิดจากเหตุการณ์ข้างต้นไปได้มาก

No Description

ส่วนขยาย Elements for Microsoft Edge ยังคงอยู่ในเวอร์ชันพรีวิว แต่ก็สามารถทดลองใช้งานได้แล้ว โดยจำเป็นต้องติดตั้ง

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

ที่มา - Microsoft Edge Blog, ทวิตเตอร์ @VisualStudio, ทวิตเตอร์ @EdgeDevTools

Get latest news from Blognone

Comments

By: 0FFiiz
Windows PhoneAndroidWindows
on 22 July 2019 - 11:36 #1120978
0FFiiz's picture

โห ใช้ DevTools บน IE/Edge ต้องใช้ spec คอมระดับไหนกันล่ะครับเนี่ย ยังหลงเหลือคนใช้อยุ่เหรอ นี่ i7 ram 16 SSD ยังกระตุกรัว ๆ

By: hisoft
ContributorWindows PhoneWindows
on 22 July 2019 - 12:45 #1120988 Reply to:1120978
hisoft's picture

มันก็ Chrome DevTools ไม่ใช่เหรอครับ?

By: 0FFiiz
Windows PhoneAndroidWindows
on 22 July 2019 - 13:32 #1120998 Reply to:1120988
0FFiiz's picture

IE กับ edge มันเป็นของมันเองอะครับ
ถ้าเกิดเว็บทีมี script คำนวณหนัก ๆ นี่

กรีดร้อง

By: Job_The_Gamer
WriterWindows PhoneAndroidWindows
on 22 July 2019 - 14:02 #1121001 Reply to:1120998
Job_The_Gamer's picture

อันนี้เป็น MS Edge เอนจิน Chromium น่ะครับ

ตัว DevTools จริงๆ ก็คือ Chrome DevTools เดิมแต่เอามาปรับแต่งเพิ่มนั่นล่ะ


Achievement Unlocked: Being a Blognone's Writer

By: 0FFiiz
Windows PhoneAndroidWindows
on 22 July 2019 - 14:56 #1121009 Reply to:1121001
0FFiiz's picture

แปลว่าตัวเดิม ก็ยังคงเหมือนสินะครับ 😢

By: sabayjoo_ on 22 July 2019 - 15:38 #1121014 Reply to:1121009

ใช่ครับ แยกกันนะครับ ไม่ใช่ตัวเดียวกัน

By: hisoft
ContributorWindows PhoneWindows
on 22 July 2019 - 15:41 #1121015 Reply to:1121009
hisoft's picture

เค้าตั้งใจจะทิ้งตัวนั้นแล้วเอาตัวใหม่นี้ไปแทนในอนาคตครับ

By: illuminator
ContributorAndroidUbuntuWindows
on 22 July 2019 - 15:25 #1121011
illuminator's picture

ถามว่าจะใช้ Edge ในการ dev เว็บไหม บอกเลยว่าไม่


The softest water wears down the hardest rock.

By: hisoft
ContributorWindows PhoneWindows
on 22 July 2019 - 15:38 #1121013 Reply to:1121011
hisoft's picture

เพราะอะไรครับ?

By: Jirawat
Android
on 22 July 2019 - 18:20 #1121028 Reply to:1121013
Jirawat's picture

IE มันติดในหัวอะ เหมือนว่ามันสืบทอดกันมา บั๊กก็นาจะมีเหมือนๆกัน