Web Geliştirme Verimliliğinizi Artırın

Son Güncelleme 13 Ekim 2020

Benim gibi web geliştirme yapmayı seviyorsanız, web tarayıcınızda işinizi kolaylaştıran ve üretkenliğinizi artıran harika araçlara sahip olmanın önemini bilmelisiniz. Google Chrome ve Chrome Uzantılarının web geliştirme üretkenliğinizi artıracak kapsamlı teklifi böyledir.

Evet, Firefox, web geliştirme için mükemmel bir tarayıcıdır ve Firefox Developer Edition, CSS hata ayıklama ve testi için harikadır. Ancak Chrome, en yeni web özellikleri için destek sağlayan uzun bir araç uzantıları listesine ve onu web geliştirme verimliliğini artırmak için birçok web geliştiricisi arasında favori yapan geliştirici araçlarına sahiptir.

Chrome Marketplace, geliştiricilerin bir web sitesi veya açılış sayfası geliştirmesine ve test etmesine yardımcı olmak için en eski veya yeni en iyi uzantılardan bazılarına sahiptir. Aşağıda, web geliştirme araç kutunuzda "olması gereken" olarak önerdiğim en iyi uzantılardan bazılarını öğreneceksiniz.

Web Geliştirme Verimliliğinizi Artıran Chrome Uzantıları

Etiket Yardımcısı

Tag Assistant, Google Analytics, Google Tag Manager vb. dahil olmak üzere çeşitli Google etiketlerinin yüklenmesiyle ilgili sorunları gidermeye yardımcı olur. Tag Assistant, sayfanıza farklı Google etiketlerini doğru bir şekilde yüklediğinizi doğrulamanızı sağlar. Herhangi bir sayfaya gidin, Tag Assistant size hangi etiketlerin bulunduğunu söyleyecek, bulduğumuz hataları bildirecek ve uygulamanızda yapılabilecek iyileştirmeler önerecektir. Google Analytics, Adwords Dönüşüm İzleme, Google Etiket Yöneticisi vb. dahil olmak üzere çoğu Google etiketi kontrol edilir.

NeÇalışır

Bir web sitesini neyin çalıştırdığını keşfedin - çerçeveler, Analiz Araçları, WordPress Eklentileri, Yazı Tipleri - adını siz koyun. WhatRuns uzantısı, ziyaret ettiğiniz herhangi bir web sitesinde kullanılan teknolojileri bulmanız için bir tık uzağınızda. Geliştirici Araçları ve Reklam Ağlarından WordPress Eklentileri ve Temalarına kadar yeni ve gelecek araçları ve hizmetleri bile algılar. Sadece bu da değil – web sitelerini takip ederek yeni teknolojileri kullandıklarında veya mevcut teknolojileri kaldırdıklarında bilgilendirilebilirsiniz.

Vue.js Geliştirme Araçları

Adı çok açık. Vue.js uygulamalarında hata ayıklamak için bir Chrome ve Firefox DevTools uzantısıdır. Chrome Geliştirici Araçları'ndaki Vue.js bileşen hiyerarşilerini incelemenize olanak tanır. Chrome DevTools'unuzda yeni bir sekme göreceksiniz: "Vue."

React Geliştirici Araçları

Vue.js Devtools olarak React Developer Tools, açık kaynaklı React JavaScript kitaplığı için bir Chrome ve Firefox DevTools uzantısıdır. Chrome Geliştirici Araçları'ndaki React bileşen hiyerarşilerini incelemenize olanak tanır. Chrome Geliştirici Araçlarınızda iki yeni sekme alacaksınız: "Bileşenler" ve "Profil". Bileşenler sekmesi, sayfada oluşturulan kök React bileşenlerini ve bunların oluşturduğu alt bileşenleri gösterir. Üç bileşenden birini seçerek, sağdaki panelde mevcut aksesuarlarını ve durumunu inceleyebilir ve düzenleyebilirsiniz. İçerik haritalarında, seçilen bileşeni, onu oluşturan bileşeni, onu oluşturan bileşeni vb. inceleyebilirsiniz.

JSON Görüntüleyici Harika

Bu uzantı, tarayıcınızdaki herhangi bir web sitesinden veya API isteğinden gelen JSON yanıtını görselleştirmenize yardımcı olur. Sizi harika JSON güzelleştirme deneyimleriyle tanıştırır. Onu harika yapan birçok benzersiz özelliğe sahiptir. Geliştiricilerin JSON'u biçimlendirmesine veya güzelleştirmesine ve grafiksel bir görünümde özelliklere geçiş yapmasına yardımcı olur. Grafik görünümde giriş bölümünde sunucu yanıtınızı veya sağlanan JSON'unuzu temsil eden kolay ve etkileşimli bir grafiği vardır.

META SEO denetçisi

Web sayfalarında bulunan ve genellikle gezinirken görünmeyen meta verileri incelemek için kullanışlıdır. Meta veriler yalnızca normal HTML meta etiketleri değil, aynı zamanda XFN etiketleri, çeşitli mikro biçimler, yakın zamanda tanıtılan kurallı öznitelik, takip edilmeyen bağlantılar vb. Web Yöneticilerinin Google Yönergelerini takip edin, ancak genellikle görünmeyen ancak ilginç site özelliklerini ortaya çıkarabilecek herhangi bir sayfa içeriğini merak edenler bile. Ayrıca, raporu yazdırmanıza veya PDF olarak kaydetmenize veya verileri tercih ettiğiniz araçta kopyalamanıza/yapıştırmanıza izin veren bir yazdır/dışa aktar seçeneği vardır.

HTML Stili Hızlı Görüntüleyici

HTML DOM öğesi stili hızlı görüntüleyici. Sadece farenizi hareket ettirin ve hedefin stillerini gösterir.

CSS Görüntüleyici

CSSViewer, Chrome ve Firefox için basit bir CSS özellikleri görüntüleyicisidir. CSSViewer'ı etkinleştirmek için araç çubuğu simgesine tıklayın ve ardından geçerli sayfada incelemek istediğiniz herhangi bir öğenin üzerine gelin.

Yazı Tipleri Ninja

Herhangi bir web sitesinden yazı tiplerini tanımlayın, yer imlerine ekleyin, deneyin ve satın alın. Daha doğru sonuçlar elde etmek için yazı tipi dosyalarını analiz eder. Yazı tipi adını ve CSS özelliklerini almak için herhangi bir metnin üzerine gelin. Ana uzantı penceresi, bir web sitesinde kullanılan tüm yazı tiplerinin bir özetini de görüntüler. Yazı tipleri hakkında daha fazla bilgi alabilirsiniz. Kaç stilin mevcut olduğunu, dökümhanelerini ve fiyatlarını kontrol edin.

Uyarlanabilirliği seviyorum – Mobil/Duyarlı test

Duyarlı web sitelerini test etmek için araç. ILOVEADAPTIVE Chrome Uzantısı, araç çubuğunuza bir düğme ekler. Düğmeye tıkladığınızda, bulunduğunuz sekmede bulunduğunuz URL'yi açar. Ana Özellikler, bir URL'yi aynı anda birden fazla cihazda önizlemeyi, cihazları filtrelemeyi, işletim sistemini filtrelemeyi, miktarlarını değiştirmeyi, yakınlaştırmayı, ios panelini göstermeyi, yatay ve dikey geçişi içerir.

Web Verileri

Sağlıklı bir site için metrikleri ölçün. Web Vital'leri, web'de harika UX (https://web.dev/vitals) sunmanın anahtarı olan kalite sinyalleridir. Bu uzantı, Temel Web Verilerini ölçerek yükleme, etkileşim ve düzen kaydırma metrikleri hakkında anında geri bildirim sağlar. Bu metriklerin Chrome tarafından nasıl ölçüldüğü ve diğer Google araçlarına nasıl rapor edildiği ile tutarlıdır.

Sayfa Cetvel Redux

Herhangi bir web sayfasındaki öğeleri ölçmek için mükemmel piksel boyutları ve konumlandırma elde etmek için bir Web Developer\Designer cetveli. Page Ruler Redux, web öğelerinin piksel mükemmelliğindeki ölçümlerini almanıza olanak tanıyan temel bir web geliştiricisi ve tasarımcı aracıdır. Web sitesi ön uç geliştirme, web tasarımı veya herhangi bir web öğesinin mükemmel piksel ölçümlerini elde etmek için ihtiyaç duyabileceğiniz herhangi bir görev için tasarlanmıştır.

ızgara cetveli

Izgaralar oluşturun ve mesafelerini kolayca ölçün. Photoshop stilinde dikey ve yatay ızgaralar oluşturmanıza olanak tanır. Izgaralarınız arasındaki mesafeyi ölçmek için de bir cetveli var.

Anahat

Bu uzantı, bir web sayfasındaki her HTML öğesini ana hatlarıyla çizerek öğelerin sınırlarını görmenizi sağlar. Uzantı, tüm gökkuşağı (Kırmızı, Turuncu, Sarı, Yeşil, Mavi, Çivit ve Menekşe) renklerini destekler. Ayrıca, uygulandıktan sonra anahattı kaldırma işlevine de sahiptir.

Mobil Tarayıcı Emülatörü

Mobil ve duyarlı web sayfalarını masaüstünüzde test edin. Tek bir fare tıklamasıyla en yaygın mobil ekran çözünürlüklerini seçin. Etkin sekmenin sayfası ayrı bir pencerede açılacaktır.

İşte bu, web geliştirme üretkenliğinizi artırmak için Chrome Tarayıcınızda bulundurmanızı önerdiğim Chrome Uzantıları listem. Evet, evet… Yukarıdaki listeye dahil etmediğim başka faydalı ve harika uzantılar da var. Ancak zamanı geldiğinde, muhtemelen gelecekteki bir blogda listelenecek olan diğer harika uzantıları keşfetmeye devam edeceğim.