EN İYİ 12 CHROME GELİŞTİRİCİ EKLENTİSİ 2021

Chrome’un en büyük kullanım nedeni diğer Google uygulamalarıyla sorunsuz entegrasyonudur ve bu da onu çevrimiçi iş yerleri için en iyi seçim haline getirir. Web geliştirme işinizde veya yalnızca genel tarama sırasında olsun, muhtemelen birkaç favori Chrome uzantısına sahipsinizdir. Kullandığınız uzantılardan bu listede de görebilirsiniz, ama bu listeyle araç çubuğunuza eklemek için birkaç mücevher daha keşfedeceğinizi umuyorum.

E. Samet Bişkin
6 min readAug 17, 2021
Chrome Web Mağazası

1. Lighthouse

Lighthouse, web uygulamalarınızın performansını, kalitesini ve doğruluğunu artırmak için açık kaynaklı, otomatik bir araçtır. Lighthouse, bir sayfayı denetlerken, sayfa üzerinde bir dizi test çalıştırır ve ardından sayfanın ne kadar iyi performans gösterdiğine dair bir rapor oluşturur. Buradan, başarısız olan testleri, uygulamanızı geliştirmek için neler yapabileceğinize dair göstergeler olarak kullanabilirsiniz.

Lighthouse

2. Wappalyzer

Wappalyzer, web sitelerinde kullanılan teknolojileri ortaya çıkaran uzantıdır. Uzantıyı kurduktan sonra istediğiniz bir web sitesine giderek hangi içerik yönetim sistemlerini, e-ticaret platformlarını, web çerçevelerini, sunucu yazılımlarını, analiz araçlarını kısaca kullanılan teknolojileri size sunan meraklısına mücevher gibi uzantı. Wappalyzer’a kaydolmak yok, ücretsiz sürümde hiçbir ayrıntı gerekmiyor, sadece kuruyor ve merak ettiğiniz herhangi bir web sitesine gidiyorsunuz. Uzantı profesyonel bir sürüm de sunuyor ancak yalnızca şirketle ilgili iletişim bilgileri sağlıyor (kayıt olmadım).

Wappalyzer

3. WhatFont

WhatFont, bir web sayfasında hangi yazı tiplerinin olduğunu belirlemek için kullanılan gerçekten popüler bir Chrome geliştirici aracıdır. Temel olarak, bir kısayoldur, böylece her bir öğeyi incelemeniz gerekmez. Uzantıyı yükleyin, simgeye tıklayın ve herhangi bir yazı tipinin üzerine gelin, araç size adını söyleyecektir. Yazı tipini tıklarsanız, yazı tipi boyutu, ağırlığı, ailesi, stili, satır yüksekliği ve rengi küçük bir pencerede görüntülenir. Aracı, web’den örnekler toplamak için kullanabilir veya sizi geceleri uyutmayan soruları yanıtlayabilirsiniz :) Bu uzantı, Airbnb’de bir yazılım geliştiricisi olan Chengyin Liu tarafından oluşturulmuş. Hayat kurtarır.

WhatFont

4. Eye Dropper

Tıpkı web sitesi yazı tiplerinde olduğu gibi, bir noktada web sayfasında hangi renk kodlarının kullanıldığını bilmek isteyeceksiniz. İncelemeyle uğraşmak veya marka yönergelerine dalmak yerine (eğer varsa), bu kullanışlı küçük Chrome uzantısını kullanabilirsiniz. Eye Dropper ile bir web sayfasının üzerine gelebilir ve rengin bilgilerini görüntüleyebilirsiniz. Renge tıklarsanız, kolayca erişebilmeniz için bir panoya kopyalanır. Hayran olduğunuz o web sayfasını hatırlayamıyorsanız kullanışlı olan araçla RGB değerlerini ve on altılık değerleri görebilir ve hatta geçmişinize erişebilirsiniz. Ne kadar renk hayranı olduğunuzu bilmiyorum, ancak uzantıda web sayfasının CSS’sine dalmamak için kullanabileceğiniz birkaç başka özellik daha var. Eye Dropper, Chromium için de mevcut.

Eye Dropper

5. Window Resizer

Adından da anlaşılacağı gibi, bu Chrome geliştirici aracı, web sitelerinizi test etmek için çeşitli ekran çözünürlüklerini taklit edebilmeniz için ekranları yeniden boyutlandırır. Yarım milyondan fazla kullanıcısı olan en popüler yeniden boyutlandırma uzantısıdır. Aracı yükledikten sonra, cihaz ekranı boyutları için farklı seçeneklerin bulunduğu bir açılır menü olacaktır. Ekranınızı seçilen boyuta otomatik olarak yeniden boyutlandırır. Cihaz listesini, web sayfanızı test ettiğiniz teknolojiye uyacak şekilde özelleştirebilirsiniz. Uzantıyı bir açılır pencere olarak açabilirsiniz, bu da araç çubuğunu sürekli seçmek zorunda kalmamanız için çok iyi oluyor. Ayrıca, ekran boyutunu manuel olarak ayarladığınızda, hangi boyutlarla çalıştığınızı bilmeniz için canlı bir pencere ölçere sahipsiniz. Yan görünümün nasıl olduğunu görebilmeniz ve tüm açılarınızı ve varyasyonlarınızı kapsayabilmeniz için döndürme işlevi de var.

Window Resizer

6. CSS Viewer

Basit bir CSS özellik görüntüleyicisidir. Başka ne söylenmesi gerekir bilemedim :) Bu uzantı, bir web sayfasındaki temel CSS özelliklerini hızlı bir şekilde tanımlamanın kullanışlı bir yoludur. Uzantıyı seçmek, farenizi nereye getirirseniz getirin size verileri gösteren küçük bir açılır pencereyi tetikler. Uzantı açık kaynaktır, böylece kaynak kodunu GitHub’da bulabilirsiniz ve elbette ücretsiz. Gizlilik açısından, CSS görüntüleyici geçmişinize ve web verilerinize erişim gerektirir ama neyse ki sizin için herhangi bir özel veri toplamaz veya iletmez, bu yüzden garip arama geçmişin için endişelenme :)

CSS Viewer

7. Web Developer

Web Developer uzantısı, tarayıcıya çeşitli web geliştirici araçları ekler. Uzantı Chrome, Firefox ve Opera için kullanılabilir ve Windows, macOS ve Linux dahil olmak üzere bu tarayıcıların desteklediği herhangi bir platformda çalışır. En çok kullanılan özelliklerinden bazıları, Oturum Tanımlama Bilgilerini Temizle, Öğe Bilgilerini Görüntüle, Görüntü Dosya Boyutlarını Görüntüle, Topografik Bilgileri Görüntüle ve CSS’i Düzenle.

Web Developer

8. Clear Cache

Benjamin Bojko’nun zihninden önbelleğinizi temizlemenin en kolay yolu, Clear Cache geliyor. Tek tıkla tüm tarama verileriniz sonsuza kadar yok olacak! Onay iletişim kutusu, açılır pencere veya temizleme işleminizi yavaşlatan başka bir şey yok. Sadece bir tıklama var. Ayrıca şu yerlerden ne kadar verinin silineceğini özelleştirebilirsiniz; Uygulama Önbelleği, Önbellek, Tanımlama Bilgileri, İndirilenler, Dosya Sistemleri, Form Verileri, Geçmiş, Dizine Alınmış DB, Yerel Depolama, Eklenti Verileri, Parolalar ve WebSQL. Çerezlerden nefret edebilirsiniz, ancak bazıları sık kullanılan belirli alan adları için yararlıdır ayrıca hangi alan adı çerezlerinin silineceğini de özelleştirebilirsiniz.

Clear Cache

9. EditThisCookie

Oldukça popüler olan bir başka Chrome geliştirici aracı da EditThisCookie’dir. Bu çerez yöneticisi ile çerezlerle istediğinizi yapabilirsiniz. Ekleyebilir, düzenleyebilir, silebilir, arayabilir, engelleyebilir, son kullanma tarihlerini ayarlayabilir vb. Temel tanımlama bilgisi düzenleme işlevinin yanı sıra, büyük bir zaman tasarrufu sağlayan toplu düzenleme de yapabilirsiniz. Ve bu araç açık kaynak kodlu ❤

EditThisCookie

10. Marker.io

Marker.io, web sayfalarında hata raporlamayı daha hızlı ve daha görsel hale getirmek için tasarlanmış kullanışlı bir web geliştirici aracıdır. Hatanın nerede ve ne olduğunu açıkça belirtmek için ekran görüntülerini kolayca yakalayabilir ve düzenleme özelliklerini kullanabilirsiniz. Bu uzantının harika yanı, Trello, Jira, GitHub, Asana ve diğer birkaçı gibi muhtemelen işte kullandığınız proje yönetim araçlarının çoğuyla entegre olabilmesidir. Sorunu vurguladıktan sonra, siteden ayrılmadan veya uygulamalar arasında geçiş yapmadan doğrudan uzantıdan bir bilet oluşturabilirsiniz. Ne yazık ki, bu uzantı ÜCRETLİ bir uzantıdır. Planlar ayda 49 dolardan başlıyor (deneme olmasına rağmen). İş için kullanacaksanız, işvereninizin maliyeti karşılamasını umarsınız. Alternatif olarak, ücretsiz araç olarak Lightshot Screenshot’ı kullanmayı seviyorum bilgisayarımdaki herhangi bir uygulamada kullanabiliyorum ve tarayıcıma bağlı değil.

Marker.io

11. Octotree — GitHub code tree

GitHub kullanıyorsanız Octotree, GitHub deneyiminizi geliştirmek için tasarlanmıştır. Ücretsiz bir sürüm ve bir profesyonel sürümü var. Ücretsiz sürümle GitHub’da kod inceleme ve keşfetmeye daha derinden dalabileceksiniz. Özellikler arasında hızlı dosya arama, Hızlı IDE benzeri kod ağacı, GitHub temalarını destekleme, Özel depoları destekleme, Omni yer imi oluşturma, Yüksek performans, her boyuttaki depolarla çalışma bulunur. Profesyonel sürüme girmeyeceğim, ancak tüm özelliklerden yararlanmak istiyorsanız web sitelerini ziyaret edebilir ve kendiniz görebilirsiniz. Octotree ile gizlilik bir numaradır, BS yoktur, verileriniz paylaşılmaz.

Octotree-GitHub code tree

12. Color Tab

Bu uzantıyı sadece eğlence için ekledim! Neden bir geliştirici aracı olarak sınıflandırıldığını gerçekten bilmiyorum. Color Tab inanılmaz derecede basittir. Yeni bir sekme açtığınızda, güzel bir renk paleti görünecektir… Bak, çok tatlı, yargılama :) Google ana sayfasını görmekten çok daha güzel. Her yeni sekme açtığınızda, sayfa rastgele bir renk kombinasyonu ile değiştiriliyor.

Color Tab

Umarım, bu geliştirici araçları hakkında yeni şeyler keşfetmişsinizdir. Herhangi bir şeyi kaçırdığımı düşünüyorsanız veya bu listede olması gerektiğini düşündüğünüz gerçekten harika bir araç keşfettiyseniz, bir yorum bırakın. Okuduğunuz için teşekkürler! 🙏

--

--