15 ส่วนขยายเบราว์เซอร์ที่ดีที่สุดสำหรับนักพัฒนา (2020)

การเปลี่ยนแปลงที่ยิ่งใหญ่ที่สุดในปี 2018 เป็นการยกเครื่องครั้งใหญ่ของ FireFox และด้วยวิธีการทำงานของส่วนเสริมในเบราว์เซอร์นั้น ดังนั้นส่วนเสริมยอดนิยมจำนวนมากจึงไม่ได้รับการดูแลรักษาอีกต่อไปหรือไม่สามารถใช้งานได้

ส่วนเสริมสำหรับ Firefox มีให้เป็นส่วนเสริมสำหรับ Google Chrome ในบทความนี้เราจะพยายามตั้งค่า Add-on / ส่วนขยายข้ามเบราว์เซอร์ซึ่งภายในบริบทนี้หมายความว่าจะสามารถทำงานบน Firefox, Chrome และ Chromium นอกจากนี้เราจะให้ความสำคัญกับส่วนขยายฟรีที่ไม่ทราบว่าจะส่งผ่านข้อมูลของคุณไปยังบุคคลที่สามและไม่ได้รับรายได้จากโฆษณา เราจะเน้นเพิ่มเติมเกี่ยวกับส่วนขยายที่ไม่ จำกัด คุณเฉพาะเทคโนโลยีการพัฒนาเฉพาะ

นักพัฒนาไม่กี่คนจะเห็นประโยชน์ใด ๆ ในการใช้ Microsoft Edge เป็นเบราว์เซอร์การพัฒนา แต่มันก็ใช้ได้สำหรับการทดสอบหลังการพัฒนา คาดว่าจะมีผู้ใช้งานเว็บไซต์มากกว่า 4 รายเพียงเล็กน้อยเท่านั้นถึงแม้ว่าจะมีจำนวนเพิ่มขึ้นเล็กน้อยเมื่อผู้ใช้ละทิ้ง Internet Explorer

แม้ว่าจะมีผู้ใช้ Chrome มากกว่าผู้ใช้ Firefox แต่ก็มีแนวโน้มที่จะชอบ Firefox ซึ่งเป็นสาเหตุที่ทำให้มีนักพัฒนาใน Firefox

ตอนนี้มาดูที่ส่วนขยายเบราว์เซอร์ที่ดีที่สุดสำหรับนักพัฒนาและทำไมคุณอาจต้องการเพิ่มลงในเบราว์เซอร์ของคุณ

1. สร้างด้วย

เมื่อคุณพบว่าตัวเองอยู่ในไซต์ที่ทำมาอย่างดีและคุณต้องการที่จะรู้ว่าพวกเขาสร้างมันได้อย่างไรส่วนขยายนี้จะช่วยคุณประหยัดเวลาและความพยายามในการขุดในซอร์สโค้ด ลิงค์ดาวน์โหลด: โครเมี่ยม / โครเมี่ยม, Firefox

2. ขวาน

นี่เป็นเครื่องมือตรวจสอบการเข้าถึง เป็นการดีที่สุดที่จะพยายามทำให้หน้าเว็บของคุณเข้าถึงได้มากที่สุดและขวานจะช่วยให้คุณหลีกเลี่ยงการยกเว้นส่วนของผู้ใช้จากเว็บไซต์ของคุณ ลิงค์ดาวน์โหลด: โครเมี่ยม / โครเมี่ยม, Firefox

3 ColorZilla

ผู้เฒ่าคนแก่ แต่ยังคงเป็นคนดีส่วนขยายนี้จะช่วยให้คุณสามารถสุ่มตัวอย่างสีได้โดยตรงจากหน้าเรียกใช้รหัสสีสร้างการไล่ระดับสีและอื่น ๆ ลิงค์ดาวน์โหลด: โครเมี่ยม / โครเมี่ยม, Firefox

4. นักพัฒนาเว็บ

เพิ่มสิ่งพิเศษที่มีประโยชน์ให้กับเบราว์เซอร์ของคุณเพื่อควบคุม CSS, รูปแบบ, รูปภาพและข้อมูล หนึ่งในส่วนขยายที่ได้รับความนิยมสูงสุดที่เคยทำ ลิงค์ดาวน์โหลด: โครเมี่ยม / โครเมี่ยม, Firefox

5. อันดับที่แสวงหา

วิเคราะห์หน้าเว็บใด ๆ สำหรับข้อมูล SEO จัดทำรายงานที่มีประสิทธิภาพซึ่งแสดงให้คุณเห็นถึงการทำ SEO ทั้งหมดรวมถึงคะแนน SEO โดยรวมคำแนะนำในการปรับปรุง cloud คำหลักและอีกมากมาย ลิงค์ดาวน์โหลด: โครเมี่ยม / โครเมี่ยม, Firefox

6. Tab2QR

สร้างรหัส QR ของหน้าเว็บที่คุณเปิดและคุณสามารถเยี่ยมชมหน้าเว็บด้วยโทรศัพท์ของคุณเพียงแค่สแกนรหัส QR ดีสำหรับการทดสอบไซต์ที่ตอบสนองแม้ว่าคุณจะไม่ได้สร้างขึ้นมาก็ตาม ลิงค์ดาวน์โหลด: โครเมี่ยม / โครเมี่ยม, Firefox

7. HTTP Request Maker

สิ่งนี้มีประโยชน์มากสำหรับการทดสอบการตอบกลับแบบฟอร์ม PHP ที่คุณไม่ต้องการส่งแบบฟอร์มจริง (ซึ่งอาจทำให้การประมวลผลเพิ่มเติมที่คุณไม่จำเป็นต้องทดสอบ) ด้วยเครื่องมือนี้คุณสามารถปลอมคำขอ HTTP ได้อย่างง่ายดาย โปรดทราบว่าถึงแม้ว่าส่วนขยายของ Chrome และ Firefox จะมีชื่อเหมือนกันและทำสิ่งเดียวกัน แต่ส่วนใหญ่ทำโดยนักพัฒนาที่แตกต่างกันและไม่เหมือนกันทั้งหมด ลิงค์ดาวน์โหลด: โครเมี่ยม / โครเมี่ยม, Firefox

8. การทดสอบประสิทธิภาพของหน้า

รับรายงานอย่างรวดเร็วว่าหน้าเว็บของคุณทำงานอย่างไรในขั้นตอนต่าง ๆ ซึ่งเดินทางไปยังเบราว์เซอร์ของคุณ มันเหมือนกับ tracert รุ่นสูงกว่า อันนี้ใช้ได้เฉพาะใน Firefox เท่านั้นในตอนนี้ มีส่วนขยายที่คล้ายกันสำหรับ Chrome และ Chromium แต่ก็ไม่ได้มีคุณสมบัติครบครันเหมือนกับส่วนขยายนี้ ลิงค์ดาวน์โหลด: Firefox

9. เครื่องมือนับจำนวนคำ

อันนี้สามารถทำได้มากกว่าชื่อโดยนัยเพราะมันจะบอกคุณว่ามีกี่ตัวอักษรและจำนวนประโยคที่อยู่ในกลุ่มของข้อความที่เลือก (หรือทั้งหน้า) ลิงค์ดาวน์โหลด: โครเมี่ยม / โครเมี่ยม, Firefox

10. รายการตรวจสอบนักพัฒนาเว็บ

ตรวจสอบให้แน่ใจว่าคุณปฏิบัติตามแนวทางปฏิบัติในการพัฒนาเว็บที่ดีที่สุดด้วยเครื่องมือนี้ที่จะแสดงให้เห็นว่ามาตรฐานของคุณอาจลื่นไถล ลิงค์ดาวน์โหลด: โครเมี่ยม / โครเมี่ยม, Firefox

11. โปรแกรมแก้ไขแผนที่รูปภาพ

หนึ่งในสามส่วนขยายที่ยอดเยี่ยมจาก Heinz-Jürgen Boms นักพัฒนาชาวเยอรมันคนนี้ทำในสิ่งที่ชื่อบอกไว้ คุณสามารถสร้างแผนที่รูปภาพโดยตรงในเบราว์เซอร์เพียงแค่ติดตามพื้นที่ของรูปภาพที่คุณต้องการแมป ลิงค์ดาวน์โหลด: Firefox

12. ตัวแก้ไขเฟรมขั้นสูง

ส่วนขยายอื่นจาก Heinz-Jürgen Boms นี่เป็นเครื่องมือจัดแต่งทรงผม CSS ที่คุณสามารถสร้างเฟรมได้โดยตรงในเบราว์เซอร์โดยการระบุคุณสมบัติของมัน มันคุ้มค่าที่จะตรวจสอบ เอกสาร ก่อนที่จะเริ่มใช้งาน ลิงค์ดาวน์โหลด: Firefox

13. Bootstrap Responsive Helper

นี่เป็นส่วนขยายเล็ก ๆ ที่ง่ายมากที่ช่วยให้คุณเห็นได้อย่างรวดเร็วหากเบรกพอยต์ของคุณทำงานอย่างถูกต้องและระดับ bootstrap ในโหมดปัจจุบันคืออะไร แน่นอนคุณจะต้องใช้ส่วนขยายนี้หากคุณทำงานใน Bootstrap รุ่น Chrome พัฒนาโดย Jonathan Defraiteur และรุ่น Firefox นั้นพัฒนาโดย Kevin Bon ลิงค์ดาวน์โหลด: โครเมี่ยม / โครเมี่ยม, Firefox

14. ลองแก้ไขด้วยตนเอง HTML5

หากคุณต้องการให้สิ่งต่าง ๆ เรียบง่ายและทำงานให้เสร็จจากที่เดียวส่วนขยายนี้เหมาะสำหรับคุณ มีคุณลักษณะมากมายตัวแก้ไขบริบทนี้ทำงานโดยตรงในเบราว์เซอร์และรองรับ HTML, CSS และ JavaScript มันไกลจากความสมบูรณ์แบบ แต่สำหรับการแก้ไขที่รวดเร็วและสกปรกโดยไม่ต้องกังวลว่าจะเปิดแอปพลิเคชันแยกต่างหาก ลิงค์ดาวน์โหลด: Firefox

15. แว่นตา X-Ray

ในทางเทคนิคแล้วอันนี้ไม่ใช่ส่วนขยายจริงๆแล้วมันเป็น bookmarklet แต่มันใช้งานได้ดีมากเราไม่สามารถทิ้งมันไว้ในรายการ แม้ว่ามันทำโดย Mozilla แต่ก็ทำงานได้ดีพอ ๆ กันใน Chrome เพราะเบราว์เซอร์ทั้งสองนั้นเป็นไปตามมาตรฐานอย่างสมบูรณ์ หากต้องการใช้งานคุณจะต้องทำให้แถบบุ๊กมาร์กของคุณปรากฏ จากนั้นไปที่หน้าดาวน์โหลดซึ่งคุณสามารถเข้าถึงได้ผ่านลิงก์ด้านล่างและลากปุ่ม X-Ray Goggles ไปยังแถบบุ๊คมาร์ค จากนั้นเพียงเข้าไปที่ไซต์ใด ๆ เปิดไฟบุ๊คมาร์ค X-Ray Goggles ของคุณเลือกองค์ประกอบบนหน้าและคุณสามารถแก้ไขรหัสได้ ลิงค์ดาวน์โหลด: โครเมี่ยม / โครเมี่ยม, Firefox

มารยาทภาพส่วนหัวของ

Bogdan Rancea

บ็อกแดนเป็นสมาชิกผู้ก่อตั้งของนิตยสาร Inspired Mag ซึ่งสะสมประสบการณ์เกือบ 6 ปีในช่วงเวลานี้ ในเวลาว่างเขาชอบเรียนดนตรีคลาสสิกและสำรวจทัศนศิลป์ เขาค่อนข้างหมกมุ่นอยู่กับ fixies เช่นกัน เขาเป็นเจ้าของ 5 คนแล้ว