Microsoft Edge ใหม่สร้างขึ้นโดยใช้โครงการโอเพ่นซอร์สของ Chromium และหากคุณเป็นนักพัฒนา นี่คือรายการเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ใน Microsoft Edge (Chromium) . เครื่องมือใหม่บางอย่างได้เข้าสู่รายการ DevTools แล้ว ซึ่งจะทำให้นักพัฒนาสามารถสร้างและทดสอบเว็บไซต์ใน Microsoft Edge ได้ง่ายและรวดเร็ว
รายการ DevTools ใน Edge ใหม่ (Chromium)
Microsoft Edge (Chromium) DevTools สามารถแบ่งออกได้เป็น 2 ประเภทใหญ่ๆ:
- เครื่องมือหลัก
- ส่วนขยาย
1] เครื่องมือหลัก
แผงองค์ประกอบ – คุณลักษณะที่มีประโยชน์มากที่สุดอย่างหนึ่งของ DevTools สำหรับนักพัฒนาเว็บคือความสามารถในการ "แก้ไขสด" HTML และ CSS บนหน้าเว็บ คุณสามารถใช้แผงองค์ประกอบเพื่อแก้ไข HTML และ CSS ตรวจสอบคุณสมบัติการเข้าถึง ดูตัวฟังเหตุการณ์ และตั้งค่าจุดสั่งหยุดการกลายพันธุ์ของ DOM
คอนโซล – โดยทั่วไป เครื่องมือ Console จะบันทึกข้อมูลที่เกี่ยวข้องกับหน้าเว็บ เช่น JavaScript คำขอเครือข่าย และข้อผิดพลาดด้านความปลอดภัย ดังนั้น ขั้นตอนแรกในการแก้ไขปัญหาคือการตรวจสอบคอนโซลของเบราว์เซอร์
มันเป็นเพราะเหตุนี้ คุณพบแผงคอนโซลเฉพาะในเบราว์เซอร์ Edge นักพัฒนาสามารถใช้แผงเดียวกันสำหรับการดีบักเชิงโต้ตอบ การทดสอบเฉพาะกิจ และการสื่อสารเข้าและออกจากหน้าเว็บที่ทำงานอยู่
แผงแหล่งที่มา – เป็นเครื่องมือที่มีประโยชน์มากที่สุดตัวเดียวสำหรับนักพัฒนา JavaScript – JavaScript Debugger เมื่อใช้สิ่งนี้ นักพัฒนาสามารถเปิดและแก้ไขโค้ดของเขาที่รันไทม์ ตั้งค่าเบรกพอยต์ ก้าวผ่านโค้ด และดูสถานะของ JavaScript บนเว็บไซต์ได้ครั้งละหนึ่งบรรทัด
แผงเครือข่าย – สามารถตรวจสอบและตรวจสอบคำขอและการตอบสนองจากแคชของเครือข่ายและเบราว์เซอร์
แผงประสิทธิภาพ – มีหน้าที่บันทึกข้อมูลประสิทธิภาพรันไทม์ ประสิทธิภาพรันไทม์เป็นวิธีที่เพจของคุณทำงานเมื่อรัน แทนที่จะโหลด
แผงหน่วยความจำ – ปัญหาหน่วยความจำอาจเป็นสาเหตุหลักของปัญหาด้านประสิทธิภาพ อาจทำให้หน้าไม่ตอบสนองและล้าหลังมากขึ้นเมื่อเวลาผ่านไป แผงหน่วยความจำวัดการใช้ทรัพยากรระบบและเปรียบเทียบสแน็ปช็อตของฮีปในสถานะต่างๆ ของการรันโค้ดได้
แผงแอปพลิเคชัน – จะแสดงคุณสมบัติหน้าเว็บที่น่าสนใจหลายประการ สามารถตรวจสอบและจัดการที่เก็บข้อมูล ฐานข้อมูล และแคชจากแผงควบคุม
แผงความปลอดภัย – สามารถตรวจสอบได้ว่าหน้าที่คุณกำลังดูอยู่นั้นปลอดภัยหรือไม่ สามารถตรวจสอบที่มาได้ นักพัฒนาสามารถใช้เพื่อแก้ไขจุดบกพร่องปัญหาด้านความปลอดภัยและดูแลให้มีการใช้งาน HTTPS อย่างเหมาะสม
แผงการตรวจสอบ – ไม่จำเป็นต้องมีคำอธิบายพิเศษเนื่องจากเป็นการอธิบายตนเอง คุณลักษณะนี้ช่วยให้คุณสามารถตรวจสอบเว็บไซต์ของคุณได้ ผลลัพธ์ที่ได้สามารถช่วยคุณปรับปรุงคุณภาพเว็บไซต์ของคุณได้
อ่าน :เกิดข้อผิดพลาดขณะเริ่มเซสชันการทำโปรไฟล์ใน Edge DevTools
2] ส่วนขยาย
ในขณะที่ Edge รองรับส่วนขยาย แต่ไม่มีส่วนขยายสำหรับ DevTool ณ ตอนนี้ คุณจะต้องติดตั้งส่วนขยายจากร้านส่วนขยายของบริษัทอื่นแทน เช่น Chrome เว็บสโตร์
- คลิกที่จุดสามจุดหรือไอคอนเมนูที่ด้านบนซ้ายของ Edge คลิกที่ ส่วนขยาย .
- ที่มุมล่างซ้ายของหน้าส่วนขยาย ให้เปิดสวิตช์สำหรับ อนุญาตส่วนขยายจากร้านค้าอื่น
- ถัดไป ไปที่ Chrome เว็บสโตร์ และเปิดส่วนขยายที่ทำงานร่วมกับ DevTools เช่น เครื่องมือ ReAct Developer จาก Facebook
- คลิกเพื่อเพิ่มลงใน Chrome และส่วนขยาย DevTools จะถูกเพิ่มใน Microsoft Edge!
พูดง่ายๆ คือ วิธีติดตั้งส่วนขยาย Chrome บน Edge อย่างไรก็ตาม โปรดระวังหากส่วนขยาย Chrome ล้วนๆ อาจใช้งานได้หรือไม่ทำงาน เนื่องจาก Microsoft ได้นำบริการและคุณลักษณะบางอย่างของ Chromium ออกแล้ว
เบราว์เซอร์ Edge ใหม่จะพร้อมให้ใช้งานในการอัปเดตฟีเจอร์ครั้งต่อไปของ Windows 10 หากคุณมีเว็บไซต์หรือธุรกิจที่ต้องพึ่งพา Edge ขอแนะนำให้เตรียมตัวล่วงหน้า
หากต้องการอ่านโดยละเอียด โปรดไปที่ Microsoft.com
