Web Tasarımcıları için En İyi 15 Google Chrome Uzantısı 2020

Google Chrome, yalnızca Google tarafından oluşturulduğu için değil, mevcut en tanınmış web tarayıcısıdır. En yakın rakibi olan Mozilla Firefox'a göre %45'ten fazla liderliğiyle web tarayıcısı pazar payı listelerinde sağlam bir liderdir. Chrome'un iOS eşdeğeri olan WebKit (Safari) ile mobil web tarayıcı pazarında liderliğe bağlıdır. Chrome, tonlarca teknolojiye güç sağlayan sağlam ve kararlı JavaScript Motoru ile tanınır. En önemlisi, Node.js çerçevesi, Google Chrome'a ​​güç sağlayan bir motora dayanmaktadır.

Chrome, kendisi için her türlü itibarı elde eder; birkaçı güvenlik ve kapsamlı araçların eksikliğini suçlamayı seçiyor. Ancak daha büyük resme gelince, Chrome'dan daha iyi bir tarayıcı hayal etmek zor. Hız, ölçeklenebilirlik, performans ve Geliştirici Araçları gibi şeyler, hem web tasarımcılarını hem de web geliştiricilerini uzun vadeli strateji için Chrome'a ​​bağlı tutan şeydir.

Google Chrome Uzantılarının güvenliği ve gizliliği hakkında birçok tartışma yapıldı. Ancak, aslında topluluğa iyi bir şey sunmak isteyen güvenilir geliştiriciler ve yeni başlayanlardan gelen dikkatli bir uzantı seçimidir. Chrome'un yeteneklerinin genişletilmesi, geliştiricilere, daha fazla üretkenlik ve daha da önemlisi, tarayıcıda bir şeyler oluşturmak için daha fazla erişilebilirlik geliştirmeye yardımcı olabilecek uzantılar oluşturmak için gerekli araç setlerini ve özellikleri sağladı.

Ön uç geliştiriciler, tarayıcı ve mobil web için web siteleri ve uygulamalar oluştururken çok akıcı bir IDE benzeri deneyim sağladığı için Chrome kullanmanın en büyük kazananları arasındadır. Tasarımcılar için bazı geliştiricilerin de yararlı bulabileceği en iyi on beş Google Chrome Uzantısını ele alacağız. Liste tarafsızdır ve tasarımcıların bugün web'deki en popüler topluluk forumlarından bazılarında paylaştığı araştırmalara dayanmaktadır.

Kullanıcı Aracısı Değiştirici

Kullanıcı Aracısı, bir sayfaya yaptığınız her yeni istekte gönderdiğiniz parmak izidir. Web sitesi daha sonra Kullanıcı Aracınızı algılayabilir ve tarayıcınızın özelliklerine uygun olarak web sitesinin uygun sürümünü size sunabilir. Bu, web sitelerinin birinin bir web sitesini bir Masaüstü veya Mobil cihazdan tarayıp taramadığını belirlemeye yönelik standart tekniktir. User-Agent Switcher uzantısı, User-Agent'ınızı başka herhangi bir tarayıcı veya mobil cihazla değiştirmenize olanak tanır ve tasarımlarınızın bu cihazlarda ve tarayıcıda nasıl göründüğünü hızlı bir şekilde denemenize olanak tanır. Geliştiricilerin üretkenliği artırmalarına yardımcı olmak için çok fazla güce sahip olan küçük bir uzantıdır ve onlara ileri geri geçiş yapmaktan zaman kazandırır.

GoFullPage

Bir web tasarımı üzerinde çalışırken veya müşterinizi sergilemek için bir web sitesinin tam ekranını yakalamak istediğinizde, gitmeniz gereken yol GoFullPage'dir. Web tasarımcıları için bu kullanımı kolay Chrome uzantısı oldukça açıklayıcıdır. Kısacası, araç, görüntülemekte olduğunuz sayfayı bütünüyle yakalar. Sadece düğmeye basıyorsunuz ve bu kadar, diğer seçenekleri kontrol etmenize gerek yok. Buna ek olarak, GoFullPage'in çalışması için klavye kısayolunu da kullanabilirsiniz.

Bu uzantının sayfayı parça parça yakaladığını ve ardından bir resim (PNG, JPG) veya PDF indirebileceğiniz yeni bir sekme açtığını göreceksiniz. Tabii ki, masaüstünüze sürükleyip bırakabilirsiniz. İster basit bir blog, ister karmaşık bir web sitesi veya çevrimiçi mağaza olsun, GoFullPage her şeyi terletmeden yakalar.

KurtarmaZamanı

Web tasarımı üzerinde çalışmak söz konusu olduğunda zaman önemlidir. Ne de olsa, bunun yerine çok daha kaliteli işler yapabileceğiniz zaman, dikkatinizi dağıtmak için çok fazla zaman harcamak istemezsiniz. Bir Chrome uzantısı olan RescueTime sayesinde tüm gün boyunca Chrome'da geçirdiğiniz süreyi takip edebilirsiniz. Üretken miydiniz yoksa verimsiz miydiniz? RescueTime, olayları anlamanıza yardımcı olacak, böylece zamanınızı buna göre yönetebilirsiniz.

Bu sadece harcadığınız her web sitesinin zaman takibi ile ilgili değildir. RescueTime ayrıca sayfaları "çok üretken" ve "çok dikkat dağıtıcı" olarak sınıflandırır. Ayrıca, bilgisayardan uzaklaştığınızda bile bunu algılar – bu durumda izlemeyi durdurur. Her gün Chrome'da ne yaptığınızı merak ettiyseniz, RescueTime, çalışmak için ne kadar zaman harcadığınızı ve "sadece bir şeyleri kontrol etmek" için ne kadar zaman harcadığınızı daha iyi anlamanıza yardımcı olacaktır.

Önbelleği Temizle

Chrome'un kendi özelliği olsa da, Clear Cache uzantısıyla önbelleği temizlerken işleri hızlandırabilirsiniz. Tek bir tıklama ile Chrome'a ​​​​ekleyebilir ve hemen kullanmaya başlayabilirsiniz. Önbelleği temizlerken, araç ek onaylar istemez, açılır pencereler oluşturmaz ve başka şeyler istemez. Ancak, tüm verileri global olarak kaldırmak isterseniz, ek izin gereklidir. Sonuçta, her şeyi yanlışlıkla temizlemek istemezsiniz.

Ayrıca, uygulama önbelleği, çerezler, indirmeler, form verileri, geçmiş, yerel depolama gibi tam olarak neyi temizlemek istediğinizi kolayca belirleyebilirsiniz, liste uzayıp gidiyor. Verileri temizlerken hangi etki alanının dahil edileceğini veya hariç tutulacağını da ayarlayabilirsiniz. Önbelleği Temizle, zaman dilimlerini de destekler. Hızlı ve anlaşılırdır ve iş akışınızı çatıdan hızlandırırken en önemli olan budur.

Hükümdar

Web sitelerindeki öğeleri ölçmeye yardımcı olan sanal bir cetvele sahip olmak ister misiniz? Bu durumda, Ruler, sihri yapacak pratik Chrome uzantısıdır. Bir web tasarımcısı olarak, bu araç her bir öğenin boyutunu hesaplarken çok yardımcı olabilir, çünkü fare becerilerinizden başka hiçbir şey kullanmadan her sayfadaki her şeyi ve her şeyi ölçebilirsiniz.

Siteye cetvel ekleyebilir ve öğeleri piksel olarak ölçebilirsiniz. Ek olarak, ölçmek istediğiniz belirli şekilleri çizmenize olanak tanıyan bir cetvel olarak fare imlecinizi de kullanabilirsiniz. Boyut ve boyut hakkında gerekli tüm bilgileri sayfanın kendisinde piksel olarak bulacaksınız. Sadece uzantıları ekleyin ve sağ üst köşede görünen düğmeyi tıklayın. İşte bu, artık sayfaları, öğeleri ve bileşenleri ölçen sanal bir cetveliniz var.

Pencere Boyutlandırıcı

Tüm teknoloji topluluklarında 500.000'den fazla aktif kullanıcıyla Window Resizer uzantısı, tasarımcıların bu çözünürlüklerin tasarımlarınızla nasıl etkileşime girdiğini daha iyi anlamaları için farklı çözünürlük türlerini taklit etmelerine yardımcı olur. Nüfusun çoğunluğu için çalışan bir web sitesi oluşturmak çok önemlidir. Ve bu uzantı, hataların nerede oluşabileceğini belirlemenize yardımcı olur, böylece gerekli kod değişikliklerini hemen yapabilirsiniz. Tarayıcı pencerenizin genişliğini ve yüksekliğini, bulunduğu konumu hızlı bir şekilde değiştirebilirsiniz ve canlı kodlama yaparken farklı ekran çözünürlüklerini kontrol etme yeteneğinizi büyük ölçüde artıracak yerleşik bir kısa kod işlevi vardır.

Yazı Tipi

Milyonlarca aktif web sitesi ve her gün ziyaret ettiğimiz çok sayıda yeni web sitesi ile her zaman gözümüze çarpan bir şey, belirli bir widget veya dinamik işlev veya olağanüstü görünen ancak yapamadığımız belirli bir yazı tipi vardır. bunun adını kesin. WhatFont uzantısıyla, herhangi bir web sitesi sayfasındaki yazı tiplerini hızlı bir şekilde inceleyebilir ve yazı tipinin adını hızla öğrenebilir, böylece aramaya başlayabilirsiniz. Bunun dışında, WhatFont, Google Fonts veya Typekit gibi premium veya ücretsiz hizmetlerden geliyor olmaları durumunda, yazı tiplerini sunmak için kullanılan hizmet türlerinin anlaşılmasına da yardımcı olur.

Sekme Paketleyici

Tasarımcılar ve hatta geliştiriciler, sekmelerini temiz ve düzenli tutmak için mücadele ediyor. Tasarım çalışması yaparken sürekli olarak diğer kaynaklara, araştırma malzemelerine, ilham çalışmalarına ve tasarımlarımızı nasıl mükemmelleştirebileceğimize dair örneklere bakıyoruz ve bu sekmeler oldukça hızlı bir şekilde birikme eğilimi gösteriyor! Tab Packager ile artık tüm sekmelerinizi tek bir URL'de paketlemenin ve ardından bu URL'den bunlara erişmenin basit bir yolunun keyfini çıkarabilirsiniz. Bu, her bir sekmenin nelerden oluştuğunu tahmin ederek sekmeler arasında gezinmek yerine sürekli olarak listemize dönebildiğimiz ve ihtiyacımız olanı hızla alabileceğimiz için üretkenliği artırır.

CSS-Shack

Photoshop, katmanlarla ilgilenen tek araç değildir. Aslında, her ön uç geliştirici, CSS yapılandırmalarında katmanlarla uğraşmak zorundadır. Web tasarımcıları için bu Chrome uzantısı, stil katmanları oluşturmanıza ve ardından daha kolay erişim için bu katmanları CSS dosyalarınıza aktarmanıza yardımcı olur. Birkaç tıklamayla hızlı bir şekilde tasarımlar, tel kafesler veya düğmeler gibi basit öğeler oluşturabilirsiniz. İster rastgele deneme ve sanal alan testi, isterse oluşturmaya çalıştığınız eksiksiz bir stil kılavuzu olsun, CSS-Shack bu departmanlarda size yardımcı olacak araçlar sunar.

Düz Renkler Kılavuzu

FLAT stil kılavuzunu kullanarak yeni bir web tasarımı oluşturuyor ancak kullanılacak doğru renk kodlarından emin değil misiniz? Kullanımı kolay Flat Colours Guide uzantısı ile endişeleriniz hızla ortadan kalkar. Uzantıyı yükleyin ve genellikle FLAT tasarımlarına giren renkleri yüklemek için uzantılar düğmesini tıklayın.

ColorZilla

ColorZilla, Mozilla tarayıcısında milyonlarca aktif kullanıcıya sahiptir. Ve son olarak, halihazırda 800.000'den fazla aktif kullanıcı biriktiren bir Google Chrome uzantısı da mevcuttur. ColorZilla ile herhangi bir sayfadaki renkleri hızlıca değerlendirebilirsiniz. Ve bu renkleri optimize etmek ve tasarımlarınızı oluşturmak için kullandığınız diğer araçlara yüklemek için kullanabilirsiniz. Sayfa içindeki tekil piksellerin renklerine kolayca erişin ve her durumda renkleriniz için doğru derinliği sağlayın. Kısayollar, daha hızlı renk işleme ve optimizasyonu sağlar.

stil robotu

Stylebot, şu anda göz atmakta olduğunuz herhangi bir web sitesinin ve öğenin CSS kodunu değiştirmek için canlı bir düzenleme aracıdır. CSS kullanarak tek tek öğeleri hızlı bir şekilde seçebilir ve görünüm değişiklikleri yapabilirsiniz. Otomatik yerleşik araçları kullanarak istediğiniz her şeyi değiştirin veya kendi CSS'nizi yazın. Bu, CSS hakkında daha fazla bilgi edinmenize yardımcı olur. Ayrıca, canlı düzenlemenin nasıl çalıştığına ve tasarımlarınızda istediğiniz değişiklikleri ne kadar hızlı oluşturabileceğinize dair bir fikir verir. 150.000'den fazla kullanıcıyla bu, her web tasarımcısının araç setinde olması gereken uzantıdır.

Keyfini çıkarınCSS

EnjoyCSS, doğrudan tarayıcınızda bulunan bir web tasarım paketi stüdyosudur! Kendi seçtiğiniz herhangi bir öğenin UI ayarlarını yönetmenize izin veren doğrudan bir CSS3 oluşturucudur. Geçişler oluşturun, öğeleri dönüştürün, degradelerle, gölgelerle çalışın ve çok daha fazlasını yapın. EnjoyCSS ayrıca öğelerinize doğrudan uygulayabileceğiniz önceden oluşturulmuş bir dönüşüm kitaplığına sahiptir.

Emmet Canlı Stili

Emmet LiveStyle, metin düzenleyicinizde CSS, LESS veya SCSS dosyasını düzenlerken web sayfası stil sayfanızı anında günceller. Dosya kaydetme veya sayfa yeniden yükleme yok: saf gerçek zamanlı deneyim! Ve bu, DevTools'tan güncellemeleri kaynak koduna doğru şekilde geri aktaran ilk araçtır. Bu uzantı için yapılan pek çok inceleme, bu araç olmadan web tasarım iş akışlarını hayal edemediklerini belirtiyor.

Web Geliştiricisi

Mozilla Firefox, tıpkı Google Chrome'un yaptığı gibi kendi Geliştirici Araçlarına sahiptir. Son yıllarda olan şey, birçok Firefox kullanıcısının Chrome'a ​​geçmesidir. Ancak yine de belirli bölümlerde belirli bir işlevsellik eksik veya eksik gibi geliyor. Geçiş yapan kişiler için en büyük kayıplardan biri Mozilla Geliştirici Araçları'nın kaybıdır. Ve buna çok büyük bir talep olduğu için, birkaç geliştirici bir araya geldi ve Chrome için Firefox Dev Tools'un tam bir aynasını oluşturdu. Halihazırda bir milyondan fazla aktif kullanıcısı olan bu eklenti, canlı ortamda web tasarımlarıyla çalışmak için tarayıcı araç setlerini genişletmek isteyen hem yerleşik hem de gelecek vadeden tasarımcılar için büyük bir başarıdır.