Geliştiriciler için Google Chrome uzantılarındaki incelikler. Web geliştirme ve daha fazlası için Google Chrome uzantıları. Chrome'un hangi sürümleri var?

Tarayıcı Google Chrome– tasarımcılar ve web geliştiricileri için mükemmel bir seçim. GoogleChrome uzantılarıyla şunları ekleyebilirsiniz: daha fazla özellik, tasarımda, hataları bulmada ve sitedeki diğer çalışmalarda yardımcı olabilir. Burada tasarımcılar ve geliştiriciler için en iyi Chrome uzantılarını sunuyoruz.

3.


Çözünürlük Testi– bu uzantı farklı ekran çözünürlüklerindeki web sayfalarını kontrol etmek için tasarlanmıştır ve kendi çözünürlük ayarlarınızı yapabilirsiniz. Bu araç, tasarımınızın farklı monitör boyutlarında nasıl göründüğünü kontrol etmek için çok kullanışlıdır.

4.


Pendule, Google Chrome'un yerleşik araçlarının işlevselliğini genişletir. Bu uzantıyla kullanıcılar, W3C otomatik web hizmetlerini kullanarak kısıtlama etiketlerini değerlendirme, bir sayfadaki resimleri gizleme, bir sayfaya gömülü komut dosyalarını görüntüleme ve daha birçok ek özelliğe sahip olur.

5.


Sivil kıyafet Tek bir şeyi iyi yapar; sayfadaki tüm CSS'leri kaldırır. Bir web sayfasının erişilebilirliğini değerlendirmenin en sevilen yollarından biri, CSS stillerini kaldırmak ve sayfanın okunabilirliğini stillerle ve stiller olmadan karşılaştırmaktır. Bu yaklaşım, kullanıcının ekranında yalnızca kısmi bir sayfanın görüntülendiği ve içeriğe erişmek için yalnızca sayfa etiketlerine güvenebildiği bir durumu simüle eder.
Her ne kadar bu program başlangıçta web sayfalarını test etmek için oluşturulmuş olsa da, onu favori stillerinizi "stilsiz" bir şekilde görüntülemek için kullanabilirsiniz (böylece patronunuz, bir JavaScript işlevini bitirmeniz gerektiğinde sizi ona bakarken yakalamaz).

6.


Bir web sayfasının belirli bölümlerini kırpmak istiyorsanız, Image Cropper bariz seçiminizdir. Bu program bir çubuk kadar basittir ve hile içermez. Sadece kesmek istediğiniz alanı belirtin; uygulama onu alacaktır. Piksel hassasiyetine mi ihtiyacınız var? Uzantı, kestiğiniz parçaların boyutunu ve konumunu gösterir, böylece ihtiyacınız olan boyutu seçebilirsiniz.

7.


Bu uzantı minimalist ve basit olmakla övünür - bu iyi bir şeydir çünkü Lorem Ipsum metninin üretimini karmaşık hale getirmek için hiçbir neden yoktur. Lorem Ipsum oluşturucu, sunum web sitenizi tasarlarken çerçeveleri metinle doldurmanıza olanak tanır.

8.


Motordaki hataların belirlenmesi İnternet Explorer Trident hiç eğlenceli değil. IE Tab'ı kullanarak, en azından biraz zaman kazanabilirsiniz ve oluşturma sorunlarını bulmak için Internet Explorer'ı kullanmak zorunda kalmazsınız (çok fazla uzantıya sahip olmadığından bahsetmiyoruz bile).

9.


jQuery Shell, açık bir web sayfası bağlamında javascript ve jQuery komutlarını çalıştırmanıza olanak tanır. JQuery'yi öğrenmek ve denemek için çok kullanışlı bir uzantı.

10.


Bu uygulama bir numaranın ustasıdır. İşin püf noktası, programın herhangi bir web sayfasındaki herhangi bir rengin Hex ve RGB değerlerini hızlı bir şekilde almanıza olanak sağlamasıdır. Favori web sitenizin hangi renkleri kullandığını Photoshop ve Damlalık aracını kullanmadan belirlemeniz gerekiyorsa bu özellik kullanışlı olabilir.

11.


Fonksiyonun kullanılması WebDüzenle ile herhangi bir sayfayı düzenlemeye uygun hale getirebilirsiniz (yaptığınız değişiklikler elbette kaydedilmeyecektir). Peki neden buna ihtiyacın var o zaman? Sebebi şu: Bir web sitesi oluşturuyorsanız ve önemli kod değişiklikleri yapmadan öğelerle oynamak istiyorsanız bu uygulama sizin için çok faydalı olacaktır.

12.


Hangi teknolojilerin, yapıların ve uygulamaların hangileri olduğunu hiç bilmek istediniz mi? açık kaynak belirli bir web sitesini mi kullanıyor? Deneyimli geliştiriciler bu sorulara çalışarak cevap verebilirler. kaynak, ancak cevaba daha hızlı ve daha kolay ulaşmak istiyorsanız Chrome Sniffer'ı deneyin. Chrome Sniffer, bir web sitesi tarafından kullanılan bilinen tüm javascript çerçevelerini/kitaplıklarını (jQuery, MooTools vb.) ve CMS'yi (Drupal, WordPress vb.) listeler.

13.
Göz Damlalığı herhangi bir web sayfasındaki rengi algılamanıza olanak tanıyan bir Google Chrome uzantısıdır. Ayrıca, program bir renk “tekerleği” ve renk örnekleri (herhangi bir yerde bulunabilir) sağlar. grafik programı), böylece istediğiniz rengi bulmak için renkleri deneyebilir ve değiştirebilirsiniz.

15.


İyi bir işaretlemeye sahip, düzgün bir şekilde oluşturulmuş bir web sayfası, sonuçta sayfanın arama motorlarında etkileyici sonuçlara sahip olmasını sağlar. Ancak web sitenizi bilinen arama motoru optimizasyonu parametrelerine göre değerlendirmek istiyorsanız, size çok çeşitli yararlı SEO değerlendirme araçları ve özellikleri sunan bir uzantı olan SEO Site Araçları'nı denemelisiniz. Sayfa içi ve dışı pek çok parametreyi okuyabilir, sosyal medyadan bilgi alabilir ve bunun gibi şeyleri yapabilir.

Farklı kullanıcı kategorileri için oluşturulmuş çeşitli sürümler vardır. Onlardan birine denir Google Chrome Geliştirici Sürümü. Bu ne tür bir versiyon ve neden gerekli? Bu konuda ve konuşacağız bu malzemede.

Chrome'un alternatif yapılarının uzun süredir ortaya çıktığını belirtmekte fayda var. Bu popüler tarayıcıya neredeyse lansman sürümünden itibaren eşlik ediyorlar. Ancak tüm kullanıcılar alternatif seçeneklere uygun değildir.

Gerçek şu ki, Chrome'un "diğer" yapıları şu veya bu alandaki profesyonellere yöneliktir: düzen tasarımcıları, test uzmanları, geliştiriciler vb. Bu tür tarayıcılar sıradan kullanıcılar için uygun değildir. Ama yine de bunları konuşmamız gerekiyor.

Chrome'un hangi sürümleri var?

Aslında sayıları pek fazla değil. Ancak stabil olan tek bir tane var. Kamuoyuna açıklanan da tam olarak bu. Herhangi bir kullanıcı bunu indirebilir. Ama alternatif versiyonları da var. Gelin onlara daha yakından bakalım.

Bunlar herkesin favori Google Chrome'un mevcut sürümleridir. Ancak bu bağlamda Developer Edition ile ilgileniyoruz. Bu nedenle her şeyin dikkate alınması gerekiyor ana Özellikler Daha fazla ayrıntı için bu sürüme bakın. Ancak o zaman bir sonuca varılabilir.

Geliştirici Sürümü Özellikleri

Bunun temel özelliği Google sürümleri Chrome, geliştirme araçlarının kullanılabilirliğidir. Bu web tarayıcısı için uzantılar ve eklentiler geliştirenler için faydalı olacaktır. Ortalama bir kullanıcı bu tür araçların içinde kaybolacaktır.

İkinci özellik gelişmiş konsoldur. Kodu düzenlemek ve etkinleştirmek için kullanılır gizli işlevler tarayıcı. Ancak bununla nasıl çalışacağınızı bilmeniz gerekir. Takımdaki en ufak bir hata çok vahim sonuçlara yol açabilir.

Başka bir "numara" ise, göç eden en son yeniliklerin hepsinin varlığıdır. bu versiyon Kanarya'dan. Bu sayede geliştiriciler uzantılarını yeni web tarayıcısı yetenekleri için optimize edebilirler.

Sık güncellemeler– Developer Edition'ın bir diğer ayırt edici özelliği. Düzensiz olarak gelirler, ancak en geç iki haftada bir kez. Bazı durumlarda güncellemeler iki gün içinde gelebilir. Bu, web tarayıcısının yeni özelliklerini test edenler için uygundur.

Çözüm

Yukarıda Google Chrome'un hangi sürümlerinin mevcut olduğundan bahsettik ve geliştiriciler için yapıyı ayrıntılı olarak tartıştık. Artık bu sürümün bir dizi araç ve gelişmiş bir konsolla ayırt edildiği açık.

Normal kullanıcıların Developer Edition'ı yüklemelerine hiç gerek olmadığını belirtmekte fayda var. Bundan hiçbir anlam çıkmayacak. Üstelik bu montaj özellikle stabil değildir. Geliştirici değilseniz Stable'ı kullanmak daha iyidir.

Çok sayıda ücretsiz uzantı var Google tarayıcısı Hayatınızı kolaylaştırmaya yardımcı olan Chrome. İşte en iyi 20 tanesi.

Bu makalede, farklı amaçlara yönelik en iyi Google Chrome uzantılarını sunuyoruz ancak her biri işinizi kolaylaştırmak için tasarlanmıştır.

Firefox, özelleştirmesi ve birçok uzantısıyla uzun zamandır ünlüdür ancak Google Chrome, son birkaç yılda web tasarımcıları ve geliştiricileri arasında da oldukça popülerlik kazanmıştır. Bunun nedenlerinden biri hızı ve yerleşik geliştirici araçlarıdır.

Artık her geçen gün genişleyen Chrome uzantıları koleksiyonunun gelişmesiyle birlikte, birçok web geliştiricisinin ve tasarımcısının kendileri için bu tarayıcıyı seçmesinin nedeni budur.

Bu konuda daha fazla bilgi edinmek ister misiniz? Listemize göz atın.

01. Chrome için iMacros

iMacros Chrome uzantısı, eylemlerinizi kaydetmenize ve saklamanıza olanak tanır.

Bir web geliştiricisi olarak web sayfalarınızı denetlemeniz gerekebilir. Aynı şeyleri tekrar tekrar yapmak sıkıcı bir süreç olabilir. iMacros, eylemlerinizi kaydetmenize ve kaydetmenize olanak tanıyan, eylemi yalnızca bir kez gerçekleştirmenizi gerektiren kullanışlı bir Chrome uzantısıdır.

Daha sonra tek bir düğmeye tıklayarak adımları tekrarlayarak sayfalarınızı tekrar tekrar kontrol edebilirsiniz. Bu, değerli zamandan tasarruf etmenizi sağlar ve daha önemli konulara odaklanmanıza olanak tanır.

02. Yazı Tipi Oyun Alanı

Font Playground, canlı web sayfalarında yerel yazı tiplerini denemenize olanak tanır.

Her tasarımcı ve geliştirici bu uzantıda pek çok yararlı şey bulacaktır. Font Playground, sayfaların kendisinde herhangi bir değişiklik yapmadan, etkin web sayfalarındaki yerel yazı tiplerini ve tüm Google yazı tipi kitaplıklarını denemenize olanak tanır.

Bu uzantının iyi yanı, olası tüm yazı tipi boyutlarını, stillerini ve efektlerini içermesidir. Kodda herhangi bir gerçek değişiklik yapmadan önce ilk olarak farklı yazı tipi seçeneklerini görselleştirebilirsiniz.

03. Hangi Yazı Tipi

Hangi yazı tipini kullanıyorlar? What Font Chrome uzantısı size bunu gösterebilir!

Google Chrome için çok kullanışlı bir uzantı olan What Font, geliştiricilerin ve tasarımcıların bir web sayfasında hangi yazı tiplerinin kullanıldığını belirlemesine olanak tanır.

Yani, internette harika görünen bir yazı tipiyle karşılaşırsanız ve onu gelecekteki projelerinizden birinde kullanmak isterseniz, üzerine gelin ve ne olduğunu anında anlayacaksınız.

04. Yavaş

YSlow size sayfayı neyin yavaşlattığını söyleyecektir.

Bu araçla, yalnızca bir web sayfasının ne kadar hızlı yüklendiğini kontrol edemezsiniz, aynı zamanda onu yavaşlatan herhangi bir şey olup olmadığını da gösterir.

YSlow, web sayfalarını Yahoo ekibi tarafından geliştirilen 34 performans kuralından 23'üne göre test eder. Bu son derece kullanışlı araç Performanslarını optimize etmenin yollarını da öneren web sayfalarını analiz etmek.

05. Web Geliştiricisi

Chrome Web Developer uzantısı, geliştiriciler için bir dizi yararlı araç sağlar.

Eğer bir web geliştiriciyseniz kendinize şu soruyu sorabilirsiniz: Bu uzantı olmadan şu ana kadar nasıl başardınız? Chrome'un web geliştiricileri için birçok yararlı araca erişmesini sağlayan bir araç çubuğu düğmesi ekler.

Bu Resmi sürüm Firefox için geliştirilmiş Web Developer uzantısı.

06. Web Geliştirici kontrol listesi

Bu kullanışlı Chrome aracındaki performans sorunlarını giderir.

Bu araç, sayfalarınızın SEO uyumluluğu, kullanılabilirlik uyumluluğu, görünürlüğü ve performansından (sayfa yükleme hızı) kadar her şeyi kontrol etmenize olanak tanır.

Yani, örneğin bir H1 etiketini kaçırdıysanız veya bir sayfada meta başlık veya meta açıklama eksikse, Web Geliştirici kontrol listesi uzantısı sizi bu konuda bilgilendirir.

Böylece bu sorunu hızlı bir şekilde çözebilirsiniz. "Linke tıklarsanız daha fazla bilgi ve yardım» Uzantının alt kısmında daha ayrıntılı bir liste bulacaksınız.

07. DevTools Otomatik Kaydetme

Sayfa kaynak dosyalarındaki (CSS ve JS) değişiklikleri otomatik olarak kaydeder.

Tüm geliştiriciler için gerçek bir hazine olan DevTools Otomatik Kaydetme, bir sayfanın CSS ve JS kaynak dosyalarında yapılan değişiklikleri Chrome Geliştirme Araçları ortamı aracılığıyla otomatik olarak kaydetmenize olanak tanır. Uzantının kurulumu ve kullanımı kolaydır ve size çok zaman kazandıracaktır.

08. Anında Tel Çerçeve

Web sayfalarının tel çerçevelerini görüntülemenizi sağlar.

Herhangi bir web sayfasının tel kafes görüntülemesini tek tıklamayla bağlayın. Bu Google Chrome uzantısı, web geliştiricilerinin ve tasarımcılarının yerel veya çevrimiçi yayınlanmış web sayfalarını tel çerçeve kaplamasıyla görüntülemesine yardımcı olur.

09. Dalgalanma Emülatörü

Ripple Emulator, web sayfası hata ayıklamasına, DOM incelemesine ve otomatik testlere yardımcı olur.

Ripple Emulator, web uygulamanızı test etmenize yardımcı olacak çok platformlu bir mobil ortam emülatörüdür. çeşitli cihazlar ve ekran çözünürlükleri.

Ripple Emulator uzantısı, hata ayıklama, DOM denetimi ve otomatik test için mevcut geliştirme araçlarıyla birlikte kullanılabilir.

10. Seri

E-posta konuşmalarını tek destek bildiriminde izleme, görevleri atama.

Streak ana CRM ve destek aracıdır E-posta Gmail.

Uzantı, tüm e-posta kutularınızı tek bir kutuda birleştirmenize veya mesaj alışverişlerinin takibini tek bir bilette organize etmenize, karşı taraflarınızla iletişim sürecini kişisel olarak yönetebilmeniz veya diğer kişilerin buna erişim sağlaması için görevler atamanıza olanak tanır.

11. Stackoverflow'ta arama yapın

Mutlaka kullanılması gereken bu uzantıyla sorularınıza hızlı yanıtlar alın.

Bir web geliştiricisiyseniz, birçok geliştiricinin web projelerinin geliştirilmesiyle ilgili çeşitli sorular için başvurduğu bir yer olan Stack Overflow'u duymuş olmalısınız. Değilse, kesinlikle onu tanımanız gerekir. C# ve Java'dan PHP ve JQuery'ye kadar çok çeşitli konuları kapsayan, gerçekten gelişen bir topluluktur.

Bu harika uzantı doğrudan tarayıcınıza bir arama kutusu ekler ve Stack Overflow'un geniş kaynaklarından yararlanmanıza olanak tanır. Mutlaka kullanılması gereken bir eklenti!

12. PHP Ninja Kılavuzu

PHP 5.5'e ilişkin tüm belgeler tarayıcınızda.

Her işlevi hatırlamak gerçekten zordur, bu nedenle geçmişte Google aracılığıyla belirli PHP işlevlerini aramak için uzun saatler harcadıysanız, bu uzantı kesinlikle dikkatinizi çekecektir. PHP Ninja Kılavuzu şunları sağlar:

PHP 5.5 için tüm belgeleri alacaksınız somut örnekler tarayıcınızda sekiz dilde.

13. Mükemmel Piksel

Bu uzantı, sitenizdeki her pikselin tasarımla eşleştiğinden emin olmanıza yardımcı olacaktır.

Tasarımcılar harika bir tasarım oluşturduklarında, ancak bunu koda dönüştürdükten sonra bir şeyin orijinal tasarımla eşleşmediği durumlardan nefret ederler. Perfect Pixel işlemci, tasarıma uygun siteler oluşturmaya çalışan web geliştiricileri için gerçekten mükemmel bir uzantıdır.

Bu kullanımı kolay uzantı, bir web sayfasının üstüne yarı şeffaf bir görüntü katmanı yerleştirmenize ve yüzde 100 eşleşmeyi sağlamak için piksel piksel eşleşme kontrolü yapmanıza olanak tanır.

14. Kola Kodu

Web sayfası CSS'sini yerinde düzenlemenizi sağlar.

Bu araç yalnızca üzerinde çalıştığınız kaynak kodunu görüntülemenize olanak sağlamakla kalmaz, aynı zamanda bir CSS düzenleyici olarak da çalışabilir. Bu, web sayfalarınızın CSS stilini anında düzenleyebileceğiniz ve değişikliklerin sonuçlarını anında görebileceğiniz anlamına gelir.

15. Krom Algılayıcı

Web uygulamalarının ve JavaScript kitaplıklarının incelenmesi.

Bu uzantı, web geliştiricilerinin web uygulamalarını ve belirli bir projeye eklenen JavaScript kitaplıklarını incelemesine ve tanımlamasına olanak tanır. Uzantı mümkün olduğu kadar basit çalışır: adres çubuğunda, kullanılan çerçevenin veya CMS'nin sürümünü belirten bir simge görünür.

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

Sitenizin farklı cihazlarda nasıl göründüğünü kontrol edin.

Bir web sitesinin nasıl göründüğünü görmek için harika bir araç çeşitli türler iPad, iPhone veya Android cihazları gibi cihazlar. Bu aynı zamanda sitenin arama motorlarının gördüğü şekilde görülmesi açısından da çok yararlı olabilir.

Google Chrome hakkında ne duymuş olursanız olun, ne zaman Hakkında konuşuyoruz Web tasarımı ve geliştirme konusunda Firefox hâlâ bulabileceğiniz kullanıcı dostu geliştirme ortamına sahip en iyi tarayıcıdır.

Heck, Firefox'un yalnızca web geliştiricileri için tasarlanmış özel bir tarayıcı sürümü bile var. Mozilla web tasarımcılarına ve geliştiricilerine bu kadar önem veriyor.

Firefox ayrıca tarayıcıyı maksimum etki için daha güçlü hale getiren geniş bir uzantı koleksiyonuna da sahiptir. Web geliştirme hayatınızı kolaylaştırmak için kullanabileceğiniz en iyi Firefox uzantılarından bazılarını burada bulabilirsiniz.

Bu uzantıların çoğunu yükleyin, test edin ve kullanın. Sonuçta hepsinin kullanımı ücretsiz!

  • Ne yapar: Web sayfalarını denetler

Firebug, web tasarımcılarının ve geliştiricilerinin onsuz yaşayamayacağı bir uzantıdır. Bu uzantı, Firefox ile birlikte gelen entegre geliştirici konsolunun geliştirilmiş bir sürümü gibidir. Firebug, web sayfalarındaki öğeleri incelemenizi ve farklı sitelerde işlerin nasıl yürüdüğünü göstermenizi çok daha kolaylaştırır.

  • Uygun olanlar: web geliştiricileri
  • Ne yapar: Firefox istemcisi

FireFTP, Firefox için, bilgisayarınız ile sunucu arasında dosyaları doğrudan tarayıcınızdan güvenli bir şekilde yüklemenize ve aktarmanıza olanak tanıyan bir FTP/SFTP istemcisidir. Bu eklentiyle artık tarayıcınız ile FTP istemci uygulamalarınız arasında geçiş yapmak zorunda kalmayacaksınız.

  • Uygun olanlar: web geliştiricileri ve tasarımcıları
  • Ne yapar: web sayfalarını analiz eder ve kontrol eder

Firefox'unuza bir dizi yararlı araç ekleyen hepsi bir arada bir uzantıdır. Bu eklentide yer alan araçlardan bazıları CSS stil sayfalarını görüntüleme ve düzenleme, stilleri devre dışı bırakma, hata ayıklama araçları vb.'dir.

  • Ne yapar: Renk analiz aracı

ColorZilla, ön uç web tasarımcılarının oldukça faydalı bulacağı harika bir araçtır. Bu eklenti, bir web sayfasındaki renkleri hızlı bir şekilde seçmek için bir damlalık, bir CSS degrade oluşturucu, bir renk analizörü, renk paletleri ve çok daha fazlasını içerir.

  • Uygun olanlar: web geliştiricileri
  • Ne yapar: Web sitelerini özel kodla değiştirin

Bir milyondan fazla Firefox kullanıcısı tarafından sevilen Greasemonkey, size sonsuz eğlence sunacak bir eklentidir. Bu eklenti, popüler web sitelerini kendi JavaScript kodunuzu kullanarak düzenleyerek özelleştirmenize olanak tanır. Ayrıca diğer geliştiriciler tarafından oluşturulmuş komut dosyalarının da keyfini çıkarabilirsiniz.

  • İçin en iyisi: Arayüz tasarımcıları
  • Ne yapar: Web öğelerinin uzaklığını ayarlar

Web öğelerini incelemenize ve öğelerde kaç pikselin kapalı olduğunu görsel olarak görmenize, şeffaf katmanlardan oluşan bir kompozisyon oluşturmanıza olanak tanıyan basit ama kullanışlı bir eklenti. Bu kompozisyonu kullanarak, gerçek web sayfanızı herhangi bir tahmine gerek kalmadan en iyi sonucu elde etmek için kaplamayla eşleşecek şekilde ayarlayabilirsiniz.

Örneğin, web sayfanızdaki görsellerden biri başka bir nesneyle örtüşüyorsa, Pixel Perfect'i kullanarak o görseli doğru yere yerleştirmek için kaç piksel ayarlamanız gerektiğini belirleyebilirsiniz.

  • Uygun olanlar: web tasarımcıları
  • Ne yapar: Bir web sayfasındaki her şeyi yükler

Bu eklenti, bir web sayfasından her şeyi indirmenize izin vererek ismine yakışır. Bu uzantıyı kullanarak bir web sayfasında yer alan tüm görselleri, bağlantıları ve diğer verileri tek tıklamayla indirebilirsiniz. Eklenti ayrıca indirme hızını dört kat optimize eden yerleşik bir indirme hızlandırıcısına da sahiptir.

  • İçin en iyisi: Arayüz tasarımcıları
  • Ne yapar: Internet Explorer'da web sayfalarını kontrol edin

İster inanın ister inanmayın, hala eskilerini kullananlar var İnternet sürümleri Internet'e erişmek için Explorer. Bu eski tarayıcılarda iyi çalışan siteler oluşturmak, web tasarımcılarının hâlâ uğraştığı sorunlardan biridir. Bu eklenti, web tasarımlarını eski kullanıcılar için özelleştirmeyi kolaylaştırır İnternet tarayıcıları Explorer, IE'de yeni bir sekme oluşturuyor.

  • Uygun olanlar: web tasarımcıları ve geliştiricileri
  • Ne yapar: Web sitesinde kullanılan teknoloji hakkında size bilgi verir

Favori web sitelerinizi oluşturmak için hangi teknolojilerin kullanıldığını mı merak ediyorsunuz? O zaman bu eklenti işinize yarayacaktır. BuildWith, sayfada hangi teknolojilerin kullanıldığını bulmak için web sitelerini taramanıza olanak tanıyan bir uzantıdır. Tüm istekli web tasarımcılarının hazır web sitelerinden öğrenebileceği harika bir araç.

  • Uygun olanlar: web geliştiricileri
  • Ne yapar: Java'yı açar veya kapatır

Bu eklenti, tarayıcınızda Java'yı kolayca etkinleştirmenize veya devre dışı bırakmanıza olanak tanır. Ayrıca web sayfasındaki Javascript'i, Çerezleri, animasyonlu görselleri, Flash'ı ve daha fazlasını devre dışı bırakabilir. Bu sadece geliştiriciler için değil aynı zamanda geliştiriciler için de yararlı bir eklentidir. sıradan kullanıcılar tarayıcı güvenliğini artırmak ve bant genişliğini azaltmak için.

  • İçin en iyisi: Arayüz tasarımcıları
  • Ne yapar: Öğeleri piksel cinsinden ölçer

Bu eklentinin işlevi basittir; web sayfasındaki öğenin genişliğini, yüksekliğini veya piksel hizalamasını ölçmek için bir web sayfasının veya sayfadaki bir öğenin üstüne sanal bir cetvel çizmenize olanak tanır. MeasureIt çoğu ön uç geliştiricinin tel çerçeveler oluşturması için kullanışlıdır.

  • Uygun olanlar: web tasarımcıları
  • Ne yapar: tarayıcıdaki dili değiştirir

Bu, Firefox'unuzu anında başka bir dile çeviren kullanışlı bir araçtır. Dahil olmak üzere tarayıcınızdaki her şey Kullanıcı arayüzü, yazım denetimi sözlüğü ve web sitesi içeriği seçtiğiniz dile çevrilecektir. Çok dilli web siteleri geliştirirken kullanabileceğiniz harika bir özellik.

  • İçin en iyisi: Arayüz tasarımcıları
  • Ne yapar: sahte metin oluşturmak

Yeni web sitenizin maketleri ve prototipleri için sahte metinler oluşturmak, tek bir tasarımcının bile eğlenmesi muhtemel olmayan sıkıcı bir iştir. Bu uzantı, doğrudan Firefox'tan Lorem Ipsum sahte metni oluşturmanıza olanak sağlayarak süreci daha az sıkıcı hale getirir.

  • Uygun olanlar: web geliştiricileri
  • Ne yapar: Çerezleri düzenler ve oluşturur

Bu eklenti yalnızca sitenizin çerezlerini yönetmekle kalmaz, aynı zamanda kolayca düzenlemenize ve yeni dosyalar oluşturmanıza da olanak tanır. Eklentinin özelliklerinden bazıları satır içi taramayı içerir kurabiye, alan adını değiştirme yeteneği, birden fazla çerezi aynı anda düzenleme yeteneği ve çok daha fazlası.

  • İçin en iyisi: Arayüz tasarımcıları
  • Ne yapar: Bir web sayfasındaki renkleri seçer

Bir web sayfasındaki herhangi bir pikselin renklerini seçmenize ve kendi projelerinizde kullanmak üzere RGB veya Hex renk kodunu kolayca kopyalamanıza olanak tanıyan, kullanımı kolay bir araç. Bu aracın güzelliği ve görsel arayüzü, yeni başlayanların web sayfalarındaki renkleri öğrenmesini çok daha kolay hale getiriyor.

  • Uygun olanlar: web tasarımcıları ve geliştiricileri
  • Ne işe yarar: Web sitesinin kullandığı yazılım hakkında bilgi verir

BuildWith eklentisine benzer şekilde Wappalyzer, neyin ne olduğunu bulmanızı sağlayan başka bir kullanışlı uzantıdır. yazılım web sitesinde kullanılır. Örneğin, sitenin ne tür CMS kullandığını, web sitesi sunucusunun hangi işletim sistemini desteklediğini ve çok daha fazlasını öğrenebilirsiniz.

  • Uygun olanlar: web geliştiricileri
  • Ne yapar: Tarayıcı kullanıcı aracısını değiştirir

Web sitenizin farklı platformlarda ve işletim sistemlerinde nasıl görüneceğini bilmek ister misiniz? O zaman bu kesinlikle işinize yarayacak bir araçtır. User-Agent Switcher, Android, Mac, Windows gibi farklı platformlar arasında geçiş yapmanıza ve tarayıcınızın kullanıcı aracısını değiştirmek için işletim sistemlerini seçmenize olanak tanır.

  • Uygun olanlar: web tasarımcıları ve geliştiricileri
  • Ne yapar: Tarayıcının bellek sekmesinin kullanımına ilişkin bir örnek gösterir

Bu, Firefox'taki her açık sekme tarafından bilgisayarınızın kaynaklarının ne kadarının kullanıldığını belirlemenize yardımcı olacak kullanışlı bir eklentidir. Sitenizin ne kadar kaynak kullandığını öğrenmek ve sitenizi maksimum performans için optimize etmek için bu aracı kullanabilirsiniz.

  • Uygun olanlar: web ve grafik tasarımcıları
  • Ne işe yarar: Görüntüleri Photoshop'ta açar

Bu eklenti adından da anlaşılacağı gibi, bir web sayfasında bulduğunuz görselleri tek tıklamayla açar. Photoshop'u kullanma. Bir görüntü yüklemenize veya Photoshop'u başlatmanıza gerek yok; uzantı ihtiyacınız olan her şeyi yapacaktır.

  • İçin en iyisi: Arayüz tasarımcıları
  • Ne yapar: HTML tablolarını iyileştirir

Grafikler, istatistikler, karşılaştırmalar, tablolar; bu eklenti hepsini yapabilir. Kullanıcı dostu ve güzel HTML tabloları ve diyagramları oluşturmak için bu aracı kullanabilirsiniz.

  • Uygun olanlar: web geliştiricileri
  • Ne yapar: Firefox için SSH istemcisi

Genellikle SSH terminalini çalıştırmak için bir uygulama yüklemeniz gerekir. Bu uygulamalar bir noktada farklılık gösteriyor işletim sistemi bir diğerinden. Ancak FireSSH, Firefox'unuz olduğu sürece tüm platformlarda çalışır. Uzantı, bir SSH terminalini doğrudan tarayıcıdan başlatmanıza olanak tanır.

  • İçin en iyisi: Arayüz tasarımcıları
  • Ne yapar: Web sayfalarını otomatik olarak yeniler

Web tasarımcılarının web sitesi geliştirirken karşılaştığı can sıkıcı şeylerden biri, kodda yapılan her küçük değişiklikten sonra web sayfasını manuel olarak güncellemek zorunda kalmaktır. Otomatik Yenileme, Firefox'ta bir veya daha fazla sekmeyi tanımladığınız aralıklarla otomatik olarak yenilemenize olanak tanıyarak bu sorunu çözen bir uzantıdır.

  • İçin en iyisi: Arayüz tasarımcıları
  • Ne yapar: Belirli ekran çözünürlükleri için Firefox pencerelerini yeniden boyutlandırır

Bu eklenti, web sitenizin farklı ekranlarda nasıl göründüğünü görmek için Firefox pencerenizi belirli çözünürlüklerde yeniden boyutlandırmanıza olanak tanır. Bu uzantının düzgün çalışması için Firefox Eklenti Çubuğunu yüklemeniz gerekecek.

  • Uygun olanlar: web tasarımcıları ve geliştiricileri
  • Ne yapar: sayfanın yazı tipleri ve öğeleri hakkında bilgi bulur

Font Finder, web sitesi öğelerini inceleyerek bunların ne anlama geldiğini bulmanızı sağlayan kullanışlı bir araçtır. önemli bilgi Yazı tipi ailesi adı, yazı tipi rengi, satır aralığı, dekorasyon ve daha fazlası gibi sayfada kullanılan yazı tipleri hakkında.

  • İçin en iyisi: Arayüz tasarımcıları
  • Ne yapar: farklı tarayıcılardaki web sayfalarını kontrol eder

Bu eklentinin işlevi basittir. Firefox'ta görüntülediğiniz herhangi bir web sayfasını başka bir tarayıcı kullanarak tek tıklamayla anında açmanıza olanak tanır. Web sitesini açmak için URL'leri kopyalamanıza, her tarayıcıyı tek tek açıp URL'leri yapıştırmanıza gerek yoktur.

  • Uygun olanlar: web tasarımcıları ve geliştiricileri
  • Ne yapar: tarayıcı önbelleğini temizler

Bu eklenti önbelleği anında temizler Firefox tarayıcısı(RAM ve DİSK) bilgisayar kaynaklarının kullanımını azaltmak için. Uzantı, yalnızca bir düğmeye tıklayarak veya klavyenizdeki F9 tuşuna basarak önbelleği temizlemenizi sağlar. Bir web sayfasında yapılan değişiklikleri hızlı bir şekilde görüntülemek istiyorsanız bu eklenti çok işinize yarayacaktır.

Google Chrome tarayıcısının popülaritesinin artmasıyla birlikte, web geliştiricilerine hataları ve site performansı sorunlarını izleme olanağı vererek zamandan tasarruf sağlayan uzantılar ortaya çıkıyor.

İşte Google Chrome için bazı yararlı uzantılar.

Web Geliştirici Uzantısı

Bir web geliştiricisi ve web tasarımcısı için en kullanışlı ve güçlü aracı belirtmek isterim - Google Chrome için Web Geliştirici uzantısı.

Uzantı, Google Chrome araç çubuğuna dişli simgeli bir düğme biçiminde eklenir ve bir web sitesini geliştirmek ve hata ayıklamak için çeşitli araçlar içerir. Bu, aynı geliştirici tarafından yazılan popüler olanın resmi uyarlamasıdır.

Uzantının çok sayıda seçeneği var.

Örneğin, birçok insanın ihtiyacı var elementin rengini öğrenin monitör ekranında onaltılık formatta. Bu amaçla eklentide özel fonksiyon. Çeşitli bölümünde Renk Seçiciyi Görüntüle'yi seçin.

Renk Seçiciyi Görüntüle seçildiğinde imleç çarpı işaretine dönüşür. Artık tarayıcının sağ alt köşesindeki ekranın herhangi bir alanına tıkladığınızda, CSS'de kullanılmak üzere renk onaltılık olarak görüntülenir.






Tepe