นักพัฒนาเว็บจำนวนมากขึ้นเรื่อยๆ ได้เปลี่ยนมาใช้ Firefox ในช่วงไม่กี่เดือนที่ผ่านมา โดยได้รับแจ้งจากการเปิดตัว Firefox Quantum หลังจากที่ได้ปรับปรุงประสิทธิภาพให้เทียบเท่า Google Chrome
แม้ว่า Firefox จะเสนอเครื่องมือที่เหมาะสมสำหรับนักพัฒนาโดยค่าเริ่มต้นด้วยฟีเจอร์ที่เป็นนวัตกรรม เช่น ตัวตรวจสอบ CSS Grid แต่ก็ยังสามารถเพิ่มฟีเจอร์ที่น่าตื่นเต้นให้กับเบราว์เซอร์ผ่านระบบนิเวศของแอดออนได้
ด้วยเหตุนี้ คุณจึงควรลองใช้ส่วนขยายบางส่วนหากคุณใช้ Firefox เพื่อการพัฒนาเว็บ
1. รายงานการใช้งานร่วมกัน
รายงานความเข้ากันได้ช่วยให้คุณระบุปัญหาความเข้ากันได้ของเบราว์เซอร์ที่อาจเกิดขึ้นเมื่อพัฒนาเว็บไซต์หรือเว็บแอปพลิเคชัน ขณะนี้ใช้ได้กับ CSS เท่านั้น
เมื่อคุณติดตั้งส่วนขยายแล้ว แผง "ความเข้ากันได้" ใหม่จะถูกเพิ่มลงในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ จากที่นั่น คุณจะสามารถดูว่าไซต์ใดก็ตามที่คาดว่าจะทำงานบนเบราว์เซอร์หลักแต่ละอันเป็นอย่างไร
เวอร์ชันของเบราว์เซอร์ที่ไม่มีปัญหาความเข้ากันได้จะเป็นสีเขียว เวอร์ชันที่มีปัญหาเล็กน้อยในสีเหลือง และเวอร์ชันที่มีปัญหาหลายรายการในสีแดง คุณเจาะลึกในเวอร์ชันของเบราว์เซอร์ที่ต้องการเพื่อดูกฎ CSS ที่ทำให้เกิดปัญหาได้
2. JSON Lite
หากคุณทำงานกับ JSON API บ่อยๆ คุณอาจพบว่าการดูข้อมูล JSON ในเบราว์เซอร์อาจเป็นเรื่องที่น่าเบื่อ เนื่องจากเบราว์เซอร์ไม่ได้ฟอร์แมตอย่างถูกต้องตามค่าเริ่มต้น ซึ่งทำให้อ่านได้ยาก
JSON Lite แก้ไขปัญหานั้นด้วยการจัดรูปแบบการตอบสนอง JSON และ JSONP ด้วยการเน้นไวยากรณ์ที่เหมาะสมและคุณลักษณะการยุบโหนดซึ่งสะดวกเมื่อตรวจสอบข้อมูล JSON ขนาดใหญ่
หากคุณไม่ต้องการคุณสมบัติทั้งหมดที่ JSON Lite มีให้ คุณสามารถเปิดใช้งานโปรแกรมดู JSON ในตัวใน Firefox ได้โดยพิมพ์ “about:config” ในแถบที่อยู่ จากนั้นค้นหา devtools.jsonview.enabled รหัส> . ตั้งค่าเป็น "จริง" โดยดับเบิลคลิกที่ตัวเลือก จากนั้นโหลดไฟล์ JSON ลงในเบราว์เซอร์เพื่อดูผลลัพธ์
3. React Devtools
React เป็นหนึ่งในห้องสมุดที่ได้รับความนิยมมากที่สุดในปัจจุบันในระบบนิเวศการพัฒนาเว็บ หากคุณพัฒนาเว็บแอปพลิเคชันด้วย React คุณจะเห็นคุณค่ามากมายในการใช้ส่วนขยายเบราว์เซอร์เพื่อดีบักโค้ดของคุณ
เมื่อติดตั้งแล้ว คุณจะสามารถตรวจสอบโค้ด React บนเว็บไซต์ใดก็ได้ที่ใช้งาน ไอคอนส่วนเสริมจะปรากฏในแถบเครื่องมือของเบราว์เซอร์ และคุณยังจะได้รับแท็บ React ข้างแผง DevTools อื่นๆ แผง React จะอนุญาตให้ตรวจสอบโครงสร้าง React รวมถึงลำดับชั้นของส่วนประกอบ อุปกรณ์ประกอบ สถานะ และอื่นๆ
คุณยังสามารถติดตั้ง Vue.js devtools และ Redux DevTools ได้หากคุณพัฒนาด้วยไลบรารีใดไลบรารีหนึ่ง
4. ฟอนทาเนลโล
Fontanello เป็นวิธีที่รวดเร็วมากในการระบุแบบอักษรบนเว็บไซต์ใดๆ ด้วยโปรแกรมเสริมนี้ คุณไม่จำเป็นต้องเปิด devtools เพื่อค้นหาว่าเว็บไซต์ใช้แบบอักษรใดอีกต่อไป Fontanello แสดงรูปแบบตัวอักษรพื้นฐานของข้อความในเมนูบริบทคลิกขวาใน Firefox
5. วอปเปอไลเซอร์
คุณเคยสงสัยหรือไม่ว่าเทคโนโลยีใดที่ใช้สร้างเว็บไซต์โปรดของคุณ? Wappalyzer สามารถให้ข้อมูลนี้แก่คุณได้ในคลิกเดียว สามารถตรวจจับระบบจัดการเนื้อหา แพลตฟอร์มอีคอมเมิร์ซ เว็บเซิร์ฟเวอร์ กรอบงาน JavaScript ซอฟต์แวร์ฐานข้อมูล เครื่องมือวิเคราะห์ และอื่นๆ อีกมากมาย
บทสรุป
หากคุณต้องการเพิ่มพลังให้เวิร์กโฟลว์การพัฒนาของคุณ คุณไม่ควรพลาดส่วนขยายใดๆ ที่กล่าวถึงข้างต้น อย่าลืมแบ่งปันรายการโปรดของคุณในส่วนความคิดเห็นด้านล่าง
บทความนี้เผยแพร่ครั้งแรกในเดือนตุลาคม 2010 และได้รับการอัปเดตในเดือนมีนาคม 2018
