หากคุณเป็นผู้ออกแบบที่ต้องการเครื่องมือที่มีประโยชน์เพื่อเร่งความเร็วทำงานร่วมกันหรือตรวจสอบโครงการพัฒนาเว็บของคุณ Chromeextension มีเครื่องมือมากมาย
รายการนี้ประกอบด้วยรายการที่ได้รับความนิยมมากที่สุดและบางรายการจะ ให้เหตุผลที่จำเป็น - เครื่องมือและส่วนขยายของ Chrome ที่ผู้ใช้ทุกคนที่ทำงานออกแบบควรมีในกระเป๋าของพวกเขา
1 DomFlags
ธง DOM เป็น ส่วนขยาย Chrome ที่ใช้งานง่ายนั่นเป็นวิธีใหม่สำหรับนักพัฒนาในการทำงานกับเครื่องมือเบราว์เซอร์ ช่วยให้นักพัฒนาสามารถเพิ่มความเร็วในการจัดองค์ประกอบของสไตล์
การใช้แป้นพิมพ์ลัดสำหรับแต่ละองค์ประกอบที่คุณสามารถคั่นหน้าการนำทางของคุณ
เราทุกคนประสบปัญหาในการตรวจสอบองค์ประกอบที่มีรายละเอียดสูงและหายไปได้ง่าย
การตั้งค่าสถานะ DOM ช่วยให้คุณสามารถติดตามองค์ประกอบการออกแบบรวมถึงคุณสมบัติในการตรวจสอบชิ้นส่วนด้วยความแม่นยำโดยอัตโนมัติ สิ่งนี้จะช่วยเร่งความเร็วเวิร์กโฟลว์และการใช้งานของ DevTools
การตั้งค่าสถานะ DOM ช่วยให้คุณสามารถติดตามการเปลี่ยนแปลง คงความสำคัญขององค์ประกอบที่คุณกำลังทำงานอยู่
2 Sizzy
Sizzy ให้นักออกแบบและ นักพัฒนาสามารถทำการทดสอบไซต์ของพวกเขาในหลาย ๆ วิวได้อย่างง่ายดาย
Sizzy มอบวิธีง่ายๆในการตรวจสอบการออกแบบของคุณแบบเรียลไทม์ มันมีมุมมองแบบโต้ตอบของอุปกรณ์และขนาดหน้าจอใด ๆ คุณสามารถจำลองแป้นพิมพ์อุปกรณ์แล้วสลับระหว่างโหมดทิวทัศน์และแนวตั้ง
การติดตั้งส่วนขยายของ Chrome จะเพิ่มปุ่มลงในแถบเครื่องมือของคุณซึ่งเมื่อคลิกจะเปิด URL ปัจจุบันในแพลตฟอร์ม Sizzy ส่วนขยายจะบล็อกส่วนหัว“ x เฟรมตัวเลือก ” ทั้งหมดดังนั้นคุณจะสามารถดูเว็บไซต์ออนไลน์ใด ๆ ได้
Sizzy เป็นโครงการโอเพ่นซอร์สและคุณสามารถเห็นทั้งหมด รหัส ที่นี่.
3 Checkbot
Checkbot สามารถทดสอบ เว็บไซต์เพื่อความปลอดภัยและตรวจสอบความเร็วในการโหลดหน้าเว็บไซต์ของคุณ มันจะให้นักออกแบบที่มีวิธีการระบุข้อผิดพลาดทั่วไปและแนะนำการปรับปรุงในการรักษาความปลอดภัยเว็บไซต์เครื่องมือค้นหาและความเร็วของไซต์
การใช้ตัวชี้วัดการปฏิบัติที่ดีที่สุดมากกว่า 50 แบบมันจะตรวจสอบเว็บไซต์เพื่อการปฏิบัติที่ดีที่สุด เนื้อหาที่ซ้ำกันและอื่น ๆ เครื่องมือนี้จะตรวจสอบความถูกต้องของ CSS, JS, และ HTML
Checkbot เลือกข้อผิดพลาดของผู้ออกแบบและ coder ในแบบเรียลไทม์ซึ่งจะช่วยให้คุณไม่ต้องกลับไปทำงานอีกครั้ง
หากคุณกำลังมองหาเครื่องมือที่มีคุณภาพดีซึ่งจะแก้ไขลิงก์ที่ขาดให้ตรวจสอบให้แน่ใจว่าเนื้อหาและชื่อหน้าเว็บที่ไม่ซ้ำกันและการกำจัดเครือข่ายที่ถูกต้องโดยตรงเครื่องมือนี้จะมีประโยชน์
สำหรับนักออกแบบ รวมถึงให้คำแนะนำเกี่ยวกับวิธีลดขนาดแคช CSS และระดับเบราว์เซอร์แคช
4 GistBox Clipper
GistBox เป็นหนึ่งใน Chromeextensions ที่เป็นประโยชน์มากที่สุดสำหรับนักออกแบบเว็บไซต์
GistBox สามารถสร้าง GitHub สรุปสาระสำคัญ จากบล็อคโค้ดใด ๆ บนหน้าเว็บที่คุณกำลังดู
ที่มุมขวาบนของ codeblock ใด ๆ คุณจะเห็นปุ่มเล็ก ๆ ซึ่งเมื่อกดจะทำให้ป๊อปอัพช่วยให้คุณสามารถบันทึกรหัสไปที่ Gist
คุณสามารถ สร้าง Gists ใหม่ด้วย mouseclick ที่ถูกต้องและบันทึกบล็อคของรหัสเพื่อการตรวจสอบและใช้งานในภายหลัง
การรวมเข้ากับ GitHub ช่วยให้นักออกแบบและนักพัฒนาสามารถรวบรวมบล็อกโค้ดและจัดการหรือจัดหมวดหมู่พวกมันสำหรับการใช้งานต่อไป สิ่งนี้ทำให้เป็นเครื่องมือเสริมของ Chrome ที่สะดวกและมีประสิทธิภาพ
5 ColorZilla
ColorZilla เป็นสิ่งที่เหลือเชื่อ Chromeextension ที่มีประโยชน์สำหรับการรวบรวมรหัสฐานสิบหกซึ่งสามารถติดแท็กติดป้ายกำกับและจัดหมวดหมู่สำหรับแต่ละโครงการออกแบบเว็บ
ช่วยให้คุณเลือกเครื่องมือคัดลอกตาที่จะแยกสีจากหน้าเว็บใด ๆ และบันทึกลงใน ColorZillaclipboard .
คุณสามารถพัฒนา colorpalettes เพื่อใช้ในภายหลังได้อย่างรวดเร็วและเพื่อให้มั่นใจว่าคุณใช้ colorconsistently ในการออกแบบและพัฒนาเว็บ
ColorZilla ยังทำหน้าที่เป็นตัววิเคราะห์สีและ CSS เครื่องมือแก้ไขการไล่ระดับสีเพื่อให้คุณสามารถแปลงรูปภาพเป็น CSS
6 WhatFont
ส่วนขยาย ThisChrome นี้เป็น ประหยัดเวลาแบบเรียลไทม์สำหรับผู้ที่ต้องการใช้แบบอักษรที่ชื่นชอบและรวมไว้ในโครงการออกแบบเว็บไซต์ของตัวเอง
ส่วนขยาย WhatFont Chrome ช่วยให้นักพัฒนาสามารถวิเคราะห์และระบุตัวอักษรเกือบทุกตัวได้อย่างรวดเร็วบน
ส่วนขยายได้รับการพัฒนามาอย่างดีและไม่ต้องเปิดเครื่องมือตรวจสอบส่วนขยายนั้นเพียงแค่โบกเมาส์เหนือแบบอักษร
ไม่เพียงเท่านั้น แต่ส่วนขยายจะระบุบริการที่ใช้ในการให้บริการ หน้าเว็บเป็นแบบอักษรและจะสนับสนุน Google Font API และ Typekit
7 LightShot
LightShot เป็นวิธีที่รวดเร็ว เครื่องมือจับภาพหน้าจอที่ช่วยให้คุณสามารถจับภาพทั้งหมดหรือเป็นส่วนหนึ่งของหน้าใดก็ได้และอัปโหลดให้ดาวน์โหลดหรือส่งไปยังปลายทางของบุคคลที่สาม
ภาพหน้าจอที่ถ่ายโดย LightShot สามารถนำมาใช้และแชร์บนสื่อสังคมออนไลน์
คุณสามารถใส่คำอธิบายประกอบและเพิ่มข้อความลูกศรและเลือกส่วนที่ต้องการของหน้าจอ แต่บางทีหนึ่งในคุณสมบัติที่ยอดเยี่ยมที่สุดของเครื่องมือง่ายๆนี้สำหรับนักออกแบบเว็บไซต์คือการเลือกภาพที่คุณสามารถทำการค้นหารูปภาพของ Google แบบออนไลน์สำหรับรูปภาพที่คล้ายคลึงกันได้
LightShot สามารถกำหนดค่าเป็นหลายภาษา
ส่วนขยายนั้นเขียนด้วย JavaScript บริสุทธิ์และสามารถใช้งานได้กับ Windows, Chromebook, Linux และ Mac OS นอกจากนี้ยังสามารถเข้าถึงได้ในฐานะ แอปพลิเคชันเดสก์ทอป ทำให้เป็นตัวเลือกที่ยอดเยี่ยมสำหรับนักออกแบบเว็บไซต์ที่ต้องพึ่งพาอุปกรณ์หลายตัว
8 ภาพหน้าจอที่น่าประทับใจ
เช่นเดียวกับ Lightshot ภาพหน้าจอดีเลิศเป็นส่วนขยายการจับภาพหน้าจอและ
อย่างไรก็ตามมันแตกต่างจาก Lightshot อย่างไรก็ตามในหลายวิธี สามารถกำหนดค่าภาพหน้าจอดีเลิศเพื่อเชื่อมต่อภาพหน้าจอทั้งหมดของคุณกับไดรฟ์ Google ของคุณ
ช่วยให้คุณสามารถจับภาพหน้าจอองค์ประกอบเหล่านั้นซึ่งอยู่นอกเหนือมุมมองของคุณเพื่อจับภาพทั้งหน้า มันมีเครื่องมือแก้ไขและใส่คำอธิบายเพิ่มเติมแบบจุลภาคอนุญาตให้ทำการครอบตัดและอิมเมจทั้งหมดภายในส่วนขยาย .. หรือด้วยการใช้แอปพลิเคชั่น AwesomeSc Screenshot เพิ่มเติม
คุณสามารถขยายฟีเจอร์ของมันได้ด้วยการติดตั้งแอปพลิเคชัน ส่วนขยายนี้ยังอนุญาตให้ใช้การถ่ายวิดีโอและการแชร์เพื่อให้คุณสามารถทำงานร่วมกับนักพัฒนาซอฟต์แวร์คนอื่น ๆ ได้เมื่อทำงานบนไซต์ใด ๆ
คุณสามารถเพิ่มภาพเพิ่มเติมลงในภาพหน้าจอรวมถึงองค์ประกอบสีน้ำเงินหรือลบองค์ประกอบที่คุณไม่ต้องการแสดง ถึงผู้อื่น
9 ล้างแคช
ล้างแคช ส่วนขยายของ Chrome เป็นเครื่องมือที่รวดเร็วและเรียบง่ายที่ช่วยให้คุณสามารถล้างคุกกี้และแคชของหน้าเว็บที่คุณกำลังดูอยู่ มันไม่จำเป็นต้องนำทางไปยังหน้าการตั้งค่าของเบราว์เซอร์ของคุณเพื่อล้างองค์ประกอบของหน้าเว็บที่เรียบง่าย
สำหรับนักออกแบบเว็บไซต์ที่ทำหลายรายการและต้องการดูแบบเรียลไทม์นี่เป็นเครื่องมือที่ยอดเยี่ยม ซึ่งจะลดความยุ่งยากในการดูข้อมูลเก่า
มีบางครั้งที่คุณต้องล้างแคชและคุกกี้ของคุณ แต่การนำทางไปยังการตั้งค่า Chrome นั้นน่าเบื่อ ล้างแคชช่วยให้คุณสามารถเพิ่มแคชของคุณรวมถึงคุกกี้ส่วนกลางหรือคุกกี้ในพื้นที่ได้ด้วยการคลิกปุ่ม
ล้างแคชจะช่วยให้คุณกำหนดค่าองค์ประกอบที่คุณต้องการล้างออกจากหน้า ตัวแปรประกอบด้วยเงินสด, การดาวน์โหลด, ระบบทั้งหมด, แบบฟอร์มข้อมูล, ที่เงินสด, ฐานข้อมูลดัชนี, ข้อมูลปลั๊กอิน, รหัสผ่านและอื่น ๆ
10 นักพัฒนาเว็บ Google ChromeExtension
The นักพัฒนาเว็บ Google Chrome Extension ช่วยให้นักพัฒนาและนักออกแบบสามารถตรวจสอบวิเคราะห์และตรวจสอบหน้าเว็บได้อย่างง่ายดายสำหรับการละเมิดการออกแบบแนวปฏิบัติที่ดีที่สุดการเข้ารหัสการใช้งานและการเพิ่มประสิทธิภาพกลไกค้นหา
เป็นเครื่องมือแบบ all-in-one ที่ยอดเยี่ยม ไม่ได้เรียกดูทรัพยากรของเราอย่างหนัก แต่ให้ข้อมูลที่มีประโยชน์มากมายต่อการออกแบบเว็บและยังรับผิดชอบในการเพิ่มประสิทธิภาพของเครื่องมือค้นหาภายในเว็บไซต์หรือหน้าเว็บ
ส่วนขยายติดตั้งแถบเครื่องมือด้วยเครื่องมือสำหรับนักพัฒนาเว็บหลายแห่ง
เครื่องมือนี้จะให้ข้อมูลบ่งบอกคุณเกี่ยวกับขนาดหน้ากว้างและมิติที่ทำให้เกิดความขัดแย้งกับวิธีปฏิบัติที่ดีที่สุดให้ใช้อุปกรณ์ onmultiple จะช่วยให้คุณตรวจสอบ JavaScript ที่ฝังและดูเว็บไซต์ของคุณผ่านการจำลองของอุปกรณ์ต่าง ๆ
ส่วนขยายนั้นทำงานได้ดีบน Windows, Linux และ Mac OS นอกจากปัญหาการเข้ารหัสและการออกแบบแล้วมันยังให้ข้อมูลเชิงลึกเกี่ยวกับข้อมูลเมตาแท็กส่วนหัวการตอบกลับข้อมูลสีและข้อมูลภาพพื้นหลัง
คุณสามารถตรวจสอบคุณสมบัติหลักของเครื่องมือเช่นเดียวกับความสามารถทั้งหมดของนักพัฒนา เว็บไซต์ของ Chris Pedericks.
ไม่ต้องสงสัยเลยว่ามีส่วนขยาย Chrome คุณภาพสูงและมีประโยชน์อื่น ๆ อีกมากมายที่เป็นประโยชน์สำหรับนักออกแบบเว็บไซต์หรือนักพัฒนาซอฟต์แวร์
รายการนี้แสดงเครื่องมือที่มีประโยชน์และได้รับความนิยมสูงสุดบางส่วน คุณมีคำแนะนำเกี่ยวกับเครื่องมือที่คุณคิดว่าฉันมีประโยชน์หรือดีกว่าในรายการนี้หรือไม่? แจ้งให้เราทราบ