การพัฒนาเว็บไซต์ต้องทำ Checklist ความต้องการซับซ้อนมาก ไม่ว่าจะเป็น Color/Font Schemes, ปัญหา CSS Layout, หรือ Responsive บนอุปกรณ์ต่างๆ การติดตามปัญหาที่เกิดขึ้นสำคัญมาก นี่คือ Chrome Extensions สำหรับนักพัฒนาเว็บที่ดีที่สุด (และเบราว์เซอร์ Chromium-based อื่นๆ)
1. Color Pick Eyedropper
ชอบ Color Scheme ของเว็บไซต์ไหนอยากนำไปใช้? Color Pick "Eyedropper" ดึงสีได้แม่นยำพร้อม Zoom ปรับได้
Extensions แบบนี้ต้องการ Permission ทุกเว็บไซต์เพื่อดึงสี หากต้องการฟีเจอร์ขั้นสูง มี ColorZilla พร้อม Gradient Generator, Palette Viewer, Color History
2. One-Click Full Page Screenshot
Screenshot ทั้งหน้าเว็บเป็นสิ่งจำเป็นทุกวัน บางครั้งวิธีสื่อสารการเปลี่ยนแปลงดีที่สุดคือจับภาพทั้งเว็บไซต์ One Click Full Page Screenshot ทำได้แม่นยำ
ระหว่าง Capture รูปภาพที่เลื่อนครบจะเปิดในหน้าต่างใหม่ ทั้งหน้าเว็บพร้อมดาวน์โหลด PNG นำ Filter, วาดบนเว็บ, เพิ่มข้อความ ได้
3. EditThisCookie
นักพัฒนาเว็บต้องการ Cookie Manager เพื่อเพิ่ม ลบ แก้ไข ปกป้อง และบล็อก Cookies EditThisCookie ช่วยจัดการ Cookies ตามใจชอบ Export/Import ได้ใน JSON Format ช่วยเก็บเว็บไซต์ให้แข็งแรงโดยลบ Cookies เก่า และจำกัดวันที่ดึงข้อมูลสูงสุดของ Cookie ใดๆ
4. ModHeader
ModHeader เป็น Chrome Extension ยอดนิยมแก้ไข HTTP Headers ของเว็บเพจ คลิก 1-2 ครั้ง เปิดใช้งานการแก้ไข Header ตาม URL หรือ Resource Type จุดเด่น: สร้าง Profiles หลายอัน ใส่ค่าต่างๆ ให้ Header ที่แก้ไข การแก้ไขทั้งหมดจำกัดได้แค่แท็บเดียวหรือทั้งไซต์
5. UX Check
เราทุกคนต้องการ Heuristic Evaluation ของเว็บไซต์ที่รันอยู่บ้าง UX Check ทำได้ง่าย แสดง Feedback เกี่ยวกับ UX ทั้งหมดในแผงข้าง คลิก Element ที่ไม่ตรง Heuristic ที่คุณประเมิน เพิ่มโน้ทและ Screenshot ส่งออกเป็น .docx ได้
6. Window Resizer
นักพัฒนาต้อง Emulate เว็บเพจสำหรับขนาดหน้าจอต่างๆ Window Resizer ทำได้ง่ายสำหรับ Laptop, Tablet, Smartphone และขนาดหน้าจอที่คุณเลือก
มีฟีเจอร์ Cool: "Rotate" และ "Live Measurement" พร้อม Visual Customization มากมาย หากอยากสร้างเว็บ Responsive จริง ต้อง Cross-check ลักษณะทุกขนาดหน้าจอ
7. Lorem Ipsum Generator
เพื่อทำงานเว็บเพจให้เสร็จเร็ว ต้องการ Default Text Lorem Ipsum Generator ให้ตัวเลือก Default Text หลายแบบ ย่อหน้าและประโยคต่อย่อหน้าแตกต่างกัน เลือก Fragment หรือ Whole Text ด้วย "Auto select" เทมเพลตสุดท้ายดูขเลганต์เพราะความหลากหลายของข้อความ
8. BuiltWith Technology Profiler
BuiltWith เป็น Extension คลาสสิคเรียนรู้เทคโนโลยีที่รองรับเว็บไซต์อยู่เบื้องหลัง คลิกเดียว สร้าง Profile เรียนรู้ Add-ons และเครื่องมือล่าสุดที่ทำให้เว็บไซต์โดดเด่น ช่วยจำลองฟังก์ชันสำหรับใช้เอง
9. WhatFont
WhatFont เป็นวิธีเร็วและง่ายที่สุดระบุ Font บนเว็บเพจ เพียง Hover ใกล้ข้อความ ได้รายละเอียดครบ รองรับเทมเพลตขั้นสูง TypeKit และ Google FontAPI
10. CheckMyLinks
บางครั้งต้องการสรุปลิงก์ทั้งหมดของเว็บไซต์ CheckMyLinks เป็น Extension ยอดนิยมสรุป Valid, Invalid, และ Broken Links ผลลัพธ์ลิงก์ของเว็บไซต์ที่รันอยู่แสดงในแผงข้างทันที เครื่องมือนี้ Handy มากสำหรับ Spot Check ก่อน Deploy
11. Pesticide
คาดการณ์ปัญหา CSS Layout? Pesticide Debug ได้โดยให้ Outline ทุก Element บนหน้า กด Ctrl ค้าง ดู Element Info และวิเคราะห์ตำแหน่ง Element บนหน้า
ยังมี Extensions ยอดนิยมอื่นๆ จัดการรายละเอียดสำคัญในเว็บแอป เช่น JSON Viewer สำหรับงาน JSON มี HTML Tree Generator ให้ Tree ของ Elements ทั้งหมดในเว็บไซต์
นอกจากนี้ยังมี Chrome Extensions เยอะสำหรับเพิ่มความเร็วเล่นอินเทอร์เน็ต ดูได้ที่นี่!
