13 พฤศจิกายน 2566 ครีเอทีฟด้านการสื่อสารทางการตลาดออนไลน์ และการออกแบบเว็บไซต์
30 ส่วนขยาย CHROME ที่น่าทึ่งสำหรับนักออกแบบและนักพัฒนา

หากใครที่กำลังมองหาเครื่องมือ ที่ทำให้การออกแบบข้ามแพลตฟอร์มเป็นเรื่องง่าย หรือมองหาเคล็ดลับที่จะเพิ่มประสิทธิภาพการทำงาน ในบทความนี้เรามีส่วนขยาย Chrome มาแนะนำให้ครับ!!!

 

สำหรับส่วนขยาย Chrome นั้นเป็นส่วนสำคัญของขั้นตอนการทำงานของนักออกแบบเว็บไซต์ ตั้งแต่การขยายประสิทธิภาพการทำงานในแต่ละวัน ไปจนถึงเครื่องมือการเขียนโค้ดแบบครบวงจร ซึ่งแน่นอนว่ามีวิธีต่างๆ มากมายในการเร่งกระบวนการของเราในยุคปัจจุบัน!!

 

ดังนั้น ในบทความนี้เราจึงได้นำบทสรุปส่วนขยาย Chrome ที่ดีที่สุด 30 รายการจากการวิเคราะห์ และรวบรวมข้อมูลของ webdesignerdepot มาฝากกัน ซึ่งนักออกแบบเว็บไซต์และนักพัฒนาทุกคนควรรู้ในปี 2024 เพื่อเป็นการไม่เสียเวลาเราไปดูแต่ละรายการกันเลยดีกว่าครับ 

 

1. Image Downloader

สำหรับ Image Downloader นั้นช่วยให้เราสามารถดาวน์โหลดภาพจำนวนมากจากหน้าเว็บได้ ซึ่งสิ่งนี้มีประโยชน์อย่างยิ่ง หากเราต้องการเปลี่ยนวัตถุประสงค์ของรูปภาพในหน้าต่างๆ หรือมีโฆษณาแบบรูปภาพหลายสิบรายการให้สร้าง อีกทั้งเรายังสามารถกรองรูปภาพที่เราดาวน์โหลดตามขนาดได้อีกด้วย 

ลิงก์: Image Downloader

 

2. Window Resizer

สำหรับ Window Resizer นั้นช่วยลดความยุ่งยากในการออกแบบเว็บไซต์ข้ามแพลตฟอร์ม โดยส่วนขยายจะติดตั้งลงใน Chrome โดยตรง และจะปรับขนาด ให้พอดีกับขนาดหน้าจอมาตรฐานทั้งหมดได้อย่างน่าเชื่อถือ รวมถึงเดสก์ท็อป แท็บเล็ต และมือถือ ฉะนั้นหากเราต้องการประหยัดเวลา ถือเวลาเหมาะเลยละ

ลิงก์: Window Resizer

 

3. WAVE

สำหรับ WAVE เป็นส่วนขยายที่มีประโยชน์ ซึ่งจะแจ้งให้เราทราบว่าเพจของเราตอบสนองและใช้งานง่ายหรือไม่ ตั้งแต่การเตือนเราเกี่ยวกับแท็ก alt ที่หายไป ไปจนถึงการตรวจสอบขนาดตัวอักษร และเพื่อให้แน่ใจว่าลำดับชั้นของเพจของเราเป็นไปตามลำดับ นี่เป็นเครื่องมือที่ยอดเยี่ยมสำหรับนักออกแบบที่ต้องการปรับแต่งเพจของตนสำหรับ SEO

ลิงก์: WAVE

 

4. Browser Stack 

ไม่ว่าจะเป็น Chrome, Windows 10 หรือ macOS Mojave, ซึ่ง BrowserStack จะทำให้ง่ายต่อการดูอย่างแม่นยำว่า หน้าเว็บของเราจะแปลอย่างไรในเบราว์เซอร์ต่างๆ เพียงติดตั้งส่วนขยายและเลือกเบราว์เซอร์ที่เราต้องการประเมิน เครื่องมือจะจัดการส่วนที่เหลือเอง

ลิงก์: BrowserStack

 

5. Dark Reader

สำหรับ Dark Reader ส่วนขยายที่มีประโยชน์นี้เปิดใช้งานโหมดมืดบนเว็บไซต์ส่วนใหญ่โดยอัตโนมัติ ลดแสงสะท้อนที่รุนแรงและทำให้หน้าจอของเราสามารถจัดการได้ง่ายขึ้นสำหรับดวงตา มันเป็นเครื่องมือที่เรียบง่ายและมีประสิทธิภาพที่อาจช่วยรักษาสายตาของเราไว้ได้ 

ลิงก์: Dark Reader

 

6. Page ruler 

สำหรับ Page ruler เป็นส่วนขยายที่ช่วยให้เราสามารถวาดการเลือกที่กำหนดเองบนหน้าจอของเรา และค้นหาการวัดความสูงและความกว้างที่แม่นยำ รวดเร็ว ตรงไปตรงมา และแม่นยำ ซึ่งหมายความว่าเราไม่ต้องกังวลว่าภาพหนึ่งจะมีพิกเซลใหญ่กว่าภาพที่เหลือนั่นเอง 

ลิงก์: Page ruler

 

7. uBlock Origin

สำหรับ uBlock Origin ช่วยในการกรองและบล็อกโฆษณาที่น่ารำคาญที่นักพัฒนาซอฟต์แวร์พบเจอในแต่ละวัน และยังช่วยให้เราสามารถบล็อกคำเตือนคุกกี้ โอเวอร์เลย์ และรายการตามโฮสต์ได้ หากเราเป็นมืออาชีพที่เต็มไปด้วยป๊อปอัป นี่คือส่วนขยายสำหรับเรา!!

ลิงก์: uBlock Origin

 

8. WhatFont

สำหรับ WhatFont ช่วยขจัดความยุ่งยากในการค้นหาแบบอักษร โดยการระบุแบบอักษรบนหน้าเว็บได้ทันที มันยังบอกขนาดตัวอักษร น้ำหนัก และสี ซึ่งหมายความว่าเราสามารถใช้เวลาน้อยลงในการค้นหาแบบอักษรที่ไม่ชัดเจนบนอินเทอร์เน็ต และมีเวลามากขึ้นกับสิ่งที่เราอยากทำมากที่สุดนั่นเอง 

ลิงก์: WhatFont 

 

9. ClickUp

สำหรับ ClickUp ยังมีส่วนขยาย Chrome ที่ยอดเยี่ยม ซึ่งอัดแน่นไปด้วยคุณสมบัติหลักจำนวนหนึ่งของซอฟต์แวร์ ซึ่งช่วยให้นักพัฒนาสามารถติดตามเวลา จดบันทึกภาพหน้าจอ และสร้างงานใหม่ได้เพียงกดปุ่ม นอกจากนี้หากเราใช้แพลตฟอร์มหลักอยู่แล้ว ทุกสิ่งที่เราทำกับส่วนขยาย จะซิงค์กลับไปยังขั้นตอนการทำงาน ClickUp หลักของเรา!!

ลิงก์: ClickUp

 

10. Lorem Ipsum Generator

หากเราเบื่อกับการพิมพ์ประโยคที่พูดพล่อยๆ และรายการช็อปปิ้ง เพื่อทดสอบรูปลักษณ์ของการออกแบบเว็บไซต์ของเรา Lorem Ipsum Generator สามารถช่วยแก้ไขปัญหานี้ ด้วยการสร้างข้อความตัวเติมภาษาละตินแบบง่ายๆ เพื่อให้เราใช้เป็นตัวยึดตำแหน่งบนเพจของเรานั่นเอง 

ลิงก์: Lorem Ipsum Generator

 

11. Grammarly

ถึงแม้ว่า Grammarly จะไม่ใช่เครื่องมือสำหรับนักพัฒนาหรือนักออกแบบโดยเฉพาะ แต่ก็เป็นตัวเปลี่ยนเกมอย่างแท้จริง ซึ่งไม่ว่าเราจะเขียนอีเมล สร้างเอกสาร หรือแม้แต่แสดงความคิดเห็นเกี่ยวกับโค้ด Grammarly จะรับรองว่าทุกสิ่งที่เราจัดทำมีความชัดเจน กระชับ และปราศจากข้อผิดพลาด

ลิงก์: Grammarly 

 

12. FontsNinja

สำหรับ FontsNinja เป็นส่วนขยายทางเลือกที่ยอดเยี่ยม ที่ช่วยให้เรากำหนดแบบอักษรได้ด้วยการคลิกเพียงไม่กี่ครั้ง!!

ลิงก์: FontsNinja

 

13.  Clear Cache

สำหรับ Clear Cache มันช่วยให้เราสามารถล้างแคชของเบราว์เซอร์ได้ด้วยการคลิกเพียงไม่กี่ครั้ง เพียงระบุสิ่งที่เราต้องการล้าง แล้วคลิกไป ซึ่งมันจะช่วยให้ทำงานเสร็จเร็ว และนั่นคือเหตุผลว่าทำไมเราถึงชอบมัน 

ลิงก์: Clear Cache

 

14. ColorPick Eyedropper

สำหรับส่วนขยาย ColorPick Eyedropper จะเปิดเผยค่าของสีใดๆ ที่เรากำหนดไว้ ดังนั้นเราจึงไม่ต้องอัปโหลดอะไรเลย อีกทั้งยังบอกสีของข้อความได้อีกด้วย นั่นหมายความว่าจะช่วยประหยัดเวลาได้อย่างมากเลยละ 

ลิงก์: ColorPick Eyedropper

 

15. Daltonize

ตามการประมาณการ มีคนมากถึง 1 ใน 20 คนตาบอดสี นั่นคือ 5% ของประชากร ฉะนั้น Daltonize จึงเป็นส่วนขยายที่เป็นประโยชน์ ที่ช่วยให้เราสามารถจำลองการตาบอดสีได้โดยตรงในเบราว์เซอร์ของเรา ทำให้เราสามารถเพิ่มประสิทธิภาพเพจของเราให้ครอบคลุมมากยิ่งขึ้นนั่นเอง 

ลิงก์: Daltonize

 

16. React Developer Tools

สำหรับ React Developer Tools เป็นส่วนขยายที่โดดเด่นสำหรับทุกคนที่ทำงานกับ React โดยชุดเครื่องมือนี้มียูทิลิตี้มากมายที่ช่วยให้เราสามารถติดตาม ประเมิน และวิเคราะห์ทุกแง่มุมของแผนผังส่วนประกอบ React ได้

ลิงก์: React Developer Tools

 

17. Wappalyzer

สำหรับ Wappalyzer แสดงให้เราเห็นอย่างชัดเจนถึงวิธีการสร้างเว็บไซต์ ไม่ว่าหน้าที่สมบูรณ์แบบนั้นจะเป็นผลิตภัณฑ์ของ CSS, Javascript, Python หรือ PHP, Wappalyzer จะให้ทุกสิ่งที่เราจำเป็นต้องรู้ ทั้งหมดนี้ทำได้จากเว็บเบราว์เซอร์ของเรา

 

18. Web Developer Checklist

ในฐานะนักพัฒนาและนักออกแบบ Web Developer Checklist จะแสดงรายการสิ่งที่เราต้องทำก่อนเผยแพร่หน้าเว็บ ตั้งแต่ SEO และการเข้าถึง ประสิทธิภาพของเว็บไซต์และการเพิ่มประสิทธิภาพอุปกรณ์เคลื่อนที่

ลิงก์: Web Developer Checklist

 

19. Save Images To Google Photos

สำหรับ Save Images To Google Photos ช่วยให้เราพบทางออนไลน์ไปยัง Google Photos ได้โดยตรง มันเร็วกว่าการบันทึกภาพหลายสิบภาพลงในฮาร์ดไดรฟ์ของเรา และหมายความว่าเราจะไม่พลาดโอกาสคว้าการออกแบบที่สมบูรณ์แบบสำหรับเพจของเรา

ลิงก์: Save Images To Google Photos

 

20.  Notepad

สำหรับ Notepad ช่วยให้เราจดบันทึกที่สำคัญได้ภายในไม่กี่วินาที โดยที่เราไม่จำเป็นต้องเข้าสู่ระบบด้วยซ้ำ นั่นหมายถึงการใช้เวลาน้อยลงในการจดข้อมูลสำคัญ และไฟล์ที่เกะกะในระบบของเราน้อยลง

ลิงก์: Notepad

 

21. Lightshot

สำหรับ Lightshot นั้นเป็นส่วนขยายภาพหน้าจอที่ดี เมื่อเราทำการติดตั้งเครื่องมือแล้ว เพียงเลือกไอคอนขนนกบนแถบลัด และวาดแผนผังขนาดที่เราต้องการบันทึก จากนั้นเราสามารถบันทึกภาพหน้าจอ เพื่อใช้เองหรือแชร์ผ่านลิงก์ได้ 

ลิงก์: Lightshot

 

22. HTML Validator

สำหรับเครื่องมือที่มีประโยชน์นี้ จะตรวจสอบและตรวจสอบโค้ด HTML ของเราภายในเบราว์เซอร์ได้อย่างรวดเร็วและง่ายดาย ฉะนั้นหากมีข้อผิดพลาดใดๆ ในมาร์อัปของเรา ส่วนขยายนี้จะค้นหาข้อผิดพลาดเหล่านั้น 

ลิงก์: HTML Validator 

 

23. Session Buddy

สำหรับส่วนขยาย Session Buddy ช่วยให้เราจัดการแท็บทั้งหมดของเราได้ในแดชบอร์ดเดียว นอกจากนี้ หากเราลบแท็บหนึ่งไปโดยไม่ตั้งใจ เราสามารถดูและกู้คืนแท็บที่ปิดไปแล้วได้ในทันที!!

ลิงก์: Session Buddy

 

24. Broken Link Checker

สำหรับ Broken Link Checker เป็นส่วนขยายฟรีที่จะตรวจสอบความสมบูรณ์ของเว็บไซต์ของเรา ซึ่งเครื่องมือที่มีประโยชน์นี้จะสแกนหน้าเว็บและโดเมนของเรา เพื่อจัดทำรายการลิงก์ทั้งหมดที่ใช้งานไม่ได้หรือเสีย รวมถึงข้อผิดพลาด 404 รูปภาพ และลิงก์ CSS นั่นเอง 

ลิงก์: Broken Link Checker

 

25. Hiver 

สำหรับ Hiver เป็นส่วนยายการทำงานร่วมกันสำหรับทีมที่ใช้บัญชีร่วมกันบน Gmail โดยเครื่องมือนี้ช่วยให้เพื่อนร่วมงานติดตามอีเมล มอบหมายข้อความให้กับบุคคลอื่น และทำงานร่วมกันในการเขียนอีเมล อีกทั้งเรายังสามารถตั้งค่าการแจ้งเตือนทางอีเมล ติดตามผลเพื่อให้แน่ใจว่าจะไม่มีใครลืมส่งบรีฟที่สำคัญทั้งหมดนั้น

ลิงก์: Hiver

 

26. Loom

สำหรับ Loom เป็นเครื่องมือบันทึกหน้าจอง่ายๆ ที่ทำให้การสร้างและแชร์วิดีโอกับลูกค้าหรือเพื่อนร่วมงานของเราเป็นเรื่องง่าย นี่เป็นวิธีที่ยอดเยี่ยมในการเน้นจุดบกพร่องและนำลูกค้าผ่านการเปลี่ยนแปลงที่สำคัญอย่างรวดเร็ว และฟังก์ชันอื่นๆ อีกมากมาย

ลิงก์: Loom

 

27. Bookmark Sidebar

สำหรับ Bookmark Sidebar เป็นส่วนขยายที่มีประโยชน์นี้ช่วยให้เราสามารถเพิ่ม ลบ และจัดระเบียบบุ๊กมาร์กของเราด้วยการลากและวาง โดยสิ่งนี้ช่วยให้เราติดตามแท็บพิเศษเหล่านั้นทั้งหมด และรับรองว่าเราจะไม่ต้องใช้เวลาหลายชั่วโมงในการค้นหาหน้าเว็บที่เข้าใจยากนั้น

ลิงก์: Bookmark Sidebar

 

28. EditThisCookie

สำหรับ EditThisCookie ช่วยให้เราสร้าง แก้ไข ป้องกัน ลบ และบล็อกคุกกี้ในแต่ละหน้าได้ โดยเราสามารถนำเข้าไปยัง JSON หรือส่งออกเพื่อการวิเคราะห์ได้ หากเราใช้เวลาส่วนใหญ่ในการจัดการกับคุกกี้ของเว็บไซต์ เราจะพบว่าเครื่องมือนี้มีประโยชน์อย่างเหลือเชื่อ

ลิงก์: EditThisCookie

 

29. CSS Viewer

สำหรับ CSS Viewer ช่วยให้เราระบุคุณสมบัติ CSS ของทุกสิ่งบนหน้าเว็บได้อย่างรวดเร็ว ซึ่งหมายความว่าเราใช้เวลาน้อยลงในการสืบค้นเว็บไซต์ เพื่อกำหนดคุณสมบัติแต่ละรายการของทุกองค์ประกอบ

ลิงก์: CSS Viewer

 

30. Site Palette

สำหรับ Site Palette จะวิเคราะห์การเขียนโค้ดของหน้าเว็บที่กำหนด และจัดเตรียมชุดสีที่เชื่อถือได้เพื่อให้เราใช้เป็นข้อมูลอ้างอิงในการทำงานของเรา นอกจากนี้เรายังสามารถสร้างลิงก์เพื่อแชร์จานสีของเรากับผู้อื่นได้อีกด้วย แม่นยำ ทันทีทันใด และใช้งานง่าย

ลิงก์: Site Palette

 

หวังว่าบทความนี้จะเป็นประโยชน์สำหรับผู้อ่านได้ไม่มากก็น้อย ถ้าหากผิดพลาดประการใดต้องขออภัยไว้ ณ โอกาสนี้ด้วยครับ 

 

#การออกแบบเว็บไซต์

#การออกแบบอัตลักษณ์องค์กร, โลโก้, แบนเนอร์, ฉลากบรรจุภัณฑ์, สติกเกอร์ไลน์, สื่อสิ่งพิมพ์ และลายสกรีน


 

 

 

 

---Wynnsoft Solution รับทำเว็บไซต์ รับทำ SEO รับทำการตลาดออนไลน์ รับทำโฆษณา Facebook รับทำเว็บไซต์ ขอนแก่น และรับทำเว็บไซต์ทั่วประเทศ

ข้อมูลจาก: webdesignerdepot