เพิ่มประสิทธิภาพการพัฒนาเว็บของคุณ

อัพเดทล่าสุดเมื่อ 13 ตุลาคม 2020

หากคุณชอบที่จะพัฒนาเว็บไซต์เหมือนฉัน คุณควรทราบถึงความสำคัญของการมีเครื่องมือที่ยอดเยี่ยมในเว็บเบราว์เซอร์ของคุณ ซึ่งจะทำให้งานของคุณง่ายขึ้นและเพิ่มประสิทธิภาพการทำงานของคุณ นั่นคือกรณีของ Google Chrome และข้อเสนอที่ครอบคลุมของส่วนขยาย Chrome ที่จะเพิ่มประสิทธิภาพการทำงานของนักพัฒนาเว็บของคุณ

ใช่ Firefox เป็นเบราว์เซอร์ที่ยอดเยี่ยมสำหรับการพัฒนาเว็บ และ Firefox Developer Edition นั้นยอดเยี่ยมสำหรับการดีบักและการทดสอบ CSS อย่างไรก็ตาม Chrome มีรายการส่วนขยายเครื่องมือจำนวนมากที่สนับสนุนคุณลักษณะเว็บล่าสุดและเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ ซึ่งทำให้เป็นที่ชื่นชอบในหมู่นักพัฒนาเว็บจำนวนมากในการเพิ่มประสิทธิภาพการทำงานของนักพัฒนาเว็บ

Chrome Marketplace มีส่วนขยายที่ดีที่สุดบางส่วน ทั้งเก่าและใหม่ เพื่อช่วยนักพัฒนาในการพัฒนาและทดสอบเว็บไซต์หรือหน้า Landing Page ด้านล่างนี้ คุณจะทราบส่วนขยายที่ดีที่สุดบางส่วนที่ฉันแนะนำว่า "ต้องมี" ในกล่องเครื่องมือสำหรับนักพัฒนาเว็บของคุณ

ส่วนขยายของ Chrome ที่เพิ่มประสิทธิภาพการพัฒนาเว็บของคุณ

ผู้ช่วยแท็ก

ผู้ช่วยแท็กช่วยแก้ปัญหาการติดตั้งแท็กต่างๆ ของ Google รวมถึง Google Analytics, Google Tag Manager เป็นต้น ผู้ช่วยแท็กช่วยให้คุณสามารถยืนยันว่าคุณได้ติดตั้งแท็ก Google ต่างๆ บนเพจของคุณอย่างถูกต้อง เพียงไปที่หน้าใดก็ได้ และผู้ช่วยแท็กจะบอกคุณว่ามีแท็กใดบ้าง รายงานข้อผิดพลาดที่เราพบ และแนะนำการปรับปรุงที่สามารถนำไปปรับใช้ได้ แท็ก Google ส่วนใหญ่จะถูกตรวจสอบ รวมถึง Google Analytics, เครื่องมือวัด Conversion ของ AdWords, Google Tag Manager เป็นต้น

WhatRuns

ค้นพบสิ่งที่ใช้งานเว็บไซต์—เฟรมเวิร์ก, เครื่องมือวิเคราะห์, ปลั๊กอิน WordPress, ฟอนต์ - คุณตั้งชื่อมัน ส่วนขยาย WhatRuns เพียงคลิกเดียวเพื่อค้นหาเทคโนโลยีที่ใช้ในเว็บไซต์ที่คุณเยี่ยมชม ตรวจจับแม้กระทั่งเครื่องมือและบริการใหม่ๆ และที่กำลังจะมีขึ้นจากเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์และเครือข่ายโฆษณา ไปจนถึงปลั๊กอินและธีมของ WordPress ไม่เพียงแค่นั้น – คุณสามารถติดตามเว็บไซต์เพื่อรับการแจ้งเตือนเมื่อใช้เทคโนโลยีใหม่หรือนำเทคโนโลยีที่มีอยู่ออก

Vue.js Devtools

ชื่อของเขาชัดเจนมาก เป็นส่วนขยาย Chrome และ Firefox DevTools สำหรับการดีบักแอปพลิเคชัน Vue.js ช่วยให้คุณตรวจสอบลำดับชั้นของคอมโพเนนต์ Vue.js ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome คุณจะได้รับแท็บใหม่ใน Chrome DevTools: “Vue”

React Developers Tools

ในฐานะ Vue.js Devtools เครื่องมือ React Developer คือส่วนขยาย Chrome และ Firefox DevTools สำหรับไลบรารี React JavaScript แบบโอเพนซอร์ส ช่วยให้คุณตรวจสอบลำดับชั้นของส่วนประกอบ React ในเครื่องมือสำหรับนักพัฒนา Chrome คุณจะได้รับแท็บใหม่สองแท็บใน Chrome DevTools: “ส่วนประกอบ” และ “ตัวสร้างโปรไฟล์” แท็บส่วนประกอบจะแสดงส่วนประกอบ React React ที่แสดงผลบนหน้าและส่วนประกอบย่อยที่แสดงผล โดยการเลือกหนึ่งในสามองค์ประกอบ คุณสามารถตรวจสอบและแก้ไขอุปกรณ์ประกอบฉากและสถานะปัจจุบันได้ในแผงด้านขวา ในเบรดครัมบ์ คุณสามารถตรวจสอบส่วนประกอบที่เลือก ส่วนประกอบที่สร้างส่วนประกอบ ส่วนประกอบที่สร้างส่วนประกอบนั้น เป็นต้น

JSON Viewer สุดยอด

ส่วนขยายนี้ช่วยคุณในการแสดงภาพการตอบสนอง JSON จากเว็บไซต์หรือคำขอ API ในเบราว์เซอร์ของคุณ มันแนะนำคุณให้รู้จักกับประสบการณ์การตกแต่ง JSON ที่ยอดเยี่ยม มีคุณสมบัติพิเศษมากมายที่ทำให้ยอดเยี่ยม ช่วยให้นักพัฒนาจัดรูปแบบหรือปรับแต่ง JSON และสำรวจคุณสมบัติในมุมมองแบบกราฟิก มีแผนภูมิที่เป็นมิตรและโต้ตอบแทนการตอบสนองของเซิร์ฟเวอร์หรือ JSON ที่คุณให้ไว้ในส่วนอินพุตในมุมมองแบบกราฟิก

ตัวตรวจสอบ META SEO

มีประโยชน์ในการตรวจสอบข้อมูลเมตาที่พบในหน้าเว็บ ซึ่งมักจะไม่ปรากฏขณะเรียกดู ข้อมูลเมตาไม่ได้เป็นเพียงเมตาแท็ก HTML ปกติ แต่แท็ก XFN, ไมโครฟอร์แมตต่างๆ, แอตทริบิวต์มาตรฐานที่เพิ่งเปิดตัว, ลิงก์ที่ไม่ติดตาม ฯลฯ ส่วนขยายนี้มุ่งเป้าไปที่นักพัฒนาเว็บที่ต้องการตรวจสอบ HTML ของไซต์เป็นหลัก ปฏิบัติตามหลักเกณฑ์ของ Google ของผู้ดูแลเว็บ แต่แม้กระทั่งกับผู้ที่สงสัยเกี่ยวกับเนื้อหาของหน้าใด ๆ ที่มักจะมองไม่เห็นแต่สามารถเปิดเผยคุณสมบัติของเว็บไซต์ที่น่าสนใจได้ นอกจากนี้ยังมีตัวเลือกการพิมพ์/ส่งออกที่ให้คุณพิมพ์หรือบันทึกเป็น PDF รายงาน หรือคัดลอก/วางข้อมูลในเครื่องมือที่คุณต้องการ

โปรแกรมดูด่วนสไตล์ HTML

โปรแกรมดูด่วนสไตล์องค์ประกอบ HTML DOM เพียงเลื่อนเมาส์ของคุณ และจะแสดงสไตล์ของเป้าหมาย

CSSViewer

CSSViewer เป็นโปรแกรมดูคุณสมบัติ CSS อย่างง่ายสำหรับ Chrome และ Firefox ในการเปิดใช้งาน CSSViewer ให้คลิกไอคอนแถบเครื่องมือ แล้ววางเมาส์เหนือองค์ประกอบใดๆ ที่คุณต้องการตรวจสอบในหน้าปัจจุบัน

Fonts Ninja

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

ฉันชอบการปรับตัว – การทดสอบอุปกรณ์เคลื่อนที่/แบบตอบสนอง

เครื่องมือสำหรับทดสอบเว็บไซต์ที่ตอบสนอง ILOVEADAPTIVE Chrome Extension เพิ่มปุ่มในแถบเครื่องมือของคุณ เมื่อคุณคลิกที่ปุ่ม จะเป็นการเปิด URL ที่คุณอยู่ในแท็บปัจจุบัน คุณสมบัติหลักรวมถึงการแสดงตัวอย่าง URL บนอุปกรณ์หลายเครื่องพร้อมกัน กรองอุปกรณ์ กรองระบบปฏิบัติการ เปลี่ยนปริมาณ ซูม แสดงแผง iOS เปลี่ยนเป็นแนวนอนและแนวตั้ง

เว็บไวทัล

วัดเมตริกสำหรับไซต์ที่ดี Web Vitals เป็นสัญญาณคุณภาพที่สำคัญในการมอบ UX ที่ยอดเยี่ยมบนเว็บ (https://web.dev/vitals) ส่วนขยายนี้วัด Core Web Vitals โดยให้คำติชมทันทีเกี่ยวกับเมตริกการโหลด การโต้ตอบ และการเปลี่ยนเลย์เอาต์ ซึ่งสอดคล้องกับวิธีการวัดเมตริกเหล่านี้โดย Chrome และรายงานไปยังเครื่องมืออื่นๆ ของ Google

ไม้บรรทัดหน้า Redux

ไม้บรรทัด Web Developer\Designer เพื่อรับขนาดพิกเซลและตำแหน่งที่สมบูรณ์แบบเพื่อวัดองค์ประกอบบนหน้าเว็บใดๆ Page Ruler Redux คือเครื่องมือสำหรับนักพัฒนาและนักออกแบบเว็บหลักที่ช่วยให้คุณได้รับการวัดองค์ประกอบเว็บที่สมบูรณ์แบบพิกเซล มันถูกออกแบบมาสำหรับการพัฒนาส่วนหน้าของเว็บไซต์ การออกแบบเว็บ หรืองานใดๆ ที่คุณอาจต้องได้รับการวัดพิกเซลที่สมบูรณ์แบบขององค์ประกอบเว็บใดๆ

ไม้บรรทัดกริด

สร้างกริดและวัดระยะทางได้อย่างง่ายดาย ช่วยให้คุณสร้างกริดแนวตั้งและแนวนอนสไตล์ Photoshop มีไม้บรรทัดสำหรับวัดระยะห่างระหว่างกริดของคุณด้วย

เค้าร่างมัน

ส่วนขยายนี้สรุปองค์ประกอบ HTML ทั้งหมดบนหน้าเว็บ ช่วยให้คุณเห็นเส้นขอบขององค์ประกอบ ส่วนขยายรองรับสีรุ้งทั้งหมด (แดง ส้ม เหลือง เขียว น้ำเงิน คราม และม่วง) นอกจากนี้ยังมีฟังก์ชันในการลบเค้าร่างหลังจากนำไปใช้แล้ว

โปรแกรมจำลองเบราว์เซอร์มือถือ

ทดสอบหน้าเว็บบนมือถือและแบบตอบสนองบนเดสก์ท็อปของคุณ เลือกความละเอียดหน้าจอมือถือที่พบบ่อยที่สุดด้วยการคลิกเมาส์เพียงครั้งเดียว หน้าของแท็บที่ใช้งานอยู่จะเปิดขึ้นในหน้าต่างแยกต่างหาก

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