اگر طراح هستید که به ابزارهای مفیدی برای سرعت بخشیدن، همکاری یا ممیزی پروژه های توسعه وب^{(web development)} خود نیاز دارید ، افزونه کروم دارای ابزارهای زیادی است.

این فهرست شامل برخی از محبوب‌ترین – و برخی لازم می‌دانند – ابزارها و افزونه‌های Chrome است که هر کاربری که کار طراحی انجام^{(design work)} می‌دهد باید در کیت کیت^{(kit bag)} خود داشته باشد.

1. DomFlags

DOM Flags یک برنامه افزودنی ساده برای استفاده کروم است^{(Chrome extension)} که راه جدیدی را برای توسعه دهندگان برای کار با ابزارهای مرورگر فراهم می کند. این به توسعه دهندگان اجازه می دهد تا کار عناصر یک ظاهر طراحی شده را سرعت بخشند.

با استفاده از میانبرهای صفحه کلید برای هر عنصر، می توانید پیمایش خود را نشانه گذاری کنید.

همه ما در بازرسی عناصر با جزئیات بسیار مشکل را تجربه کرده‌ایم و گم شدن آن آسان است.

پرچم‌های DOM^{(DOM Flags)} شما را قادر می‌سازد تا عناصر استایل را ردیابی کنید و شامل ویژگی بازرسی خودکار اجزا با دقت است. این به نوبه خود به سرعت بخشیدن به گردش کار و پیاده سازی DevTools^{(DevTools workflow and implementation)} کمک می کند .

پرچم های DOM^{(DOM Flags)} به شما امکان می دهد تغییرات را ردیابی کنید. و تمرکز خود را روی عناصری که با آنها کار می کنید حفظ کنید.

2. گیج کننده

Sizzy به طراحان و توسعه‌دهندگان راه ساده‌ای برای آزمایش سایت‌های خود در چند نما می‌دهد.

Sizzy یک راه ساده برای بررسی طرح شما در زمان واقعی ارائه می دهد. این یک نمای تعاملی از هر تعداد دستگاه و اندازه صفحه نمایش را ارائه می دهد. حتی می توانید یک صفحه کلید دستگاه را^{(device keyboard)} شبیه سازی کنید و سپس بین حالت افقی و عمودی جابجا شوید^{(landscape and portrait modes)} .

با نصب یک افزونه کروم^{(Chrome extension)} ، دکمه‌ای به نوار ابزار شما اضافه می‌شود که با کلیک روی آن، URL فعلی در پلتفرم Sizzy باز می‌شود^{(Sizzy platform)} . برنامه افزودنی تمام هدرهای « x-frame-options » را مسدود می‌کند، بنابراین می‌توانید به هر وب‌سایتی به صورت آنلاین نگاهی بیندازید.

Sizzy یک پروژه متن^{(source project)} باز است و می توانید کل کد را در اینجا ببینید^(here) .

3. Checkbot

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 خود و استفاده از حافظه پنهان مرورگر ارائه می دهد.

4. GistBox Clipper

GistBox یکی از مفیدترین افزونه های کروم^(Chrome) برای طراحان وب است.

GistBox می تواند یک GitHub Gist را از هر بلوک کدی^{(code block)} در صفحه وب که مشاهده می کنید ایجاد کند.

در گوشه سمت راست^{(right-hand corner)} بالای هر بلوک کد، یک دکمه کوچک را مشاهده خواهید کرد که با فشار دادن آن، یک پاپ آپ به شما امکان می دهد تا کد را در Gist ذخیره کنید .

می توانید Gists جدید با کلیک راست ماوس ایجاد کنید و بلوک های کد را برای بازرسی و استفاده^{(inspection and use)} بعدی ذخیره کنید .

ادغام با GitHub به طراحان و توسعه دهندگان این امکان را می دهد تا بلوک های کد را جمع آوری کرده و آنها را دستکاری کنند یا آنها را برای استفاده بعدی دسته بندی کنند. این باعث می‌شود که ابزار افزونه کروم ^{(Chrome extension)}مناسب و کارآمد باشد.^{(convenient and efficient)}

5. ColorZilla

ColorZilla یک افزونه فوق‌العاده مفید برای کروم برای جمع‌آوری کدهای هگزا است که می‌تواند برای پروژه‌های طراحی وب فردی برچسب‌گذاری، برچسب‌گذاری و دسته‌بندی شود.^{(web design)}

به شما امکان می‌دهد یک ابزار قطره چکان را انتخاب کنید که رنگ را از هر صفحه وب استخراج کرده و در کلیپ‌بورد ColorZilla ذخیره کند.

با استفاده از آن، می توانید به سرعت پالت های رنگی را برای استفاده بعدی توسعه دهید و به عنوان راهی برای اطمینان از استفاده مداوم از رنگ در طراحی و توسعه^{(design and development)} وب .

ColorZilla همچنین به عنوان یک تحلیلگر رنگ و ویرایشگر گرادیان ^{(gradient editor)}CSS عمل می کند تا بتوانید یک تصویر را به CSS تبدیل کنید .

6. WhatFont

این برنامه افزودنی کروم^{(Chrome Extension)} برای کسانی که می خواهند از فونت های مورد علاقه خود استفاده کنند و آنها را در پروژه طراحی وب^{(web design project)} خود بگنجانند، در زمان واقعی صرفه جویی می کند .

افزونه WhatFont Chrome^{(WhatFont Chrome extension)} به توسعه دهندگان این امکان را می دهد که تقریباً هر فونت را در هر صفحه وب به سرعت تجزیه و تحلیل و شناسایی کنند.

برنامه افزودنی به خوبی توسعه یافته است و به جای نیاز به باز کردن ابزارهای بازرسی، برنامه افزودنی فقط با تکان دادن ماوس روی فونت کار می کند.

نه تنها این، بلکه افزونه سرویسی را که برای ارائه فونت Pages go استفاده می‌شود شناسایی می‌کند و از ^(Pages)Google Font API و Typekit پشتیبانی می‌کند.^{(Google Font API and Typekit.)}

7. LightShot

LightShot یک ابزار اسکرین شات^{(screenshot tool)} سریع است که به شما امکان می دهد کل یا بخشی از هر صفحه را بگیرید و یا آن را آپلود کنید یا دانلود کنید یا به مقصد شخص ثالث^{(party destination)} ارسال کنید .

از اسکرین شات های گرفته شده توسط LightShot می توان استفاده کرد و در رسانه های اجتماعی به اشتراک گذاشت یا چاپ کرد.

می توانید متن، فلش و موارد دیگر را به قسمت انتخاب شده از صفحه حاشیه نویسی و اضافه کنید. اما شاید یکی از درخشان‌ترین ویژگی‌های این ابزار ساده برای طراحان وب این باشد که با انتخاب یک تصویر می‌توانید به جستجوی کامل تصاویر در گوگل^{(Google image)} برای تصاویر مشابه آنلاین بپردازید.

LightShot را می توان به چندین زبان پیکربندی کرد.

برنامه افزودنی با جاوا اسکریپت^(JavaScript) خالص نوشته شده است و برای ویندوز^(Windows) ، کروم^(Chromebook) بوک ، لینوکس و سیستم عامل مک^{(Linux and Mac OS)} نیز کار خواهد کرد . همچنین می توان به عنوان یک برنامه دسکتاپ^{(desktop application)} به آن دسترسی داشت و آن را برای طراحان وب که به چندین دستگاه وابسته هستند، انتخابی عالی می کند.

8. اسکرین شات عالی

مانند Lightshot ، Awesome Screenshot یک افزونه برای گرفتن صفحه و تصویر است.

با این حال، از جهات مختلفی با Lightshot متفاوت است . Awesome Screenshot را می توان برای اتصال همه اسکرین شات ها به درایو Google^{(Google drive)} خود پیکربندی کرد .

این به شما امکان می دهد از عناصری که خارج از دید شما هستند عکس بگیرید تا کل صفحه را بگیرید. دارای ابزارهای ویرایش و حاشیه نویسی^{(editing and annotation tools)} اضافی است.

با نصب اپلیکیشن کروم^{(Chrome application)} برای دسکتاپ نیز می توانید ویژگی های آن را گسترش دهید. افزونه همچنین امکان ضبط و اشتراک گذاری ویدیو را فراهم می کند تا بتوانید هنگام کار بر روی هر سایتی با سایر توسعه دهندگان یا طراحان همکاری کنید.

می توانید تصاویر اضافی را به یک اسکرین شات اضافه کنید و همچنین عناصر آبی یا پاک^{(blue or erase elements)} کنید که ترجیح می دهید به دیگران نشان ندهید.

9. کش را پاک کنید

Clear Cache Chrome Extension ابزاری سریع و ساده است که به شما امکان می‌دهد کوکی‌ها و حافظه پنهان صفحه‌ای را که در آن مشاهده می‌کنید پاک کنید. این نیاز به پیمایش به صفحه تنظیمات مرورگر شما برای پاک کردن چند عنصر ساده صفحه را از بین می برد.

برای طراحان وب که چندین ویرایش را انجام می دهند و می خواهند آنها را در زمان واقعی مشاهده کنند، این یک ابزار عالی است که بسیاری از ناامیدی ناشی از نگاه کردن به داده های قدیمی را از بین می برد.

مواقعی وجود دارد که باید کش و کوکی های خود را پاک کنید، اما پیمایش به تنظیمات Chrome خسته کننده است. Clear Cache به شما امکان می دهد حافظه پنهان خود و همچنین کوکی های جهانی یا محلی را با کلیک یک دکمه پاک کنید.

پاک کردن کش^(Cache) به شما امکان می دهد عناصری را که می خواهید از صفحه پاک کنید، پیکربندی کنید. متغیرها^(Variables) شامل پول نقد^(Cash) ، دانلودها، همه سیستم‌ها، داده‌های فرم، پول نقد^(Cash) ، پایگاه داده فهرست^{(index database)} ، داده‌های افزونه، گذرواژه‌ها و موارد دیگر است.

10. برنامه نویس وب برنامه افزودنی گوگل کروم

برنامه افزودنی Google Chrome Developer Web^{(Web Developer Google Chrome Extension)} به توسعه دهندگان و طراحان این امکان را می دهد که به راحتی صفحات وب خود را برای هر گونه نقض بهترین روش طراحی^{(practice design)} ، کدگذاری، قابلیت استفاده و بهینه سازی موتور جستجو بررسی، تجزیه و تحلیل و بررسی کنند.

این یک ابزار همه کاره عالی است که برای مرور منابع ما سنگین نیست، اما حجم زیادی از اطلاعات مفید برای طراحی وب را فراهم می کند و همچنین مسئول عناصر بهینه سازی موتور جستجو در یک وب سایت یا صفحه است.^{(search engine optimization)}

برنامه افزودنی نوار ابزار را با چندین ابزار توسعه دهنده وب نصب می کند.

این ابزار نشانه هایی در مورد اندازه، عرض و ابعاد صفحه به شما می دهد که با بهترین روش استفاده^{(practice use)} در چندین دستگاه مغایرت دارد. این به شما امکان می دهد جاوا اسکریپت^(JavaScript) جاسازی شده را بررسی کنید و وب سایت خود را از طریق شبیه سازی دستگاه های مختلف مشاهده کنید.

برنامه افزودنی در ویندوز^(Windows) ، لینوکس و سیستم عامل مک به خوبی عمل می کند. علاوه بر مسائل مربوط به کدنویسی و طراحی^{(coding and design issues)} ، بینش هایی در مورد اطلاعات متا تگ^{(tag information)} ، سرصفحه های پاسخ، اطلاعات رنگ^{(color information)} و اطلاعات توپوگرافی نیز ارائه می دهد.

می‌توانید ویژگی‌های اصلی ابزار و همچنین قابلیت‌های کامل آن را در وب‌سایت توسعه‌دهنده کریس پدریکس بررسی کنید^{(Chris Pedericks’ website)} .

بدون شک تعداد زیادی افزونه کروم^(Chrome) با کیفیت بالا و مفید وجود دارد که طراحان وب یا توسعه دهندگان^{(designer or developer)} می توانند از آنها استفاده کنند.

این فهرست تعدادی از محبوب ترین و مفیدترین ابزارها را به نمایش می گذارد. آیا توصیه ای برای ابزارهایی دارید که فکر می کنید من مفیدتر یا برتر از ابزارهای موجود در این لیست هستم؟ به ما خبر دهید.

Top 10 Chrome Extensions and Tools for Web Designers

If you are designer in need of some useful tоols to ѕpeed uр, collaborate or audit your web develоpment prоjects, Chromе extension has a multitude of tools.

This list comprises some of the most popular – and some would argue necessary – tools and Chrome extensions that every user doing design work should have in their kit bag.

1. DomFlags

DOM Flags is a simple to use Chrome extension that provides a new way for developers to work with browser tools. It allows developers to speed up the task of styling elements.

Using keyboard shortcuts for each element you can bookmark your navigation.

We’ve all experienced the difficulty in inspecting highly detailed elements, and it’s easy to get lost.

DOM Flags enable you to track styling elements includes a feature to inspect components with accuracy automatically. This, in turn, will help speed up DevTools workflow and implementation.

DOM Flags enables you to track changes. And maintain your focus on the elements you’re working with.

2. Sizzy

Sizzy gives designers and developers a simple way to test their sites in multiple viewports.

Sizzy provides a simple way to check your design in real-time. It offers an interactive view of any number of devices and screen sizes. You can even simulate a device keyboard and then switch between landscape and portrait modes.

Installing a Chrome extension will add a button to your toolbar, which, when clicked is going to open the current URL in the Sizzy platform. The extension will block all “x-frame-options” headers so you will be able to take a look at any website online.

Sizzy is an open source project, and you can see the entire code here.

3. Checkbot

Checkbot can test your site for security issues and also audit your website page loading speed. It will provide designers with a means of identifying typical errors and recommend improvements in site security, search engine, and site speed.

Using more than 50 best practice metrics, it will audit a website for best practice SEO, broken links, duplicate content and more. The tool will also validate CSS, JS, and HTML.

Checkbot picks up on designer and coder errors in real time saving you the trouble of having to go back and recheck your work repeatedly.

If you’re looking for a good quality tool that will fix broken page links, ensure unique content and page titles and eliminate redirect chains this tool would be useful.

For designers, it can help you minimize your CSS and JS as well as provide recommendations on how to minify your CSS and leverage browser caching.

4. GistBox Clipper

GistBox is one of the most helpful Chrome extensions for web designers.

GistBox can create a GitHub Gist from any code block on the webpage you are viewing.

At the top right-hand corner of any code block, you’ll see a small button, which when pressed, will allow a pop-up that enables you to save the code to the Gist.

You can create new Gists with a right mouse click and save blocks of code for later inspection and use.

Integrating with GitHub enables designers and developers to collect code blocks and manipulate them or categorize them for later use. This makes it a convenient and efficient Chrome extension tool.

5. ColorZilla

ColorZilla Is an incredibly useful Chrome extension for gathering hex codes which can be tagged, labeled and categorized for individual web design projects.

It enables you to select an eye-dropper tool that will extract the color from any web page and save it to the ColorZilla clipboard.

With it, you can quickly develop color palettes for later use and as a way of ensuring you are using color consistently in web design and development.

ColorZilla also acts as a color analyzer and CSS gradient editor so that you can convert an image to CSS.

6. WhatFont

This Chrome Extension is a real time-saver for those wanting to utilize their favorite fonts And incorporate them into their own web design project.

WhatFont Chrome extension allows developers to quickly analyze and identify almost any font on any web page.

The extension is well developed and rather than having to open up inspection tools the extension works by merely waving the mouse over the font.

Not only that but the extension will also identify the service that’s being used to serve up a Pages went font and will support Google Font API and Typekit.

7. LightShot

LightShot is a quick screenshot tool that enables you to capture the entire, or part of any page and either upload it or download it or send it to a third party destination.

Screenshots taken by LightShot can be used and shared on social media or printed.

You can annotate and add text, arrows and more to the selected portion of the screen. But perhaps one of the most brilliant features of this simple tool for web designers is that by selecting an image you can then proceed to do a full Google image search for similar images online.

LightShot can be configured in multiple languages.

The extension is written in pure JavaScript and will also work for Windows, Chromebook, Linux and Mac OS. It can also be accessed as a desktop application making it an excellent choice for web designers who are dependent on multiple devices.

8. Awesome Screenshot

Like Lightshot, Awesome Screenshot is a screen and image capturing extension.

It does differ from Lightshot, however, in a number of ways. Awesome Screenshot can be configured to connect all your screenshots with your Google drive.

It allows you to screenshot those elements which are beyond your view in order to capture the entire page. It has additional editing and annotation tools comma allows for cropping and image editing all within the extension.. or with the use of additional Awesome Screenshot applications

You can extend its features by installing the Chrome application for desktop as well. The extension also allows for video capturing and sharing so that you can collaborate with other developers or designers when working on any site.

You can add additional images to a screenshot as well as blue or erase elements that you would rather not show to others.

9. Clear Cache

The Clear Cache Chrome Extension Is a fast and simple tool that enables you to clear cookies and cache of the page you’re looking at. It removes the need to navigate to the settings page of your browser in order to clear a few simple page elements.

For web designers who are making multiple edits and want to view them in real time, this is an excellent tool that will eliminate much of the frustration of looking at old data.

There are times you need to clear your cache and cookies, but navigating to Chrome settings is tedious. Clear Cache lets you erase your cache as well as global or local cookies at the click of a button.

Clear Cache will allow you to configure which elements you want to clear from the page. Variables include Cash, downloads, all systems, form-data, at Cash, index database, plugin data, passwords and more.

10. Web Developer Google Chrome Extension

The Web Developer Google Chrome Extension allows developers and designers to easily audit, analyze and check their web pages for any violations of best practice design, coding, usability, and search engine optimization.

It’s a great all-in-one tool that is not heavy on browse our resources yet provides a ton of information useful to web design is also responsible for search engine optimization elements within a website or page.

The extension installs the toolbar with multiple web developer tools.

The tool will give you indications on page size, width, and dimensions which make conflict with best practice use on multiple devices. It allows you to check embedded JavaScript and view your website through a simulation of various devices.

The extension functions well on Windows, Linux and Mac OS. In addition to coding and design issues, it will also provide insights into meta tag information, response headers, color information, and topographic information.

You can review the main features of the tool as well as it’s full capabilities on developer Chris Pedericks’ website.

No doubt there are a plethora of other high quality and useful Chrome extensions that are web designer or developer could use.

This list showcases a few of the most popular and useful tools. Do you have any recommendations for tools which you think I’m more useful or superior to the ones in this list? Let us know.

آتشبند بدخشانی

About the author

من یک متخصص کامپیوتر هستم که تجربه کار با نرم افزارهای Microsoft Office از جمله Excel و PowerPoint را دارم. من همچنین با کروم که یک مرورگر متعلق به گوگل است، تجربه دارم. مهارت های من شامل ارتباط نوشتاری و کلامی عالی، حل مسئله و تفکر انتقادی است.

10 افزونه و ابزار برتر کروم برای طراحان وب

1. DomFlags

2. گیج کننده

3. Checkbot

4. GistBox Clipper

5. ColorZilla

6. WhatFont

7. LightShot

8. اسکرین شات عالی

9. کش را پاک کنید

10. برنامه نویس وب برنامه افزودنی گوگل کروم

Top 10 Chrome Extensions and Tools for Web Designers

1. DomFlags

2. Sizzy

3. Checkbot

4. GistBox Clipper

5. ColorZilla

6. WhatFont

7. LightShot

8. Awesome Screenshot

9. Clear Cache

10. Web Developer Google Chrome Extension

آتشبند بدخشانی

About the author

Related posts

8 Best Social Networking Sites برای Graphic Designers برای نمایش اوراق بهادار خود را

Spotify Web Player: چگونه Access and Use IT

7 Best Tools and Apps برای ایجاد Meme خودتان برای Free

چرا هنوز هم ارزش دارد که از Bing برای جستجوهای وب خود استفاده کنید

8 ابزار برای ایجاد تصاویر با اندازه عالی برای سایت های رسانه های اجتماعی

5 Best Sites برای پیدا کردن Online Tutor برای Adults and Kids

5 Best Sites و Apps به یادگیری Guitar

بهترین ابزار برای آموزش زبان به خودتان

10 Best Sites به تماشای Cartoons Online برای Free

5 Best Remote Computer Repair سایت به مطلع Help حالا

8 بهترین سایت برای خواندن Manga Online برای Free

6 سایت برای بازی Retro Games Online برای Free

Amazon Prime Worth Cost است؟

بهترین وب سایت های دوستیابی و Apps برای Everyone در سال 2021

چگونه برای جلوگیری از Political پست در فیس بوک

10 Best Sites برای تست سرعت تایپ کردن شما

چگونه به Screen Record در Chromebook

Start Online Journal با این 6 Best Websites و Apps

5 بهترین سایت برای تست Monitor Refresh Rate شما

Vegan Food در نزدیکی من کجاست؟ 6 بهترین سایت برای جستجو Your Area