บทความ IT เจ๋งๆ
10 Browser Extensions ที่ Developer ควรมีติดเครื่องไว้
24-ธ.ค.-25
คัมภีร์เทพ IT
ปัจจุบัน Browser ได้กลายเป็นหนึ่งในเครื่องมือทำงานหลักของ Developer ไม่ว่าจะ Debug, Test APIs, จัดการประสิทธิภาพการทำงาน และแม้แต่เขียน Code การมี Extensions ที่เหมาะสมติดเครื่องไว้จะช่วยให้ Workflow ดีขึ้น และใช้งานได้สะดวกกว่าเดิม บทความนี้จึงรวบรวม 10 Browser Extensions ที่ Developer ควรมีติดเครื่องไว้
ถ้าคุณทำงานกับ API คุณคงจะรู้ดีว่า ความยุ่งยากของการต้องทนดู JSON ที่ไม่เป็นระเบียบและไม่ได้จัดรูปแบบเป็นอย่างไร
แต่ JSON Viewer Pro จะช่วยทำให้ JSON มีความสวยงามขึ้นในทันที พร้อมทั้ง Highlight Code, โครงสร้างที่สามารถพับซ่อนได้ และมีระบบ Search ที่ครบถ้วน
ทำไมมันถึงยอดเยี่ยม:
- ไม่ต้องเปิด Postman หรือ VS Code เมื่อจะต้องการตรวจสอบ JSON แบบรดวเร็ว
- ทำงานกับ REST API response ได้อย่างราบรื่น
- สามารถแก้ไขและ Export JSON ได้อีกด้วย
เคล็ดลับเพื่อเพิ่มประสิทธิภาพ: ลองใช้งานร่วมกับ “Network” Tab ใน Chrome DevTools ซึ่งจะช่วยให้การ Debug API Responses ทำได้ง่ายขึ้น
2. Wappalyzer
คุณเคยเข้า Website เจ๋งๆ แล้วสงสัยว่า “เจ้า Website นี้มันใช้ Tech Stack อะไรบ้างนะ?”
Wappalyzer จะบอกทุกอย่างให้คุณทราบทันที ไม่ว่าจะเป็น CMS, JavaScript Frameworks, Analytics, Databases, Server Software รวมทั้งอื่นๆ อีก
ตัวอย่าง:
คุณเข้า Website หนึ่ง แล้ว Wappalyzer บอกว่า:
Built with: Next.js, Tailwind CSS, Vercel Hosting, Stripe Integration.
มันเหมาะอย่างยิ่ง สำหรับการหาแรงบันดาลใจ, วิเคราะห์คู่แข่ง หรือวิจัยข้อมูลก่อนจะเริ่มทำ Project ของลูกค้า
หากคุณกำลังใช้งาน React (ซึ่งหลายๆ คนก็ใช้ในปี 2025) นี่คือสิ่งที่คุณต้องมีติดเครื่องไว้
React DevTools จะช่วยให้คุณตรวจสอบ Component Hierarchies, Props, State และ Hooks ได้โดยตรงภายใน DevTools
จุดเด่น:
- สามารถ Debug React Tree ที่ซับซ้อนได้ง่ายขึ้น
- ตรวจสอบประสิทธิภาพของ Component ได้
- ดูได้ว่า Components ไหนที่มีการ Render ซ้ำโดยไม่จำเป็น
Bonus: ยังมีเครื่องมืออื่นที่คล้ายคลึงกันสำหรับ Vue ด้วย ซึ่งก็คือ Vue.js DevTools
4. Octotree (GitHub File Tree)
คุณเคยหลงทางในการเรียกดู GitHub Repository ที่มีขนาดใหญ่บ้างไหม?
Octotree จะช่วยเพิ่ม Sidebar สำหรับ File Explorer ลงใน GitHub ซึ่งเช่นเดียวกันกับที่คุณมีใน VS Code
คุณสามารถทำสิ่งต่อไปนี้ได้อย่างรวดเร็ว:
- สามารถ Navigate Folders ได้เร็วขึ้น
- สลับไปมาระหว่าง Files ต่างๆ ได้ทันที
- Bookmark Repos หรือ Files ที่ต้องการได้
มันเหมาะอย่างยิ่งสำหรับ Open-source Developers, Code Reviewers หรือคนที่ชอบเข้าไปสำรวจ Projects ใหม่ๆ
5. ColorZilla
สำหรับ Frontend Developers ถือว่าห้ามพลาด Extension นี้
ColorZilla มี Eyedropper Tool ที่ให้คุณสามารถเลือกสีต่างๆ จาก Webpage ได้ในทันที
จุดเด่น:
- คัดลอก HEX/RGB Code ได้ในคลิกเดียว
- บันทึก Color Palettes ไว้ใช้งานในภายหลังได้
- มี Gradient Generator ที่ Build-in มาให้ในตัวแล้ว
ตัวอย่าง:
คุณชอบเฉดสีบน Dribbble ไหม? เพียงแค่ → คลิก → คัดลอก → วางลง ใน Tailwind Config ของคุณ เพียงเท่านี้ก็เสร็จเรียบร้อย
6. VisBug
VisBug ถูกพัฒนาขึ้นโดย Google Chrome Labs โดยมันจะช่วยเปลี่ยน Webpage ที่ต้องการ ให้กลายเป็นเหมือน Canvas ที่สามารถแก้ไขได้
คุณสามารถปรับแต่งได้ทั้ง Layouts, ระยะห่าง, สี และตัวอักษรได้อย่างชัดเจน โดยไม่ต้องเปิด DevTools หรือเขียน Code
ใช้ทำอะไรได้บ้าง:
- เหมาะสำหรับการทดลอง UI อย่างรวดเร็ว
- เหมาะสำหรับ Designers และ Frontend Developers เพื่อทดสอบหน้าตาก่อนที่จะแก้ Code จริงและ Push ขึ้นระบบ
ลองคิดซะว่า มันเป็น “Figma ที่ใช้งานได้บน Website จริง”
ถ้าคุณเคยต้อง Debug Session หรือทดสอบ Authentication Flow อันนี้คือ Extension ที่มีประโยชน์สุดๆ
EditThisCookie จะช่วยให้คุณสามารถ ดู, แก้ไข, ลบ หรือเพิ่ม Cookies ใหม่ใน Browser ได้
ทำไม Developers ถึงชื่นชอบ:
- ทดสอบสถานะการ Login ได้ง่ายดาย
- จำลอง User Sessions
- Debug ปัญหา JWT หรือ Session ได้เร็วขึ้น
เคล็ดลับ:
ใช้งานร่วมกับ “Application” Tab ของ DevTools จะช่วยให้สามารถตรวจสอบ Auth Tokens ได้รวดเร็วขึ้น
8. WhatRuns
มันคล้ายกับ Wappalyzer แต่ WhatRuns จะช่วยตรวจจับ Frameworks, Libraries, Analytics และ Fonts ที่ใช้ใน Website ได้
มันเป็นทางเลือกที่ทั้งเบากว่าและเร็วกว่าสำหรับ Developers ที่ต้องการข้อมูลในเชิงลึกอย่างรวดเร็วโดยไม่ต้องเปิด Analysis Tool เต็มรูปแบบ
ตัวอย่าง:
คุณจะเห็นสิ่งต่างๆ ได้ในทันที เช่น
“This site uses Next.js, Google Analytics, Cloudflare, and Inter font.”
มันเหมาะอย่างมากสำหรับ Developers ที่ต้องการสำรวจเทคโนโลยี หรือมองหาแรงบันดาลใจในเรื่องการออกแบบ
9. Web Vitals
Web Vitals จะแสดง Core Web Vitals ของ Website ของคุณแบบ Real-Time
คุณจะเห็นค่าต่างๆ เช่น:
- LCP (Largest Contentful Paint)
- FID (First Input Delay)
- CLS (Cumulative Layout Shift)
มันจำเป็นมากสำหรับ Frontend Dev ที่ต้องการ Optimize SEO, Experience ผู้ใช้ และคะแนน Lighthouse
หมายเหตุ: ตอนนี้ Google ได้ยุติการสนับสนุน Extension นี้แล้ว และ Features หลักทั้งหมดถูกย้ายไปไว้ใน Performance Tab ของ DevTools ใน Chrome แล้ว
10. Daily.dev — Developer News Feed
Developers ทุกคนจำเป็นต้องอัปเดตตัวเองอยู่เสมอ — แต่บางที RSS หรือ X ก็เยอะจนล้น
Daily.dev จะรวมข่าวสารและบทความสำหรับ Developers ที่สามารถปรับแต่งให้เหมาะกับแต่ละคน มาใส่ไว้บนหน้า New Tab ของ Browser ของคุณ
คุณจะได้บทความจากแหล่งต่าง ๆ เช่น:
- Dev.to
- Hacker News
- Medium
- Hashnode
- GitHub Discussions
มันเป็นวิธีที่ง่ายที่สุดในการเรียนรู้สิ่งใหม่ๆ ได้ทุกเช้า โดยไม่ต้องเสียเวลาเลื่อนดูไปเรื่อยๆ จนทำให้เสียเวลาแถมอาจจะไม่ได้ข้อมูลที่ต้องการ
สรุป
และนี่ก็เป็น 10 Browser Extensions ที่ Developer ควรมีติดเครื่องไว้ Extensions เหล่านี้ไม่ใช่แค่ช่วยให้คุณประหยัดเวลา แต่ยังช่วยให้คุณคิดเป็นระบบ, เขียน Code ได้เร็วขึ้น, ลดงานจุกจิก, เพิ่มความชัดเจนเวลา Debug และทำให้การ Develop ราบรื่นยิ่งขึ้น ลองเลือก Extensions ที่เหมาะกับงานของคุณดูสิ แล้ว Browser ทั่วไป จะกลายเป็น “เครื่องมือส่วนตัว” ของคุณ
ที่มา: https://medium.com/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด