Extension Chrome สุดเจ๋ง ที่ของมันต้องมีติดเครื่องไว้ จะช่วยให้การทำงานของคุณง่ายขึ้น

Sellsuki & Akita UXUI team
Stories of Sellsuki
3 min readJan 23, 2023

สวัสดีจ้าา Hello อันยอง 🙏🏻 วันนี้พวกเราชาว Sellsuki จะมาแนะนำ Extension Chrome สุดเจ๋งที่จะช่วยให้งานออกแบบของเราทำได้ง่ายขึ้น สบายยิ่งขึ้น และ สนุกยิ่งขึ้นไปอีกกกก หลายๆ คนอาจจะรู้อยู่แล้วว่า Extension Chrome มีหลายตัวที่น่าสนใจ และใช้อยู่ วันนี้เราจะมาแนะนำตัวที่พวกเราใช้อยู่ มาดูกันว่า ที่เราใช้เหมือนกันไหม หรือ ใครสนใจก็โหลดมาใช้ได้เลย มารีวิวกันได้นะทุกโคนนน 🥰🥰

https://chrome.google.com/webstore/detail/prism-redline-tool/hkbhjllliedcceblibllaodamehmbfgm
  1. Prism

ตัวแรกที่เราจะแนะนำ นั้นก็คือ Prism เป็น Extension ของ google chrome เป็นเครื่องมือที่ช่วยตรวจสอบความถูกต้องของงาน Design จากหน้าเว็บ เครื่องมือนี้จะบอกรายละเอียดของหน้าเว็บไซต์นั้นทั้งหมด เช่น ขนาดตัวอักษรที่ใช้ขนาดเท่าไหร่, ใช้ Font อะไร, Code สี ที่ใช้ในเว็บไซต์, สีที่ใช้ใน website แต่ละสีใช้ไปกี่%, ระยะห่าง, ขนาดของรูปภาพแต่ละจุดที่ใช้บนเว็บไซต์ และรวมถึงบอกชุด Code ที่ใช้มาให้อีกด้วย เจ๋งไปเลยใช่ไหมละ ลองไปโหลดมาติดไว้ดูน้าาาาา ปล.เป็นเครื่องมือที่แอบเช็คงาน Dev ไปในตัวได้ด้วยว่า Dev ทำงานตรงตาม Design มาหรือเปล่า อิอิ~

https://chrome.google.com/webstore/detail/fonts-ninja/eljapbgkmlngdpckoiiibecpemleclhh/related

2. Font ninja

เอาใจสายรัก Font ด้วย Extension Fonts Ninja ที่จะช่วยในการหา font ตามที่ต้องการ หมดปัญหา เว็บนี้สวยจังใช้ font อะไร เพราะ Extension นี้จะช่วยบอกเราถึง family font / ข้อมูลของ font / ช่องทางการ download รวมถึง ช่องทางการซื้อ font ด้วย ถ้ากรณีเป็น font free จะสามารถ download ได้เลย จาก Extension

หรือกรณีที่เราต้องการ Download font นี้แต่เป็น font ที่ติดลิขสิทธิ์หรือไม่สามารถ download ได้ ทาง Extension จะแนะนำเป็น font ที่มีลักษณะใกล้เคียงกับ font ที่เราต้องการให้ พร้อมทั้งสามารถ Download font ได้

เท่านี้ก็สามารถประหยัดเวลาในการหา font สวยๆ หรือ การหา font family ได้ง่ายๆ ด้วยการใช้ Extension Fonts Ninja 🥰

https://chrome.google.com/webstore/detail/image-downloader-imageye/agionbommeaifngbhincahgmoflcikhm

3. Image Downloader

Image Downloader เป็น extension เครื่องมือช่วย download รูปภาพที่ง่ายและสะดวกมาก โหลดได้ทุกชนิดไฟล์ JPEG, PNG, WEBP, GIF และ SVG สามารถโหลดได้ในครั้งเดียวทั้งหมด หรือเลือกตามภาพที่ต้องการได้ ช่วยประหยัดเวลาไปได้เยอะเลยทีเดียว

https://chrome.google.com/webstore/detail/whatruns/cmkdbmfndkfgebldhnkbfhlneefdaaip/related?gclid=CjwKCAiA9qKbBhAzEiwAS4yeDYs2sz39WJhAmlpybTiRzOQ8niqu_CKnBis-qcnwmFMnNqE2YQCjRBoCB_AQAvD_BwE

4. WhatRuns

WhatRuns เป็นส่วนเสริมที่สามารถค้นหาเทคโนโลยีที่ใช้ในเว็บไซต์ได้เพียงคลิกเดียว โดยจะเป็นการเช็คว่าเว็บไซต์นั้นใช้ภาษาอะไร Widgets อะไร มี Analytics tools อะไรบ้างที่ใช้งานอยู่ เช่น Google Analytic, Hotjar เป็นต้น แถมยังสามารถติดตามเว็บไซต์ที่คุณต้องการเพื่อรับการแจ้งเตือนเมื่อมีการใช้เทคโนโลยีใหม่หรือลบได้อีกเช่นกัน จึงเป็นเครื่องมือที่เหมาะมากสำหรับไว้ใช้ในการทำงานของนักพัฒนาซอฟต์แวร์หรือจะเป็นตำแหน่งอื่นๆที่ทำงานสายข้อมูล

https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb

5. Responsive viewer

Responsive viewer เป็น Extension ของ google chrome ที่สามารถแสดง Responsive ของ Website หรือ Application ได้ โดยมีหลายหน้าจอเป็น category ให้เลือกมากมายทั้ง Mobile Tablet และ Window โดยมี ความสามารถที่น่าสนใจ คือ

  • สามารถเลือกที่จะแสดงผล Responsive ได้หลายหน้าจอตามที่ต้องการได้พร้อมกัน ทำให้สามารถดู ตรวจสอบหรือ เปรียบเทียบ รูปแบบสัดส่วนของ Content ได้
  • มีเครื่องมือ สามารถเลือกได้ว่า เมื่อเราทำการ Scroll หรือ Click จะให้ทุกหน้าจอที่แสดงผลอยู่ทำ Action แบบเดียวกันพร้อมกันหรือไม่
  • สามารถกด Inspect และ Element search ได้
  • สามารถสลับโหมดหน้าจอเป็นแนวนอนหรือแนวตั้งได้
  • สามารถ Screenshot ทั้งเว็บไซต์ออกไปได้ในรูปแบบไฟล์ PNG

ใครที่ควรมีติดเครื่อง

  • Front end developer ใช้ตรวจสอบ Responsive หน้าจอ
  • Designer ตรวจสอบความถูกต้อง ที่ Developer ส่งงานมา

จบกันไปแล้วกับครั้งนี้ที่เรามาแนะนำ Extension Chrome เป็นยังไงมารีวิวกันได้เลยน้า โดยครั้งถัดไปพวกเราชาว UXUI Team Sellsuki & Akita จะมาแนะนำข้อมูลอะไรที่เป็นประโยชน์ต่อชาว UXUI อีก ก็ฝากกดไลค์ กดติดตามไว้ด้วยนะคะ จะได้ไม่พลาด content ดีๆจากพวกเรา (ปล. ถ้ามีข้อมูลผิดพลาดประการใดก็ขอกราบอภัยไว้นะที่นี้ด้วยเด้อ 🙏🏻)

หากเพื่อนๆไม่อยากทำเว็บไซต์เองก็สามารถติดต่อมาทางพวกเราได้ พวกเรามีบริการรับทำเว็บไซต์อยู่นะจ๊ะ (แอบขายของสักหน่อย อิอิ 😝) แต่ถ้าอยากมาร่วมงานกับพวกเรา ตอนนี้เราก็รับคนเพิ่มเพื่อขยายทีมอยู่นะ สามารถติดต่อพวกเราผ่านช่องทางเหล่านี้ Facebook, Website ตามข้อมูลด้านล่างนี้มาได้เลยยยยยยยยยยย

Facebook Page :

Website :

📢 มาร่วมเป็นส่วนหนึ่งในการทำให้วงการ E-Commerce ขับเคลื่อนไปข้างหน้า ส่งประวัติการทำงานพร้อมตำแหน่งงานที่คุณสนใจมาได้เลยที่อีเมล hr@sellsuki.com หรือเข้าชมเว็บไซต์ของเราที่ https://lnkd.in/gUqNHSEW 🐶

--

--