ส่วนขยายและเครื่องมือ Chrome 10 อันดับแรกสำหรับนักออกแบบเว็บไซต์

หากคุณเป็นนักออกแบบที่ต้องการเครื่องมือที่มีประโยชน์เพื่อเพิ่มความเร็ว ทำงานร่วมกัน หรือตรวจสอบ โครงการ พัฒนาเว็บ(web development) ของคุณ ส่วนขยาย Chrome มีเครื่องมือมากมาย

รายการนี้ประกอบด้วยเครื่องมือและ ส่วนขยายChrome ที่ ได้รับความนิยมมากที่สุด และบางส่วนอาจโต้แย้งว่าจำเป็น ซึ่งผู้ใช้ที่ทำงาน ออกแบบ(design work) ทุกคน ควรมีอยู่ในกระเป๋าอุปกรณ์(kit bag)

1. DomFlags

DOM Flags เป็น (DOM Flags)ส่วนขยาย Chrome(Chrome extension) ที่ ใช้งานง่าย ซึ่งเป็นวิธีใหม่สำหรับนักพัฒนาในการทำงานกับเครื่องมือเบราว์เซอร์ ช่วยให้นักพัฒนาสามารถเร่งงานองค์ประกอบการจัดสไตล์ได้

การใช้แป้นพิมพ์ลัดสำหรับแต่ละองค์ประกอบ คุณสามารถคั่นหน้าการนำทางของคุณ

เราทุกคนต่างประสบปัญหาในการตรวจสอบองค์ประกอบที่มีรายละเอียดสูง และง่ายต่อการหลงทาง

DOM Flagsช่วยให้คุณสามารถติดตามองค์ประกอบการจัดรูปแบบรวมถึงคุณลักษณะในการตรวจสอบส่วนประกอบด้วยความแม่นยำโดยอัตโนมัติ ในทางกลับกัน จะช่วยเร่งความเร็วเวิร์กโฟลว์ DevTools และการใช้(DevTools workflow and implementation)งาน

DOM Flagsช่วยให้คุณสามารถติดตามการเปลี่ยนแปลงได้ และรักษาโฟกัสของคุณที่องค์ประกอบที่คุณกำลังทำงานด้วย

2. ซิซซี่

Sizzyให้วิธีง่ายๆ แก่นักออกแบบและนักพัฒนาในการทดสอบไซต์ของตนในวิวพอร์ตต่างๆ

Sizzyมอบวิธีง่ายๆ ในการตรวจสอบการออกแบบของคุณแบบเรียลไทม์ นำเสนอมุมมองแบบโต้ตอบของอุปกรณ์และขนาดหน้าจอจำนวนเท่าใดก็ได้ คุณยังสามารถจำลองแป้นพิมพ์ของอุปกรณ์(device keyboard)แล้วสลับไปมาระหว่าง โหมดแนวนอนและแนว(landscape and portrait modes)ตั้ง

การติดตั้งส่วนขยาย Chrome(Chrome extension)จะเพิ่มปุ่มลงในแถบเครื่องมือของคุณ ซึ่งเมื่อคลิกจะเป็นการเปิดURLปัจจุบันในแพลตฟอร์ม Sizzy (Sizzy platform)ส่วนขยายจะบล็อกส่วนหัว " x-frame-options " ทั้งหมด ดังนั้นคุณจะสามารถดูเว็บไซต์ใดๆ ทางออนไลน์ได้

Sizzyเป็นโครงการโอเพ่นซอร์ส(source project)และคุณสามารถดูโค้ดทั้งหมดได้ที่นี่(here)

3. เช็คบอท

Checkbotสามารถทดสอบไซต์ของคุณเพื่อหาปัญหาด้านความปลอดภัยและตรวจสอบความเร็วในการโหลดหน้าเว็บไซต์ของคุณ จะช่วยให้นักออกแบบมีวิธีการระบุข้อผิดพลาดทั่วไป และแนะนำการปรับปรุงด้านความปลอดภัยของไซต์(site security)เครื่องมือค้นหา(search engine)และความเร็วของ(site speed)ไซต์

ด้วยการใช้เมตริกแนวปฏิบัติที่ดีที่สุดมากกว่า 50 รายการ ระบบจะตรวจสอบเว็บไซต์เพื่อหาแนวทางปฏิบัติที่ดีที่สุดSEOลิงก์เสียเนื้อหาที่ซ้ำกัน(duplicate content)และอื่นๆ เครื่องมือนี้จะตรวจสอบความถูกต้อง ของ CSS , JS และHTMLด้วย

Checkbot หยิบจับข้อผิดพลาดของนักออกแบบและผู้(designer and coder errors) เขียนโค้ด ในแบบเรียลไทม์ ช่วยให้คุณไม่ต้องกลับไปตรวจสอบงานของคุณซ้ำๆ

หากคุณกำลังมองหาเครื่องมือคุณภาพ(quality tool) ดี ที่จะแก้ไขลิงก์ของหน้าที่เสีย ตรวจสอบให้แน่ใจว่าเนื้อหาและชื่อหน้า(content and page titles) มีเอกลักษณ์เฉพาะตัว และกำจัดสายเปลี่ยนเส้นทาง เครื่องมือนี้จะเป็นประโยชน์

สำหรับนักออกแบบ มันสามารถช่วยคุณย่อขนาด CSS และ JS(CSS and JS) ของคุณให้เล็กที่สุด รวมทั้งให้คำแนะนำเกี่ยวกับวิธีการย่อขนาด CSS ของคุณและ(CSS)ใช้ประโยชน์จากการแคชของเบราว์เซอร์

4. GistBox Clipper

GistBoxเป็นหนึ่งในส่วน ขยาย Chrome ที่มีประโยชน์ที่สุด สำหรับนักออกแบบเว็บไซต์

GistBox สามารถสร้างGitHub Gistจากบล็อคโค้ด(code block) ใดๆ บนหน้าเว็บที่คุณกำลังดูอยู่

ที่มุมขวาบน(right-hand corner)ของบล็อคโค้ด คุณจะเห็นปุ่มเล็กๆ ซึ่งเมื่อกดแล้ว จะมีป๊อปอัปที่ช่วยให้คุณบันทึกโค้ดลงในส่วนสำคัญ(Gist)

คุณสามารถสร้าง Gists ใหม่ได้ด้วยการคลิกเมาส์ขวาและบันทึกบล็อคของโค้ดสำหรับการตรวจสอบและใช้งาน(inspection and use) ใน ภายหลัง

การผสานรวมกับGitHubช่วยให้นักออกแบบและนักพัฒนาสามารถรวบรวมบล็อคโค้ดและจัดการหรือจัดหมวดหมู่เพื่อใช้ในภายหลัง ทำให้เป็นเครื่องมือส่วนขยาย Chrome ที่ (Chrome extension)สะดวกและมีประสิทธิภาพ(convenient and efficient)

5. คัลเลอร์ซิลล่า

ColorZillaเป็นส่วนขยาย Chrome ที่มีประโยชน์อย่างเหลือเชื่อสำหรับการรวบรวมรหัสฐานสิบหกซึ่งสามารถติดแท็ก ติดป้ายกำกับ และจัดหมวดหมู่สำหรับโครงการออกแบบเว็บ แต่ละรายการ(web design)

ช่วยให้คุณสามารถเลือกเครื่องมือหยอดตาที่จะดึงสีจากหน้าเว็บใดๆ และบันทึกลงในคลิปบอร์ด ColorZilla

ด้วยสิ่งนี้ คุณสามารถพัฒนาจานสีเพื่อใช้ในภายหลังได้อย่างรวดเร็ว และเพื่อให้มั่นใจว่าคุณใช้สีอย่างสม่ำเสมอในการออกแบบเว็บ และ การพัฒนา(design and development)

ColorZillaยังทำหน้าที่เป็นตัววิเคราะห์สีและตัว แก้ไขการไล่ระดับสี(gradient editor)CSS เพื่อให้คุณสามารถแปลงรูปภาพเป็นCSS

6. WhatFont

ส่วนขยาย Chrome(Chrome Extension)  นี้ ช่วยประหยัดเวลาได้จริงสำหรับผู้ที่ต้องการใช้แบบอักษรโปรดและรวมไว้ในโครงการออกแบบเว็บ(web design project) ของ ตนเอง

ส่วนขยาย WhatFont Chrome(WhatFont Chrome extension)ช่วยให้นักพัฒนาสามารถวิเคราะห์และระบุแบบอักษรเกือบทั้งหมดบนหน้าเว็บได้อย่างรวดเร็ว

ส่วนขยายได้รับการพัฒนามาอย่างดี และแทนที่จะต้องเปิดเครื่องมือตรวจสอบ ส่วนขยายทำงานโดยเพียงแค่โบกเมาส์เหนือแบบอักษร

ไม่เพียงเท่านั้น แต่ส่วนขยายจะระบุบริการที่ใช้เพื่อแสดง ฟอนต์ Pagesไป และจะรองรับGoogle Font API และ Typekit(Google Font API and Typekit.)

7. ไลท์ช็อต

LightShotเป็นเครื่องมือจับภาพหน้าจอ(screenshot tool) อย่างรวดเร็ว ที่ช่วยให้คุณสามารถจับภาพหน้าทั้งหมดหรือบางส่วนของหน้าใดก็ได้ แล้วอัปโหลดหรือดาวน์โหลดหรือส่งไปยังปลายทางของบุคคล(party destination)ที่ สาม

ภาพหน้าจอที่ถ่ายโดยLightShotสามารถใช้และแชร์บนโซเชียลมีเดียหรือพิมพ์ได้

คุณสามารถใส่คำอธิบายประกอบและเพิ่มข้อความ ลูกศร และอื่นๆ ในส่วนที่เลือกของหน้าจอได้ แต่บางทีหนึ่งในคุณสมบัติที่ยอดเยี่ยมที่สุดของเครื่องมือง่ายๆ นี้สำหรับนักออกแบบเว็บไซต์ก็คือ เมื่อเลือกรูปภาพแล้ว คุณจะสามารถดำเนินการค้นหารูปภาพที่คล้ายกันทางออนไลน์ในGoogle(Google image)

LightShotสามารถกำหนดค่าได้หลายภาษา

ส่วนขยายนี้เขียนด้วย JavaScript(JavaScript)ล้วนๆและจะใช้งานได้กับWindows , Chromebook , Linux และ Mac OS (Linux and Mac OS)นอกจากนี้ยังสามารถเข้าถึงได้เป็นแอปพลิเคชันเดสก์ท็อป(desktop application)ทำให้เป็นตัวเลือกที่ยอดเยี่ยมสำหรับนักออกแบบเว็บไซต์ที่ต้องพึ่งพาอุปกรณ์หลายเครื่อง

8. ภาพหน้าจอที่ยอดเยี่ยม

เช่นเดียวกับLightshot Awesome (Lightshot)Screenshot(Awesome Screenshot)คือส่วนขยายการจับภาพหน้าจอและรูปภาพ

อย่างไรก็ตาม มันแตกต่างจากLightshotในหลายประการ ภาพหน้าจอ(Awesome Screenshot) ที่ยอดเยี่ยม สามารถกำหนดค่าให้เชื่อมต่อภาพหน้าจอทั้งหมดของคุณกับGoogle ไดร(Google drive)ฟ์

ช่วยให้คุณสามารถจับภาพหน้าจอองค์ประกอบเหล่านั้นที่อยู่นอกเหนือมุมมองของคุณเพื่อจับภาพทั้งหน้า มีเครื่องมือแก้ไขและใส่คำอธิบายประกอบ(editing and annotation tools) เพิ่มเติมซึ่ง อนุญาตให้ครอบตัดและแก้ไขรูปภาพทั้งหมดภายในส่วนขยาย .. หรือด้วยการใช้แอปพลิเคชันภาพหน้าจอที่ยอดเยี่ยมเพิ่มเติม

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

คุณสามารถเพิ่มรูปภาพเพิ่มเติมลงในภาพหน้าจอได้ เช่นเดียวกับองค์ประกอบสีน้ำเงินหรือลบ(blue or erase elements)ที่คุณไม่ต้องการให้ผู้อื่นเห็น

9. ล้างแคช

ส่วนขยาย ล้างแคชของ Chrome(Cache Chrome Extension)เป็นเครื่องมือที่รวดเร็วและง่ายดายที่ช่วยให้คุณล้างคุกกี้และแคชของหน้าที่คุณกำลังดูอยู่ คุณไม่จำเป็นต้องไปที่หน้าการตั้งค่าของเบราว์เซอร์เพื่อล้างองค์ประกอบของหน้าง่ายๆ

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

มีบางครั้งที่คุณต้องล้างแคชและคุกกี้ แต่การไปยัง การตั้งค่า Chromeนั้นน่าเบื่อหน่าย Clear Cacheให้คุณลบแคชรวมถึงคุกกี้ส่วนกลางหรือในเครื่องได้ด้วยการคลิกปุ่ม

ล้างแคช(Cache)จะช่วยให้คุณสามารถกำหนดค่าองค์ประกอบที่คุณต้องการล้างจากหน้า ตัวแปร(Variables)รวมถึงเงินสด(Cash)ดาวน์โหลด ทุกระบบ ข้อมูลแบบฟอร์ม ที่เงินสด(Cash) ฐาน ข้อมูลดัชนี ข้อมูล(index database)ปลั๊กอิน รหัสผ่าน และอื่นๆ

10. ส่วนขยาย Google Chrome สำหรับนักพัฒนาเว็บ

ส่วนขยาย Google Chrome สำหรับนักพัฒนาเว็บ(Web Developer Google Chrome Extension) ช่วยให้นักพัฒนาและนักออกแบบตรวจสอบ วิเคราะห์ และตรวจสอบหน้าเว็บของพวกเขาได้อย่างง่ายดาย เพื่อหาการละเมิดการออกแบบแนวปฏิบัติ(practice design) ที่ดีที่สุด การ เขียนโค้ด การใช้งาน และการเพิ่มประสิทธิภาพกลไกค้นหา

เป็นเครื่องมือแบบ all-in-one ที่ยอดเยี่ยมที่ไม่หนักในการเรียกดูทรัพยากรของเรา แต่ให้ข้อมูลมากมายที่เป็นประโยชน์ต่อการออกแบบเว็บและยังรับผิดชอบ องค์ประกอบ การเพิ่มประสิทธิภาพกลไกค้นหา(search engine optimization)ภายในเว็บไซต์หรือหน้า

 ส่วนขยายติดตั้งแถบเครื่องมือด้วยเครื่องมือสำหรับนักพัฒนาเว็บหลายตัว

เครื่องมือนี้จะให้ข้อบ่งชี้เกี่ยวกับขนาดหน้า ความกว้าง และขนาด ซึ่งขัดแย้งกับแนวทางปฏิบัติที่ดีที่สุดในการใช้งาน(practice use)บนอุปกรณ์หลายเครื่อง ช่วยให้คุณตรวจสอบ JavaScript(JavaScript)ที่ฝังและดูเว็บไซต์ของคุณผ่านการจำลองอุปกรณ์ต่างๆ

ส่วนขยายนี้ทำงานได้ดีบนWindows , Linux และ Mac OS นอกจากปัญหาด้านการเขียนโค้ดและการออกแบบ(coding and design issues)แล้ว ยังให้ข้อมูลเชิงลึกเกี่ยวกับข้อมูลเมตาแท็ก(tag information) หัวข้อ การตอบกลับข้อมูลสี(color information)และข้อมูลภูมิประเทศ

คุณสามารถตรวจสอบคุณสมบัติหลักของเครื่องมือรวมถึงความสามารถทั้งหมดได้บนเว็บไซต์ของผู้พัฒนาChris Pedericks(Chris Pedericks’ website)

ไม่ต้องสงสัยเลยว่ามี ส่วนขยายChromeคุณภาพสูงและมีประโยชน์อีกมากมาย ที่ นักออกแบบเว็บไซต์หรือนักพัฒนา(designer or developer)สามารถใช้ได้

รายการนี้แสดงเครื่องมือยอดนิยมและมีประโยชน์บางส่วน คุณมีคำแนะนำสำหรับเครื่องมือที่คุณคิดว่าฉันมีประโยชน์มากกว่าหรือดีกว่าเครื่องมือในรายการนี้หรือไม่ แจ้งให้เราทราบ.



About the author

ฉันเป็นมืออาชีพด้านคอมพิวเตอร์ที่มีประสบการณ์การทำงานกับซอฟต์แวร์ Microsoft Office รวมถึง Excel และ PowerPoint ฉันยังมีประสบการณ์กับ Chrome ซึ่งเป็นเบราว์เซอร์ของ Google ทักษะของฉันรวมถึงการสื่อสารที่เป็นลายลักษณ์อักษรและด้วยวาจา การแก้ปัญหา และการคิดอย่างมีวิจารณญาณ



Related posts