Web geliştirme^{(web development)} projelerinizi hızlandırmak, işbirliği yapmak veya denetlemek için bazı yararlı araçlara ihtiyaç duyan bir tasarımcıysanız , Chrome uzantısında çok sayıda araç vardır.

Bu liste, tasarım çalışması^{(design work)} yapan her kullanıcının kit çantasında^{(kit bag)} olması gereken en popüler ve bazılarının gerekli olduğunu iddia ettiği araçlardan ve Chrome uzantılarından bazılarını içerir .

1. Dom Bayrakları

DOM Flags , geliştiricilerin tarayıcı araçlarıyla çalışması için yeni bir yol sağlayan, kullanımı kolay bir Chrome uzantısıdır . ^{(Chrome extension)}Geliştiricilerin stil öğelerinin görevini hızlandırmasına olanak tanır.

Her öğe için klavye kısayollarını kullanarak navigasyonunuza yer işareti koyabilirsiniz.

Son derece ayrıntılı öğeleri incelemenin zorluğunu hepimiz yaşadık ve kaybolmak çok kolay.

DOM Bayrakları^{(DOM Flags)} , stil öğelerini izlemenizi sağlar, bileşenleri otomatik olarak doğrulukla denetleme özelliği içerir. Bu da DevTools iş akışını ve uygulamasını^{(DevTools workflow and implementation)} hızlandırmaya yardımcı olacaktır .

DOM Bayrakları^{(DOM Flags)} , değişiklikleri izlemenizi sağlar. Ve üzerinde çalıştığınız öğelere odaklanmaya devam edin.

2. Cızırtılı

Sizzy , tasarımcılara ve geliştiricilere sitelerini birden çok görünüm alanında test etmenin basit bir yolunu sunar.

Sizzy , tasarımınızı gerçek zamanlı olarak kontrol etmenin basit bir yolunu sunar. Herhangi bir sayıda cihazın ve ekran boyutunun etkileşimli bir görünümünü sunar. Hatta bir cihaz klavyesini^{(device keyboard)} simüle edebilir ve ardından yatay ve dikey modlar^{(landscape and portrait modes)} arasında geçiş yapabilirsiniz .

Bir Chrome uzantısı^{(Chrome extension)} yüklemek , araç çubuğunuza tıklandığında mevcut URL'yi ^(URL)Sizzy platformunda açacak^{(Sizzy platform)} bir düğme ekleyecektir . Uzantı, tüm " x-frame-options " başlıklarını engelleyecek ve böylece herhangi bir çevrimiçi web sitesine göz atabileceksiniz.

Sizzy açık kaynaklı bir projedir^{(source project)} ve kodun tamamını burada^(here) görebilirsiniz .

3. Kontrol robotu

Checkbot , sitenizi güvenlik sorunları açısından test edebilir ve ayrıca web sitesi sayfa yükleme hızınızı denetleyebilir. Tasarımcılara tipik hataları belirleme araçları sağlayacak ve site güvenliği^{(site security)} , arama motoru^{(search engine)} ve site hızında^{(site speed)} iyileştirmeler önerecektir .

50'den fazla en iyi uygulama metriğini kullanarak, bir web sitesini en iyi SEO uygulaması , bozuk bağlantılar, yinelenen içerik^{(duplicate content)} ve daha fazlası için denetleyecektir. Araç ayrıca CSS , JS ve HTML'yi^(HTML) de doğrulayacaktır .

Checkbot, tasarımcı ve kodlayıcı hatalarını^{(designer and coder errors)} gerçek zamanlı olarak algılar ve sizi geri dönüp çalışmanızı tekrar tekrar kontrol etme zahmetinden kurtarır.

Bozuk sayfa bağlantılarını düzeltecek, benzersiz içerik ve sayfa başlıkları sağlayacak ve yönlendirme zincirlerini ortadan kaldıracak ^{(content and page titles)}kaliteli^{(quality tool)} bir araç arıyorsanız, bu araç faydalı olacaktır.

Tasarımcılar için, CSS'nizi ve JS'nizi^{(CSS and JS)} en aza indirmenize yardımcı olabilir ve ayrıca CSS'nizi^(CSS) nasıl küçülteceğiniz ve tarayıcı önbelleğinden nasıl yararlanacağınız konusunda önerilerde bulunabilir .

4. GistBox Kırpıcı

GistBox , web tasarımcıları için en yararlı Chrome uzantılarından biridir.^(Chrome)

GistBox , görüntülediğiniz web sayfasındaki herhangi bir kod bloğundan bir ^{(code block)}GitHub Gist oluşturabilir .

Herhangi bir kod bloğunun sağ^{(right-hand corner)} üst köşesinde, basıldığında, kodu Gist'e^(Gist) kaydetmenizi sağlayan bir açılır pencereye izin verecek küçük bir düğme göreceksiniz .

Sağ fare tıklamasıyla yeni Gists oluşturabilir ve daha sonra incelemek ve kullanmak^{(inspection and use)} için kod bloklarını kaydedebilirsiniz .

GitHub ile entegrasyon , tasarımcıların ve geliştiricilerin kod bloklarını toplamasına ve bunları manipüle etmesine veya daha sonra kullanmak üzere kategorilere ayırmasına olanak tanır. Bu, onu kullanışlı ve verimli bir ^{(convenient and efficient)} Chrome uzantı^{(Chrome extension)} aracı yapar.

5. ColorZilla

ColorZilla , bireysel ^(ColorZilla)web tasarım^{(web design)} projeleri için etiketlenebilen, etiketlenebilen ve kategorize edilebilen onaltılı kodları toplamak için inanılmaz derecede kullanışlı bir Chrome uzantısıdır .

Herhangi bir web sayfasından rengi çıkaracak ve ColorZilla panosuna kaydedecek bir göz damlası aracı seçmenizi sağlar.

Bununla, daha sonra kullanmak üzere ve web tasarımı ve geliştirmede^{(design and development)} rengi tutarlı bir şekilde kullanmanızı sağlamanın bir yolu olarak hızla renk paletleri geliştirebilirsiniz .

ColorZilla ayrıca bir görüntüyü CSS'ye dönüştürebilmeniz için bir renk analizörü ve ^(CSS)CSS gradyan düzenleyicisi^{(gradient editor)} olarak da işlev görür .

6. Yazı Tipi

 Bu Chrome Uzantısı^{(Chrome Extension)} , favori yazı tiplerini kullanmak ve bunları kendi web tasarım projelerine^{(web design project)} dahil etmek isteyenler için gerçek bir zaman tasarrufu sağlar .

WhatFont Chrome uzantısı^{(WhatFont Chrome extension)} , geliştiricilerin herhangi bir web sayfasındaki hemen hemen her yazı tipini hızlı bir şekilde analiz etmesine ve tanımlamasına olanak tanır.

Uzantı iyi gelişmiştir ve inceleme araçlarını açmak yerine, fareyi yazı tipinin üzerinde gezdirerek çalışır.

Sadece bu değil, uzantı aynı zamanda Pages gitti yazı tipini sunmak için kullanılan hizmeti de belirleyecek ve Google Yazı Tipi API'sini ve Typekit'i destekleyecektir.^{(Google Font API and Typekit.)}

7. Işık Çekimi

LightShot , herhangi bir sayfanın tamamını veya bir kısmını yakalamanıza ve yüklemenize, indirmenize veya üçüncü taraf bir hedefe^{(party destination)} göndermenize olanak tanıyan hızlı bir ekran görüntüsü aracıdır^{(screenshot tool)} .

LightShot tarafından çekilen ekran görüntüleri kullanılabilir ve sosyal medyada paylaşılabilir veya yazdırılabilir.

Ekranın seçilen bölümüne açıklama ekleyebilir ve metin, oklar ve daha fazlasını ekleyebilirsiniz. Ancak, web tasarımcıları için bu basit aracın belki de en parlak özelliklerinden biri, bir görsel seçerek, çevrimiçi olarak benzer görseller için tam bir Google görsel^{(Google image)} araması yapmaya devam edebilmenizdir.

LightShot birden çok dilde yapılandırılabilir.

Uzantı saf JavaScript ile yazılmıştır ve ayrıca Windows , Chromebook , Linux ve Mac OS^{(Linux and Mac OS)} için de çalışacaktır . Bir masaüstü uygulaması^{(desktop application)} olarak da erişilebilir, bu da onu birden fazla cihaza bağımlı web tasarımcıları için mükemmel bir seçim yapar.

8. Harika Ekran Görüntüsü

Lightshot gibi , Awesome Screenshot da bir ekran ve görüntü yakalama uzantısıdır.

Bununla birlikte, Lightshot'tan^(Lightshot) birkaç yönden farklıdır . Müthiş Ekran Görüntüsü , tüm ekran görüntülerinizi ^{(Awesome Screenshot)}Google sürücünüze^{(Google drive)} bağlayacak şekilde yapılandırılabilir .

Tüm sayfayı yakalamak için görüşünüzün ötesinde olan öğelerin ekran görüntüsünü almanıza olanak tanır. Ek düzenleme ve açıklama araçlarına^{(editing and annotation tools)} sahiptir virgül, tümü uzantı içinde veya ek Harika Ekran Görüntüsü uygulamalarının kullanımıyla kırpma ve görüntü düzenlemeye izin verir.

Masaüstü için Chrome uygulamasını^{(Chrome application)} da yükleyerek özelliklerini genişletebilirsiniz . Uzantı, herhangi bir sitede çalışırken diğer geliştiriciler veya tasarımcılarla işbirliği yapabilmeniz için video yakalama ve paylaşmaya da izin verir.

Bir ekran görüntüsüne ek görüntüler ekleyebileceğiniz gibi , başkalarına göstermek istemediğiniz mavi öğeleri veya silebilirsiniz .^{(blue or erase elements)}

9. Önbelleği Temizle

Önbelleği Temizle Chrome Uzantısı^{(Cache Chrome Extension)} , baktığınız sayfanın çerezlerini ve önbelleğini temizlemenizi sağlayan hızlı ve basit bir araçtır. Birkaç basit sayfa öğesini temizlemek için tarayıcınızın ayarlar sayfasına gitme ihtiyacını ortadan kaldırır.

Birden fazla düzenleme yapan ve bunları gerçek zamanlı olarak görüntülemek isteyen web tasarımcıları için bu, eski verilere bakmanın getirdiği sıkıntıyı ortadan kaldıracak mükemmel bir araçtır.

Önbelleğinizi ve çerezlerinizi temizlemeniz gereken zamanlar olabilir, ancak Chrome ayarlarına gitmek sıkıcıdır. Önbelleği^(Cache) Temizle , bir düğmeyi tıklatarak önbelleğinizi ve küresel veya yerel çerezleri silmenizi sağlar.

Önbelleği^(Cache) Temizle , sayfadan hangi öğeleri temizlemek istediğinizi yapılandırmanıza olanak tanır. Değişkenler^(Variables) arasında Cash , indirmeler, tüm sistemler, form verileri, Cash , dizin veritabanı^{(index database)} , eklenti verileri, şifreler ve daha fazlası bulunur.

10. Web Geliştirici Google Chrome Uzantısı

Web Geliştirici Google Chrome Uzantısı^{(Web Developer Google Chrome Extension)} , geliştiricilerin ve tasarımcıların web sayfalarını en iyi tasarım^{(practice design)} , kodlama, kullanılabilirlik ve arama motoru optimizasyonu ihlalleri açısından kolayca denetlemesine, analiz etmesine ve kontrol etmesine olanak tanır.

Kaynaklarımıza göz atmak için yoğun olmayan, ancak web tasarımı için yararlı bir ton bilgi sağlayan harika bir hepsi bir arada araçtır, ayrıca bir web sitesi veya sayfadaki arama motoru optimizasyonu^{(search engine optimization)} öğelerinden sorumludur .

 Uzantı, araç çubuğunu birden çok web geliştirici aracıyla yükler.

Araç , birden fazla cihazda en iyi uygulama kullanımıyla^{(practice use)} çelişen sayfa boyutu, genişlik ve boyutlar hakkında size göstergeler verecektir . Gömülü JavaScript'i^(JavaScript) kontrol etmenize ve web sitenizi çeşitli cihazların simülasyonu aracılığıyla görüntülemenize olanak tanır.

Uzantı, Windows , Linux ve Mac OS'de iyi çalışır. Kodlama ve tasarım sorunlarına^{(coding and design issues)} ek olarak , meta etiket bilgileri^{(tag information)} , yanıt üstbilgileri, renk bilgileri^{(color information)} ve topografik bilgiler hakkında da fikir verecektir .

Aracın ana özelliklerinin yanı sıra tam yeteneklerini geliştirici Chris Pedericks'in web sitesinde inceleyebilirsiniz^{(Chris Pedericks’ website)} .

Şüphesiz , web tasarımcısı veya geliştiricisinin^{(designer or developer)} kullanabileceği çok sayıda yüksek kaliteli ve kullanışlı Chrome uzantısı vardır .

Bu liste, en popüler ve kullanışlı araçlardan birkaçını gösterir. Bu listedekilerden daha kullanışlı veya daha üstün olduğumu düşündüğünüz araçlar için herhangi bir öneriniz var mı? Bilmemize izin ver.

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, Chrome extension hаs 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

• Graphic Designers için 8 Best Social Networking Sites vitrin portföylerini

• Spotify Web Player: Nasıl Access and Use

• 7 Best Tools and Apps Free için kendi Meme'ınızı oluşturmak için

• Web Aramalarınız İçin Neden Hâlâ Bing Kullanmaya Değer?

• Sosyal Medya Siteleri için Mükemmel Boyutlu Görüntüler Oluşturmak için 8 Araç

• Dijital Göçebe İçin 10 Temel Araç

• Reddit üzerinde 30 En Self-Geliştirme Subreddits

• Calm Political Debate 8 siyasi Subreddits

• Herhangi bir Problem'u çözmek için en iyi çevrimiçi Calculators

• Online Shopping için Amazon 54 En İyi Alternatifleri

• Nerede Vegan Food civarında Me mı? 6 En Siteler Your Area Arama

• Start Bu 6 Best Websites ve Apps ile bir Online Journal

• 16 Best Sites ila Find Free Audiobooks Online

• 2021'de Everyone için en iyi buluşma web siteleri ve Apps

• 6 Best StumbleUpon Alternatives

• Kodlama Beceriniz Yoksa Temel Bir Web Varlığı Nasıl Oluşturulur

• Photography and Videography Lessons 8 Best YouTube Channels

• Nasıl Edit YouTube Videos: 5 En İyi Uygulama

• 10 Best Sites Free için Cartoons Online izlemek için

• Adults and Kids için bir Online Tutor bulmak için 5 Best Sites