บทความ IT เจ๋งๆ
10 Chrome Extensions ที่ Front-End Developers ควรมีติดเครื่องไว้
05-มี.ค.-21
คัมภีร์เทพ IT
Web Developers ส่วนใหญ่ใช้ Chrome ในการ Develop หากอ้างอิงจาก Wikipedia พบว่าประมาณ 65% ของประชากรโลกใช้งาน Chrome นี่เป็นหนึ่งในเหตุผลที่ Developer เลือกใช้ Chrome เพื่อ Test Application ที่พวกเขาสร้าง หากคุณเป็น Developer ที่ใช้งาน Chrome นี่คือ 10 Chrome Extensions ที่ Front-End Developers ควรมีติดเครื่องไว้ ซึ่งจะช่วยให้ชีวิตของคุณง่ายขึ้น
1. Colorzilla
โดยพื้นฐานแล้ว Colorzilla จะมี Color Picker Widget พร้อมด้วย Features อื่น ๆ อีกมากมาย อีกทั้งยังมี Gradient Generator, Webpage Code Analyser และทุกสิ่งที่คุณต้องการเพื่อใช้จัดการกับสีใน Webpage ของคุณ ตอนนี้มีให้ใช้ใน Firefox ด้วยเช่นกัน
2. CSS Viewer
Tool นี้จะแสดง CSS Properties ทั้งหมดที่เกี่ยวข้องกับ Element ที่เราเลื่อน Cursor ไปไว้ที่นั่น มันเป็น Floating Panel ที่มีรายละเอียดทั้งหมด เช่น Font, Colors, Positioning และอื่น ๆ นอกจากนี้ยังช่วยให้คุณสามารถ Copy CSS ได้อย่างง่ายดาย
3. WhatFont
มันเป็นวิธีที่ง่ายที่สุดในการค้นหา Fonts ที่มีอยู่บน Webpage นั้น ๆ จากที่คุณเห็นในรูปด้านล่าง เมื่อ Extension ถูกเลือกแล้ว หากคุณเลื่อน Cursor ของ Mouse ไปที่ Text ที่คุณต้องการ มันจะแสดง Font ของ Text นั้น
4. Clear Cache
Clear Cache เป็น One-Click Solution สำหรับการ Clear Cache Data และข้อมูลอื่น ๆ ที่ Browser จัดเก็บไว้ ด้วย Extension นี้ คุณไม่จำเป็นต้องเจอกับการ Click ไปที่ Popup หลาย ๆ ครั้งและการ Setting ต่าง ๆ ของ Browser เลย แต่คุณจะสามารถ Clear Data ทั้งหมดได้ภายใน Click เดียว
5. JSONView
JSONView จะช่วยแสดง JSON Response ที่เป็นประเภท application/json เมื่อคุณไม่ได้ดู JSON ในมุมมองแบบ Tree เชื่อว่าคงยากที่จะอ่านและทำความเข้าใจ แต่หากคุณใช้ JSONView ชีวิตของคุณจะง่ายขึ้นอีกเยอะ
เมื่อ JSONView ถูก Disable
เมื่อ JSONView ถูก Enable
หากคุณเป็น React Developer นี่คือ Extension ที่ต้องมีติดเครื่องไว้ มันจะช่วยให้คุณดูและตรวจสอบ Components Hierarchy พร้อมกับ Props และ States ที่เกี่ยวข้องกับมัน นอกจากนี้ยังช่วยให้คุณสามารถเปลี่ยน Props หรือ States ได้หากจำเป็น เพื่อจุดประสงค์ในการ Debug
Ember Inspector เป็น Tool ที่สามารถใช้สำหรับการ Debug Ember Applications มันจะแสดง Routes, Models, Components และ Ember Elements อื่น ๆ ทั้งหมดที่มีอยู่ใน Ember Application นอกจากนี้ยัง Load Ember Store Data ทั้งหมดเพื่อให้คุณสามารถดูพวกมันได้อย่างง่ายดาย และเพื่อให้เข้าใจว่า Extension นี้ทำอะไรได้ สามารถดูรายละเอียดได้ที่นี่
Web Developer จะช่วยทำให้ชีวิตของ Programmer หรือ Designer ง่ายขึ้นมากด้วยการเตรียม Features ที่จำเป็นอื่น ๆ อีกมากมายใน Browser DevTools มันช่วยในการ Manipulating Images, Changing Page Layouts, Displaying Rulers, Outlining Elements ที่มีอยู่ รวมทั้งอื่น ๆ ด้วย
9. jQuery Audit
Extension นี้สร้าง Sidebar ใน Elements Pane ที่มี jQuery Delegated Events, Internal Data และอื่น ๆ ซึ่งเป็น Live DOM Nodes, Functions และ Objects มันถูกใช้สำหรับการ Audit Delegated Events, Data และอื่น ๆ อีกมากมายของ jQuery
Extension นี้ใช้สำหรับค้นหา Metadata ที่อยู่ภายใน Page ซึ่งปกติมักจะไม่สามารถใช้งานได้ขณะที่ Browse อยู่ ซึ่ง Metadata ไม่ได้เป็นเพียงแค่ HTML Meta Tags ทั่วไป แต่เป็น XFN Tags, Microformats ต่าง ๆ, Canonical Attribute, No-Follow Links และอื่น ๆ อีกทั้งมันช่วยในการแสดง Site Properties อื่น ๆ ที่น่าสนใจ
ที่มา: https://betterprogramming.pub/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด