Web Tasarımcıları ve Geliştiricileri İçin 10 Adet Chrome Uzantısı

Google Chrome’un web mağazısını duymuşsunuzdur. İçerisinde chrome’u kişiselleştirebileceğiniz birçok uzantılar var. Bende bir web tasarımcı olarak chrome’un birçok uzantısını kullanıyorum. Bu yazımda da web tasarımcıları ve geliştiricileri için bazı chrome uzantılarını sizler için derledim.

İhtiyaçlarınıza göre bu uzantılar ile verimliliğinizi büyük ölçüde artıracak kişiselleştirilmiş bir çalışma ortamı oluşturabilirsiniz.[/B]

[SIZE="4[COLOR="Red [URL="https://tik.lat/oDPYy"] 1-) SnappySnippet[/URL][/COLOR][/SIZE]

SnappySnippet , seçtiğiniz bir öğeden HTML ve CSS kodlarını kolayca alabilirsiniz ve sonra tek bir tıklama ile CodePen, jsFiddle veya JS Bin’e gönderebilirsiniz.

[COLOR="Red [URL="https://tik.lat/HuhiS"] 2-) CSS Dig[/URL][/SIZE][/B][/COLOR]

CSS Dig , stil sayfalarını ve stil bloklarını bulur ve gruplar. Böylece kodları daha iyi analiz edebilirsiniz.



[COLOR="Red [URL="https://tik.lat/dXpWk"] 3-) CSSViewer[/URL][/SIZE][/COLOR]

CSSViewer‘in yaptığı görevi birçok eklenti yapabiliyor bu aşikar fakat cssviewer kullanımı hem basit hemde anlaşılır. Chrome’a ekledikten sonra sağ üst köşede simgesine tıklayıp hangi nesnenin css kodunu öğrenmek istiyorsanız farenizi onun üzerine getirmeniz halinde tüm css kodları kutucuk halinde görünüyor.



[COLOR="Red [URL="https://tik.lat/ufCRK"] 4-) CSS-Shack[/URL][/B][/SIZE][/COLOR]

Diğer eklentilere göre çok daha farklı bi görev yapan CSS-Shack, tüm eklentilerin yaptığı görevleri içinde barındırıyor sıfırdan bir web site şablonu oluşturmanızı sağlıyor. Ayrıca bu oluşturduğunuz şablonun dışa aktarıp bilgisayaranıza indirebilirsiniz. CSS-Shack’ı uzantısını ekledikten sonra chrome://apps/ buradan ulaşabilirsiniz.



[SIZE="5 [URL="https://tik.lat/sdY0i"] 6-) CSS Shapes Editor[/URL][/B][/SIZE][/COLOR]

CSS Shapes Editor, web tasarımlarınızda kullanacağınız resimleri eklerken işine yarayan bir uzantı. Ekleyeceğiniz resimlerini büyültüp küçültebilme imkanı sağlıyor.



[COLOR="red [URL="https://tik.lat/c5be8"] 7-) Perfmap[/URL][/B][/SIZE][/COLOR]

Perfmap, tasarladığınız web sitenizde tarayıcıya yüklenen kaynakların zamanlamasını kontrol eder. Sitenizin sayfasında bir performans ısı haritası oluştup size zamanları gösteriyor. Web sitenizdeki resimlerin yüklenme hızlarını görebileceksiniz böylece buna göre küçültme işlemini yapabilirsiniz.



[COLOR="red [URL="https://tik.lat/BVMR9"] 8 -) Web Developer Checklist[/URL][/SIZE][/B][/COLOR]

Web Developer Checklist, web sitenizdeki hata olup olmadığını kontrol eder. Özellikle yaptığınız web site tasarımlarında görünümün yanı sıra hız ve seo’da önemli olduğu için bu uzantıyla tasarımlarınızı kontrol edip geliştirmeniz yaralı olucaktır. Aşşağıdaki resimde gördüğünüz gibi bende kendi sitemde denedim benimde yanlışlarım varmış ihmal etmemek gerek yoksa google bizi sevmeyebilir.

[COLOR="red [URL="https://tik.lat/mvbN0"] 9-) Page Ruler[/URL][/SIZE][/COLOR]

Page Ruler, web sayfasında istediğiniz nesnenin boyutlarını pixsel boyutunda öğrenebilirsiniz. Özellikle kullanmanızı tavsiye ederim, tasarım yaparken bazı yerlerde resim kullanmamız gerektiğinde oranın boyutuna göre Photoshop CS6 ile hazırlarken bu boyutları baz alarak yapabilirsiniz. Şahsen ben öyle yapıyorum.

[COLOR="red​