บทความ IT เจ๋งๆ
13 Browser Extensions ที่ Web Developers ควรเรียนรู้ไว้
06-มี.ค.-20
คัมภีร์เทพ IT
Browsers ที่ทันสมัยอย่าง Google Chrome (รวมทั้งอื่น ๆ) ไม่เพียงมอบประสบการณ์ที่ดีในการเยี่ยมชม Website แต่ยังมี Tools ที่มีประโยชน์สำหรับ Web Developers ในการสร้าง Application ที่ยอดเยี่ยมอีกด้วย บทความนี้จึงได้รวบรวม 13 Browser Extensions ที่ Web Developers ควรเรียนรู้ไว้ เพื่อช่วยให้ Developers ทำงานและพัฒนา Application อย่างมีประสิทธิผล รวมทั้งหา Bugs ได้เร็วขึ้น
React/Redux and Vue Dev Tools
React.js และ Vue.js เป็น JavaScript Framework ที่ยอดเยี่ยม แต่เพื่อที่จะใช้ประสิทธิภาพพวกมันให้เต็มที่ คุณควรใช้ Browser Extensions ที่เกี่ยวข้องด้วย
React Developer Tools มีพร้อมใช้งานใน Google Chrome รวมทั้งยังช่วยให้คุณใช้ DevTools อย่างมีประสิทธิภาพมากขึ้น มันช่วยให้คุณสามารถตรวจสอบ React Components, Props และ State ได้ มันมีประโยชน์และเป็นตัวช่วยที่ดีสำหรับการพัฒนา React.js
หากคุณเคยประสบปัญหาเกี่ยวกับ State ของ Application ของคุณ Redux DevTools ถือเป็นพระเอกขี่ม้าขาวที่จะมาช่วยในเรื่องนี้ มันสามารถใช้กับ Architecture-Handling State และทำงานกับ Redux ได้เป็นอย่างดี เคล็ดลับที่แนะนำ: ให้ Activate Extension ใน Chrome แล้วเข้า Website อย่าง Airbnb.com ซึ่ง Airbnb ใช้ React / Redux จากนั้นคุณจะได้ทราบข้อมูลเชิงลึกเกี่ยวกับวิธีการจัดโครงสร้างของ State Management ด้วย DevTools อย่างไร
ส่วน Vue.js Devtools มีประโยชน์อย่างยิ่งในการ Debug Vue Components และถือเป็นสิ่งที่ Vue Developers ควรมีติดเครื่องไว้
JSONView
เคยสงสัยบ้างไหมว่าทำไม JSON Data ถึงได้ดูดีใน Browsers ของคนอื่น แต่ในเครื่องของคุณกลับไม่เป็นแบบนั้น นั่นอาจเป็นเพราะพวกเขาใช้ JSONView Extensions สำหรับ Chrome ซึ่งมันช่วยจัด Format ของ JSON ได้เป็นอย่างดีและแทบจะในทันที มันจึงเป็น Extension ที่หลายคนชื่นชอบ
Library Sniffer
Library Sniffer เป็น Tool ที่ยอดเยี่ยมในกรณีที่คุณต้องการทราบว่า Frameworks หรือ Libraries ใดที่ Web Application กำลัง Run อยู่ ตัวอย่างเช่น คุณสามารถตรวจสอบได้ว่า Website นั้นใช้ WordPress หรือ Drupal หรือถูกสร้างขึ้นด้วย React.js, Vue.js หรือ AngularJS เป็นต้น
CSS Scan 2.0
CSS Scan 2.0 เป็น Extension ที่ยอดเยี่ยมในการ Inspect และ Copy CSS ได้อย่างงายดาย เพียงแค่คุณวาง Mouse ไว้บน Element ที่ต้องการ แต่คุณอาจจำเป็นต้องซื้อ License กรณีที่คุณต้องการใช้ทางเลือกอื่นที่ไม่เสียเงิน ก็สามารถใช้ CSS Peeper ซึ่งจะช่วยให้คุณ Focus ไปที่การ Design มากกว่าการเจาะลึกในเรื่อง Code
Web Developer
Web Developer Extension จะทำการเพิ่ม Toolbar ให้ Browser ของคุณด้วย Developer Tools ที่หลากหลาย คุณสามารถ Disable สิ่งต่าง ๆ อย่าง JavaScript, เปลี่ยน Layout ของ Page, การจัดการ Image และอื่น ๆ อีกมากมาย โดยคุณสามารถใช้งานได้ทั้งบน Chrome และ Firefox
WhatFont
WhatFont ค่อนข้างจะเป็น Extension ขนาดเล็ก ที่จะช่วยบอกคุณว่ามี Font ใดบ้างที่ถูกใช้บน Website โดยสิ่งที่คุณต้องทำก็คือ ทำการ Enable Extension แล้ววาง Mouse เหนือข้อความ มันง่ายใช่ไหม! คุณสามารถใช้งานพวกมันได้ทั้งบน Chrome และ Firefox
ColorZilla
คุณสามารถใช้งาน ColorZilla ได้ทั้งบน Chrome และ Firefox มันช่วยเพิ่มประสิทธิภาพการใช้งานในระดับที่ Advance ขึ้นโดยมีทั้ง Eyedropper, Color Picker, Gradient Generator และอื่น ๆ อีกมากมาย สิ่งที่คุณสามารถทำได้ เช่น จะได้รู้สีของ Pixels ต่าง ๆ บน Website นอกจากนี้ยังจะได้รู้ถึง Color History และ Palette Viewer อีกด้วย
Spectrum
Accessibility ถือเป็นสิ่งสำคัญในการพัฒนา Website ในสมัยใหม่ เนื่องจากมีคนมีปัญหาด้านสายตาจำนวนมากที่ใช้งานWebsite และ Application อย่างเช่น Color Vision Deficiency (CVD) ที่ส่งผลกระทบต่อความสามารถของผู้คนในการแยกแยะสี และด้วย Spectrum คุณจะสามารถทดสอบ Website ด้วย CVD ประเภทต่าง ๆ ได้
Site Palette
Extension นี้ช่วยให้คุณสามารถดูสีจาก Website ต่าง ๆ ได้ในรูปแบบของ Color Palettes มันรองรับ Palette Generators หลายแบบ, สร้าง Shareable Links, Prints out หรือ Saves Palettes ในรูปแบบ PDF รวมทั้งอื่น ๆ ด้วย
Toby
Toby ถูกสร้างขึ้นเพื่อช่วยคุณในการจัดระเบียบ Tab ของ Browser รวมทั้งช่วยให้คุณไม่ต้องเปิดมันบ่อย ๆ มันเป็น Workspace ที่อยู่บน Tab ที่เปิดขึ้นใหม่ทุกครั้ง และคุณสามารถเพิ่มสิ่งต่าง ๆ ได้โดยการ Drag & Drop รวมทั้งมันช่วยให้เกิด Productivity ในการทำงานมากขึ้น
Talend API Tester
Talend API Tester เป็น Extension ที่ยอดเยี่ยมที่ให้คุณสามารถมี Interact กับ REST, SOAP และ HTTP API จากภายใน Browser ของคุณ (ซึ่งมันก็คล้าย ๆ กับ Postman) แม้จะเป็น Free version แต่มันก็ช่วยจัดการกับ HTTP Requests ทุกประเภท และยังรองรับในเรื่อง Security และ Authentication
Full Page Screen Capture
คุณเคยต้องการจับภาพ Screenshot ของ Page ปัจจุบันของคุณทั้งหมดโดยไม่ต้อง Request Permission เพิ่มเติมหรือไม่? Full Page Screen Capture อาจเป็น Extension ที่เหมาะสมกับคุณก็ได้ เพียงแค่คุณคลิกที่ Extension Icon หรือใช้ Shortcut แล้วส่งไปยัง Tab ใหม่ที่คุณสามารถ Download ผลลัพธ์เป็นแบบรูปภาพ หรือ PDF ได้ อีกทั้งยังสามารถใช้งานได้กับ Scrollable Elements หรือ iframes
ที่มา: https://medium.com/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด