Hoverify – All-In-One Browser Extension For Web Development
Hoverify เป็นส่วนขยายของ Browser Extension เหมาะสำหรับ Web Development นักออกแบบเว็บไซต์ ด้วยเครื่องมือที่ให้มาทำให้เราสามารถเห็นภาพรวมทั้งเว็บ และแก้ไขเพื่อดูการแสดงผลได้ทันที
รีวิวที่ดีนั้นควรมีราคา
ทุกรีวิวของผมนั้นจะต้องมีราคาบอกไว้เสมอครับ
- ราคาหน้าเว็บขายเอง $30 แบบ Lifetime
– All features
– All updates for lifetime
– License for 3 activations - ขายผ่าน SaaS Marketplace อย่าง PitchGround
Hoverify PitchGround Lifetime license
Hoverify Plan A : $30 แบบ Lifetime
= ได้ 1 User License
Hoverify Plan B : $49 แบบ Lifetime
= ได้ 3 User License
Hoverify Plan C : $98 แบบ Lifetime
= ได้ 10 User License
Hoverify Plan D : $145 แบบ Lifetime
= ได้ 25 User License
Hoverify Plan D : $245 แบบ Lifetime
= ได้ 50 User License
วิธีการติดตั้ง
- ติดตั้ง Browser Extension ส่วนขยายของ Chrome หรือ Firefox ก่อน
- กดที่ icon บน Extension จะขึ้นหน้า Login
- เข้าสู่ระบบ Login ด้วย license key + Email
เว็บเบราว์เซอร์ที่รองรับ
Manage license key
สำหรับใครที่ซื้อมาแล้ว จะมี Account ของตัวเองสำหรับจัดการ license key ได้ด้วยตนเอง ซึ่งสิ่งที่ทำได้ใน Account คือ
- เปลี่ยน Email Account (กรณีซื้อมากกว่า 1 license key )
- Assigned email address คือ เราสามารถแก้ไขเมล์ของตัวเองได้ว่า Key ไหนจะให้ใช้กับเมล์ไหน
- Activations คือ สามารถจัดการ Deactivate และ Change device name
แต่ถ้าเรากด Deactivate ที่ตัว Browser Extension เมื่อ Login อีกครั้งก็จะให้ตั้งชื่อ Device name และ Activate เครื่องนั้นใหม่อยู่ดี เท่ากับว่าข้อ 3 ทำได้ผ่าน Browser Extension ได้เลย โดยไม่ต้องเข้าหน้า License Manager
วิธีการย้าย license key
ใบอนุญาต One license key นั้น สามารถ Activations ได้ 3 ที่พร้อมกัน
ตัวอย่างที่ 1
ใช้กับคอมที่บ้าน 1 เครื่อง ติดตั้ง Hoverify กับ…
1- Mozilla Firefox (ใช้ที่บ้าน)
2- Google Chrome (ใช้ที่บ้าน)
3- Microsoft Edge (ใช้ที่บ้าน)
ตัวอย่างที่ 2
ใช้กับคอมที่บ้าน + คอมที่บริษัท = 2 เครื่อง จะติดตั้ง Hoverify กับ…
1- Mozilla Firefox (ใช้ที่บ้าน)
2- Google Chrome (ใช้ที่บ้าน)
3- Google Chrome (ใช้ที่บริษัท)
การตั้งค่า Hoverify
เครื่องมือนี้พัฒนาขึ้นเพื่อ web developers มืออาชีพ ตอบโจทย์ปัญหาน่าปวดหัวรายวันที่ต้องเจอ
เมื่อติดตั้งและ Activations เสร็จแล้ว จะมีเมนูให้เห็นดังนี้ครับ
- Inspect : ตรวจสอบ html และ css โดยเพียงแค่วางเมาส์เหนือองค์ประกอบ
- Color Eyedropper : จิ้มเลือกสีที่ไหนก็ได้บนหน้าจอ ได้ทั้งรูปภาพและ iframes
อารมณ์เหมือนเอาหลอดดูดสี ไปจิ้มเอาสีบนพื้นที่หน้าเว็บ ความพิเศษของ Hoverify มันเหมือนปืนเล็งเป้า จุดตัดตรงกาลางเส้น คือจุดที่มันจะจับว่าสี RGB คือสีอะไร แล้วมันก็จะปักหมุดจานสีไว้ตรงตำแหน่งนั้นๆค้างไว้ ฉะนั้นจิ้มไปให้ทั่วได้เลย เดี๋ยวค่อยมาเก็บ Code สี RGB ก็ได้ครับ - Assets : ดึงรูปภาพ svgs และวิดีโอจากหน้าอย่างรวดเร็ว
- Responsive : ดูตัวอย่างไซต์ใด ๆ บนหน้าจอหลายขนาดเคียงข้างกัน
- Debug : เครีย Clear Cacheตรวจสอบความถูกต้องของ Meta Tags, Links, Spellcheck
- Built with : รู้ว่าเว็บไซต์ใช้เทคโนโลยีใดในคลิกเดียว
- Take Screenshot : จับภาพหน้าจอของหน้าหรือทุกแท็บพร้อมกัน
ในการจับภาพ Screenshot หน้าจอนั้นมีให้เลือกถึง 3 Option คือ
– Capture Full Page : จับภาพทั้งหน้า ยาวลงมาถึงด้านล่างของเว็บ
– Capture Visible Area : เลือกพื้นที่แคปหน้าจอด้วยตนเอง
– Capture All Tabs : แคปหน้าจอทุกแถบที่เป็นอยู่ (จะไม่ Scroll bar ลงมานะครับ เท่าที่แสดงให้เห็นอยู่)
Trip เมื่อไม่ต้องการใช้ฟังก์ชั่นทั้ง 7 หัวข้อ ให้กด ESC บนแป้นคีย์บอร์ดนะครับ จะเป็นการยกเลิก
ฟังก์ชั่นการใช้งาน Hoverify
มาถึงหัวข้อของรายละเอียดแต่ละฟังก์ชั่นของ Hoverify กันครับว่าทำอะไรได้บ้าง
- Inspector
เจ้า Hoverify นั้นทำเรื่องต่างให้ง่ายเมื่อเราต้องการตรวจสอบไซต์ โดยเพียงแค่วางเมาส์เหนือองค์ประกอบบนเว็บไซต์ ก็จะแสดงรายละเอียดของ Element นั้นๆให้เราเห็น - Color Eyedropper
- Assets
- Responsive Mode
- Built With
- Screenshots
