إذا كنت مصممًا في حاجة إلى بعض الأدوات المفيدة لتسريع مشاريع تطوير الويب^{(web development)} أو التعاون أو تدقيقها ، فإن ملحق Chrome يحتوي على العديد من الأدوات.

تضم هذه القائمة بعضًا من الأدوات الأكثر شيوعًا - وقد يجادل البعض بأنها ضرورية - والأدوات وإضافات Chrome التي يجب أن يكون لدى كل مستخدم يقوم بأعمال التصميم في ^{(design work)}حقيبة^{(kit bag)} أدواته .

1. دومفلاغز

يعد DOM Flags^{(DOM Flags)} وسيلة سهلة لاستخدام ملحق Chrome^{(Chrome extension)} الذي يوفر طريقة جديدة للمطورين للعمل مع أدوات المتصفح. يسمح للمطورين بتسريع مهمة عناصر التصميم.

باستخدام اختصارات لوحة المفاتيح لكل عنصر ، يمكنك وضع إشارة مرجعية على التنقل الخاص بك.

لقد واجهنا جميعًا صعوبة في فحص العناصر شديدة التفصيل ، ومن السهل أن تضيع.

^{(DOM Flags)}تمكنك DOM Flags من تتبع عناصر التصميم التي تتضمن ميزة لفحص المكونات بدقة تلقائيًا. وهذا بدوره سيساعد في تسريع سير العمل والتنفيذ في DevTools^{(DevTools workflow and implementation)} .

^{(DOM Flags)}تتيح لك علامات DOM تتبع التغييرات. وحافظ على تركيزك على العناصر التي تعمل بها.

2. بحجم

يمنح Sizzy^(Sizzy) المصممين والمطورين طريقة بسيطة لاختبار مواقعهم في إطارات عرض متعددة.

يوفر Sizzy^(Sizzy) طريقة بسيطة للتحقق من تصميمك في الوقت الفعلي. يوفر عرضًا تفاعليًا لأي عدد من الأجهزة وأحجام الشاشات. يمكنك حتى محاكاة لوحة مفاتيح الجهاز^{(device keyboard)} ثم التبديل بين الوضعين الأفقي والعمودي^{(landscape and portrait modes)} .

سيؤدي تثبيت امتداد Chrome^{(Chrome extension)} إلى إضافة زر إلى شريط الأدوات الخاص بك ، والذي عند النقر عليه سيفتح عنوان URL^(URL) الحالي في نظام Sizzy الأساسي^{(Sizzy platform)} . سيحظر الامتداد جميع رؤوس خيارات " x-frame-options " حتى تتمكن من إلقاء نظرة على أي موقع ويب عبر الإنترنت.

Sizzy هو مشروع مفتوح المصدر^{(source project)} ، ويمكنك رؤية الكود بالكامل هنا^(here) .

3. Checkbot

يمكن لـ 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 المقص

GistBox هو أحد أكثر ملحقات Chrome فائدة لمصممي الويب.

يمكن لـ GistBox إنشاء GitHub^{(GitHub Gist)} Gist من أي كتلة تعليمات برمجية^{(code block)} على صفحة الويب التي تشاهدها.

في الركن الأيمن العلوي^{(right-hand corner)} من أي كتلة رمز ، سترى زرًا صغيرًا ، والذي عند الضغط عليه ، سيسمح لك بانبثاق يتيح لك حفظ الكود في Gist .

يمكنك إنشاء Gists جديدة بالنقر بزر الماوس الأيمن وحفظ كتل من التعليمات البرمجية لفحصها واستخدامها^{(inspection and use)} لاحقًا .

يتيح التكامل مع GitHub للمصممين والمطورين تجميع كتل التعليمات البرمجية ومعالجتها أو تصنيفها لاستخدامها لاحقًا. هذا يجعلها أداة تمديد Chrome ^{(Chrome extension)}مريحة وفعالة^{(convenient and efficient)} .

5. ColorZilla

ColorZilla هو امتداد Chrome مفيد بشكل لا يصدق لتجميع الرموز السداسية التي يمكن تمييزها وتصنيفها وتصنيفها لمشاريع تصميم الويب^{(web design)} الفردية .

يمكّنك من تحديد أداة قطارة العين التي ستقوم باستخراج اللون من أي صفحة ويب وحفظه في حافظة ColorZilla.

باستخدامه ، يمكنك تطوير لوحات الألوان بسرعة لاستخدامها لاحقًا وكطريقة للتأكد من أنك تستخدم الألوان باستمرار في تصميم الويب وتطويره^{(design and development)} .

تعمل ColorZilla^(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

LightShot هي ^(LightShot)أداة لقطة شاشة^{(screenshot tool)} سريعة تمكنك من التقاط كامل أو جزء من أي صفحة وتحميلها أو تنزيلها أو إرسالها إلى جهة خارجية^{(party destination)} .

يمكن استخدام لقطات الشاشة التي التقطتها LightShot ومشاركتها على وسائل التواصل الاجتماعي أو طباعتها.

يمكنك إضافة تعليق توضيحي وإضافة نص وأسهم والمزيد إلى الجزء المحدد من الشاشة. ولكن ربما تكون إحدى أكثر الميزات الرائعة لهذه الأداة البسيطة لمصممي الويب هي أنه من خلال تحديد صورة ، يمكنك بعد ذلك المتابعة لإجراء بحث كامل عن صور Google للصور^{(Google image)} المماثلة عبر الإنترنت.

يمكن تكوين LightShot^(LightShot) بلغات متعددة.

الامتداد مكتوب بلغة JavaScript خالصة وسيعمل أيضًا مع أنظمة التشغيل Windows^(Windows) و Chromebook و Linux و Mac OS^{(Linux and Mac OS)} . يمكن أيضًا الوصول إليه كتطبيق سطح مكتب^{(desktop application)} مما يجعله اختيارًا ممتازًا لمصممي الويب الذين يعتمدون على أجهزة متعددة.

8. لقطة شاشة رائعة

مثل Lightshot ، Awesome Screenshot هو امتداد لالتقاط الشاشة والصورة.

إنه يختلف عن Lightshot ، مع ذلك ، في عدد من النواحي. يمكن تكوين لقطة شاشة رائعة لربط جميع لقطات الشاشة الخاصة بك بمحرك ^{(Awesome Screenshot)}Google^{(Google drive)} .

يتيح لك التقاط لقطة شاشة لتلك العناصر التي تتجاوز رؤيتك من أجل التقاط الصفحة بأكملها. يحتوي على أدوات تحرير وتعليقات توضيحية^{(editing and annotation tools)} إضافية تسمح الفاصلة بالاقتصاص وتحرير الصور داخل الامتداد .. أو باستخدام تطبيقات لقطة شاشة رائعة إضافية

يمكنك توسيع ميزاته عن طريق تثبيت تطبيق Chrome^{(Chrome application)} لسطح المكتب أيضًا. يسمح الامتداد أيضًا بالتقاط الفيديو ومشاركته بحيث يمكنك التعاون مع مطورين أو مصممين آخرين عند العمل على أي موقع.

يمكنك إضافة صور إضافية إلى لقطة شاشة بالإضافة إلى العناصر الزرقاء أو محو العناصر^{(blue or erase elements)} التي تفضل عدم عرضها للآخرين.

9. مسح ذاكرة التخزين المؤقت

يعد Clear Cache Chrome Extension أداة سريعة وبسيطة تمكنك من مسح ملفات تعريف الارتباط وذاكرة التخزين المؤقت للصفحة التي تشاهدها. إنه يزيل الحاجة إلى الانتقال إلى صفحة الإعدادات في متصفحك من أجل مسح بعض عناصر الصفحة البسيطة.

بالنسبة لمصممي الويب الذين يقومون بإجراء تعديلات متعددة ويريدون عرضها في الوقت الفعلي ، فهذه أداة ممتازة ستزيل الكثير من الإحباط الناتج عن النظر إلى البيانات القديمة.

هناك أوقات تحتاج فيها إلى مسح ذاكرة التخزين المؤقت وملفات تعريف الارتباط ، ولكن التنقل إلى إعدادات Chrome أمر ممل. يتيح لك مسح ذاكرة التخزين المؤقت^(Cache) مسح ذاكرة التخزين المؤقت وكذلك ملفات تعريف الارتباط العامة أو المحلية بنقرة زر واحدة.

سيسمح لك مسح ذاكرة التخزين المؤقت بتهيئة العناصر التي تريد مسحها من الصفحة. ^(Cache)تشمل المتغيرات ^(Variables)النقدية^(Cash) والتنزيلات وجميع الأنظمة وبيانات النموذج وفي Cash وقاعدة بيانات الفهرس^{(index database)} وبيانات البرنامج المساعد وكلمات المرور والمزيد.

10. مطور الويب Google Chrome Extension

يسمح ملحق Google Chrome لمطور الويب للمطورين^{(Web Developer Google Chrome Extension)} والمصممين بتدقيق صفحات الويب الخاصة بهم وتحليلها والتحقق منها بسهولة بحثًا عن أي انتهاكات لأفضل ممارسات التصميم^{(practice design)} والتشفير وسهولة الاستخدام وتحسين محرك البحث.

إنها أداة رائعة الكل في واحد ليست ثقيلة على تصفح مواردنا ولكنها توفر الكثير من المعلومات المفيدة لتصميم الويب وهي أيضًا مسؤولة عن عناصر تحسين محرك البحث^{(search engine optimization)} داخل موقع ويب أو صفحة.

 يقوم الامتداد بتثبيت شريط الأدوات باستخدام أدوات مطور ويب متعددة.

ستمنحك الأداة مؤشرات حول حجم الصفحة وعرضها وأبعادها والتي تتعارض مع أفضل الممارسات في الاستخدام^{(practice use)} على أجهزة متعددة. يسمح لك بالتحقق من JavaScript المضمّن وعرض موقع الويب الخاص بك من خلال محاكاة الأجهزة المختلفة.

يعمل الامتداد جيدًا على أنظمة التشغيل Windows و Linux و Mac OS. بالإضافة إلى مشكلات الترميز والتصميم^{(coding and design issues)} ، فإنه سيوفر أيضًا رؤى حول معلومات العلامة^{(tag information)} الوصفية ، ورؤوس الاستجابة ، ومعلومات الألوان^{(color information)} ، والمعلومات الطبوغرافية.

يمكنك مراجعة الميزات الرئيسية للأداة بالإضافة إلى إمكانياتها الكاملة على موقع المطور كريس بيدريكس^{(Chris Pedericks’ website)} .

لا شك أن هناك عددًا كبيرًا من ملحقات Chrome الأخرى عالية الجودة والمفيدة التي يمكن ^(Chrome)لمصمم^{(designer or developer)} الويب أو المطور استخدامها.

تعرض هذه القائمة بعضًا من أكثر الأدوات شيوعًا وإفادة. هل لديك أي توصيات للأدوات التي تعتقد أنني أكثر فائدة أو أفضل من تلك الموجودة في هذه القائمة؟ دعنا نعرف.

Top 10 Chrome Extensions and Tools for Web Designers

If you are designer in need of some useful tools to speed up, collaborate or audit your web development projects, 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.

Related posts

• 8 Best Social Networking Sites ل Graphic Designers لعرض محافظهم

• Spotify Web Player: كيفية Access and Use

• 7 Best Tools and Apps إنشاء Meme بنفسك لFree

• لماذا لا يزال من المفيد استخدام Bing في عمليات البحث على الويب

• 8 أدوات لإنشاء صور بحجم مثالي لمواقع التواصل الاجتماعي

• أفضل 10 مواقع لإنشاء Sankey Chart

• 10 أفضل مواقع التحقق من الحقائق إلى Fight Misinformation

• 6 مواقع للعب Retro Games Online ل Free

• 10 أدوات أساسية لـ Digital Nomad

• 5 Best Sites و Apps لتعلم Guitar

• أفضل 8 مواقع لقراءة Manga Online ل Free

• 6 Best Websites إلى السحب New Movie Releases

• ال 16 Best Sites إلى Find Free Audiobooks Online

• 6 Best StumbleUpon Alternatives

• أفضل 30 مجموعة من التحسين الذاتي على Reddit

• كيفية حظر Political المشاركات على Facebook

• 5 Best Remote Computer Repair مواقع الويب للحصول على Help الآن

• أفضل 5 أدوات مجانية لإنشاء مخططات انسيابية على الإنترنت

• 10 الموارد التعليمية لFree PDF Teaching Materials and Aids

• أفضل 5 مواقع لاختبار Monitor Refresh Rate