Microsoft Edge ใหม่สร้างบนโครงการโอเพนซอร์ส Chromium หากคุณเป็นนักพัฒนา นี่คือรายการ DevTools ใน Microsoft Edge (Chromium) มีเครื่องมือใหม่เพิ่มเข้ามา ทำให้นักพัฒนาสร้างและทดสอบเว็บไซต์ใน Edge ได้ง่ายและรวดเร็วยิ่งขึ้น
รายการ DevTools ใน Edge ใหม่ (Chromium)
DevTools ของ Microsoft Edge (Chromium) แบ่งเป็น 2 หมวดหลัก:
- Core Tools (เครื่องมือหลัก)
- Extensions (ส่วนขยาย)
1. Core Tools
Elements Panel – หนึ่งในฟีเจอร์ที่มีประโยชน์ที่สุดสำหรับนักพัฒนาเว็บ คือความสามารถในการ "Live Edit" HTML และ CSS บนหน้าเว็บ ใช้ Elements panel เพื่อแก้ไข HTML/CSS, ตรวจสอบคุณสมบัติการเข้าถึง (accessibility), ดู event listeners, และตั้ง DOM mutation breakpoints
Console – เครื่องมือ Console บันทึกข้อมูลเกี่ยวกับหน้าเว็บ เช่น JavaScript, คำขอเครือข่าย, และข้อผิดพลาดด้านความปลอดภัย ขั้นตอนแรกในการแก้ไขปัญหาคือตรวจสอบ Console ของเบราว์เซอร์
Edge มีแผง Console 专用 ให้นักพัฒนาใช้สำหรับการดีบั๊กแบบโต้ตอบ, ทดสอบ ad-hoc, และสื่อสารเข้าออกจากเว็บเพจที่กำลังทำงาน
Sources panel – เครื่องมือที่มีประโยชน์ที่สุดสำหรับนักพัฒนา JavaScript — JavaScript Debugger ใช้เปิดและแก้ไขโค้ดขณะรันไทม์, ตั้ง breakpoints, วิเคราะห์โค้ดทีละบรรทัด, และดูสถานะของเว็บไซต์
Network Panel – ติดตามและตรวจสอบคำขอและการตอบสนองจากเครือข่ายและแคชเบราว์เซอร์
Performance Panel – บันทึกข้อมูลประสิทธิภาพรันไทม์ ประสิทธิภาพรันไทม์คือการทำงานของหน้าเว็บขณะรัน ไม่ใช่ขณะโหลด
Memory Panel – ปัญหาหน่วยความจำเป็นสาเหตุหลักของปัญหาประสิทธิภาพ ทำให้หน้าเว็บตอบสนองช้าลงและล่าช้า Memory panel วัดการใช้ทรัพยากรระบบและเปรียบเทียบ heap snapshots ที่สถานะการรันโค้ดต่างๆ
Application Panel – แสดงคุณสมบัติเว็บเพจที่น่าสนใจ ตรวจสอบและจัดการ storage, databases, และ caches จากแผงนี้
Security Panel – ตรวจสอบว่าหน้าเว็บที่กำลังดูปลอดภัยหรือไม่ ตรวจสอบ origins นักพัฒนาใช้ดีบั๊กปัญหาความปลอดภัยและให้แน่ใจว่า HTTPS ถูกนำไปใช้อย่างถูกต้อง
Audits panel – ไม่ต้องอธิบายเพิ่มเติม เพราะอธิบายตัวเองได้ ฟีเจอร์นี้ตรวจสอบเว็บไซต์ของคุณ ผลลัพธ์ช่วยปรับปรุงคุณภาพเว็บไซต์
อ่านเพิ่มเติม: An error occurred while starting the profiling session in Edge DevTools.
2. Extensions
Edge รองรับส่วนขยาย แต่ขณะนี้ยังไม่มี Extensions สำหรับ DevTool ต้องติดตั้งส่วนขยายจากร้านค้าของบุคคลที่สาม เช่น Chrome Web Store
- คลิกสามจุดหรือไอคอนเมนูมุมซ้ายบนของ Edge คลิก Extensions
- มุมซ้ายล่างของหน้า Extensions เปิด toggle Allow extensions from other stores
- ไปที่ Chrome Web Store เปิดส่วนขยายที่ทำงานกับ DevTools เช่น React Developer Tools จาก Facebook
- คลิก Add to Chrome ส่วนขยาย DevTools จะถูกเพิ่มเข้า Microsoft Edge!
สรุปคือ วิธีนี้คือการติดตั้งส่วนขยาย Chrome บน Edge แต่เตือนไว้ว่าถ้าเป็นส่วนขยาย Chrome 純粹 อาจทำงานไม่ได้ เพราะ Microsoft ลบบริการและฟีเจอร์ Chromium บางส่วนออกไป
เบราว์เซอร์ Edge ใหม่จะพร้อมใช้งานกับ feature update ถัดไปของ Windows 10 หากคุณมีเว็บไซต์หรือธุรกิจที่พึ่งพา Edge ควรเตรียมตัวล่วงหน้า
สำหรับรายละเอียดเพิ่มเติม โปรดไปที่ Microsoft.com
