จำนวนนักพัฒนาเว็บที่เปลี่ยนมาใช้ Firefox เพิ่มขึ้นในเดือนๆ ล่าสุด กระตุ้นจากการปล่อย Firefox Quantum ที่ปรับปรุงประสิทธิภาพให้เทียบเท่า Google Chrome
แม้ Firefox จะมีเครื่องมือสำหรับนักพัฒนาที่ดีพอสมควรโดยค่าเริ่มต้น พร้อมฟีเจอร์นวัตกรรมอย่าง CSS Grid Inspector ยังสามารถเพิ่มฟีเจอร์น่าสนใจได้ผ่านระบบ Add-on
ด้วยเหตุนี้ นี่คือส่วนขยายที่ควรลองหากคุณใช้ Firefox สำหรับพัฒนาเว็บ
1. Compat Report
Compat Report ช่วยระบุปัญหาความเข้ากันได้ของเบราว์เซอร์เมื่อพัฒนาเว็บไซต์หรือเว็บแอปพลิเคชัน ปัจจุบันทำงานกับ CSS เท่านั้น
หลังติดตั้งแล้ว แผง "Compatibility" ใหม่จะถูกเพิ่มเข้าไปในเครื่องมือนักพัฒนา จากนั้นจะเห็นว่าเว็บไซต์ใดๆ คาดว่าจะทำงานอย่างไรบนเบราว์เซอร์หลักแต่ละตัว
เวอร์ชันเบราว์เซอร์ที่ไม่มีปัญหาความเข้ากันได้จะเป็นสีเขียว มีปัญหาเล็กน้อยสีเหลือง และมีปัญหาหลายอย่างสีแดง สามารถเจาะลึกลงไปดูเวอร์ชันเบราว์เซอร์เฉพาะเพื่อดูกฎ CSS ที่ก่อให้เกิดปัญหาได้อย่างแน่นอน
2. JSON Lite
หากคุณทำงานกับ JSON API บ่อยๆ อาจรู้สึกว่ามุมมองข้อมูล JSON ในเบราว์เซอร์น่าเบื่อ เพราะเบราว์เซอร์ไม่จัดรูปแบบมันให้เหมาะสมโดยค่าเริ่มต้น ทำให้อ่านยาก
JSON Lite แก้ปัญหานี้โดยจัดรูปแบบ JSON และ JSONP responses ด้วยไวยากรณ์ที่ถูกต้องและฟีเจอร์ย่อ/ขยายโหนด (node collapsing) ที่มีประโยชน์เมื่อตรวจสอบข้อมูล JSON ขนาดใหญ่
หากไม่ต้องการฟีเจอร์ทั้งหมดของ JSON Lite สามารถเปิด JSON Viewer ที่สร้างอยู่ใน Firefox ได้โดยพิมพ์ "about:config" ในแถบที่อยู่ ค้นหา devtools.jsonview.enabled ตั้งค่าเป็น "true" โดยดับเบิลคลิก แล้วโหลดไฟล์ JSON ใดๆ ในเบราว์เซอร์เพื่อดูผลลัพธ์
3. React Devtools
React เป็นหนึ่งในไลบรารียอดนิยมที่สุดในระบบนิเวศพัฒนาเว็บวันนี้ หากคุณพัฒนาเว็บแอปด้วย React จะเห็นคุณค่ามากในการใช้ส่วนขยายเบราว์เซอร์เพื่อดีบักโค้ด
หลังติดตั้งแล้ว จะตรวจสอบโค้ด React บนเว็บไซต์ใดๆ ที่ใช้ได้ ไอคอน Add-on จะปรากฏในแถบเครื่องมือเบราว์เซอร์ และจะได้แท็บ React พร้อมกับแผง DevTools อื่นๆ แผง React จะอนุญาตให้ตรวจสอบ React tree รวมถึงลำดับชั้นคอมโพเนนท์ props state และอื่นๆ
ยังสามารถติดตั้ง Vue.js devtools และ Redux DevTools ได้หากพัฒนาด้วยไลบรารีเหล่านั้น
4. Fontanello
Fontanello ให้วิธีเร็วที่สุดในการระบุฟอนต์บนเว็บไซต์ใดๆ ด้วย Add-on นี้ ไม่ต้องเปิด DevTools แค่เพื่อหาว่าเว็บไซต์ใช้ฟอนต์อะไร Fontanello แสดงสไตล์พิมพ์พื้นฐานของข้อความในเมนูคลิกขวา (context menu) ของ Firefox
5. Wappalyzer
เคยสงสัยไหมว่าเว็บไซต์โปรดใช้เทคโนโลยีอะไรสร้างขึ้น Wappalyzer ให้ข้อมูลนี้ได้ในคลิกเดียว สามารถตรวจจับ CMS แพลตฟอร์มอีคอมเมิร์ซ เว็บเซิร์ฟเวอร์ JavaScript frameworks ซอฟต์แวร์ฐานข้อมูล เครื่องมือวิเคราะห์ และอื่นๆ อีกมากมาย
สรุป
หากมองหาวิธีเพิ่มประสิทธิภาพเวิร์กโฟลว์การพัฒนา ส่วนขยายที่กล่าวมาข้างต้นไม่มีตัวไหนทำให้ผิดหวัง อย่าลืมแชร์ตัวโปรดในส่วนความคิดเห็นด้านล่าง
บทความนี้เผยแพร่ครั้งแรกในเดือนตุลาคม 2010 และอัปเดตในเดือนมีนาคม 2018
