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


หากคุณเป็นผู้ออกแบบที่ต้องการเครื่องมือที่มีประโยชน์เพื่อเร่งความเร็วทำงานร่วมกันหรือตรวจสอบโครงการพัฒนาเว็บของคุณ Chromeextension มีเครื่องมือมากมาย

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

1 DomFlags

<รูป class = "lazy aligncenter">

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

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

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

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

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

2 Sizzy

<รูป class = "lazy aligncenter">

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

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

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

Sizzy เป็นโครงการโอเพ่นซอร์สและคุณสามารถเห็นทั้งหมด รหัส ที่นี่.

3 Checkbot

<รูป class = "lazy aligncenter">

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

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

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

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

สำหรับนักออกแบบ รวมถึงให้คำแนะนำเกี่ยวกับวิธีลดขนาดแคช CSS และระดับเบราว์เซอร์แคช

4 GistBox Clipper

<รูป class = "lazy aligncenter">

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

GistBox สามารถสร้าง GitHub สรุปสาระสำคัญ จากบล็อคโค้ดใด ๆ บนหน้าเว็บที่คุณกำลังดู

ที่มุมขวาบนของ codeblock ใด ๆ คุณจะเห็นปุ่มเล็ก ๆ ซึ่งเมื่อกดจะทำให้ป๊อปอัพช่วยให้คุณสามารถบันทึกรหัสไปที่ Gist

คุณสามารถ สร้าง Gists ใหม่ด้วย mouseclick ที่ถูกต้องและบันทึกบล็อคของรหัสเพื่อการตรวจสอบและใช้งานในภายหลัง

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

5 ColorZilla

<รูป class = "lazy aligncenter">

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

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

คุณสามารถพัฒนา colorpalettes เพื่อใช้ในภายหลังได้อย่างรวดเร็วและเพื่อให้มั่นใจว่าคุณใช้ colorconsistently ในการออกแบบและพัฒนาเว็บ

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

6 WhatFont

<รูป class = "lazy aligncenter">

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

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

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

ไม่เพียงเท่านั้น แต่ส่วนขยายจะระบุบริการที่ใช้ในการให้บริการ หน้าเว็บเป็นแบบอักษรและจะสนับสนุน Google Font API และ Typekit

7 LightShot

<รูป class = "lazy aligncenter">

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

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

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

LightShot สามารถกำหนดค่าเป็นหลายภาษา

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

8 ภาพหน้าจอที่น่าประทับใจ

<รูป class = "lazy aligncenter">

เช่นเดียวกับ Lightshot ภาพหน้าจอดีเลิศเป็นส่วนขยายการจับภาพหน้าจอและ

อย่างไรก็ตามมันแตกต่างจาก Lightshot อย่างไรก็ตามในหลายวิธี สามารถกำหนดค่าภาพหน้าจอดีเลิศเพื่อเชื่อมต่อภาพหน้าจอทั้งหมดของคุณกับไดรฟ์ Google ของคุณ

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

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

คุณสามารถเพิ่มภาพเพิ่มเติมลงในภาพหน้าจอรวมถึงองค์ประกอบสีน้ำเงินหรือลบองค์ประกอบที่คุณไม่ต้องการแสดง ถึงผู้อื่น

9 ล้างแคช

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

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

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

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

10 นักพัฒนาเว็บ Google ChromeExtension

<รูป class = "lazy aligncenter">

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

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

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

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

ส่วนขยายนั้นทำงานได้ดีบน Windows, Linux และ Mac OS นอกจากปัญหาการเข้ารหัสและการออกแบบแล้วมันยังให้ข้อมูลเชิงลึกเกี่ยวกับข้อมูลเมตาแท็กส่วนหัวการตอบกลับข้อมูลสีและข้อมูลภาพพื้นหลัง

คุณสามารถตรวจสอบคุณสมบัติหลักของเครื่องมือเช่นเดียวกับความสามารถทั้งหมดของนักพัฒนา เว็บไซต์ของ Chris Pedericks.

ไม่ต้องสงสัยเลยว่ามีส่วนขยาย Chrome คุณภาพสูงและมีประโยชน์อื่น ๆ อีกมากมายที่เป็นประโยชน์สำหรับนักออกแบบเว็บไซต์หรือนักพัฒนาซอฟต์แวร์

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

แนะนำการใช้งานโปรแกรม Gliffy Diagram ผ่าน google chrome

กระทู้ที่เกี่ยวข้อง:


27.03.2019