Çarşamba 22 Mart 2023
Hakkında
Yazarlarımız
Reklam
Künye
İletişim
Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı

Bülten

Sosyal Medya Yasası Kabul Edildi

Binance ‘e Siber Saldırı

Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı
  • BAŞLARKEN
    • KOD
      • PHP
      • Asp.Net
      • Swift
      • MySQL
      • CMS
  • TASARIM
    • İpuçları
    • Çizim
    • Illustrator
    • Photoshop
    • Trendler
  • ARAYÜZ
    • JavaScript
    • HTML5
    • CSS
    • REACT
  • İPUÇLARI
    • API
    • Güvenlik
    • IDE
    • Framework
    • OS
    • Verimlilik
    • İçerik
      • Dökümantasyon
      • İpuçları
      • Nasıl Oluşturulur?
  • KAYNAKLAR
    • Tasarım
    • Kod
    • İş
  • GİRİŞİM
    • Finans
    • Girişimci
    • Nasıl yapılır?
  • ARAÇLAR
  1. Anasayfa
  2. İpuçları
  3. Bilmeniz gereken 7 yararlı Firefox Developer aracı
 Bilmeniz gereken 7 yararlı Firefox Developer aracı
İpuçları Verimlilik

Bilmeniz gereken 7 yararlı Firefox Developer aracı

Yazar : Fatih 19 Aralık 2016 0 Comment

İçindekiler

  • 1.JavaScript kodu çalıştırma

  • 2.Farklı ekran boyutlarında önizleme

  • 3.Bir request’e repsonse önizleme

  • 4.Sayfa düzenini 3D olarak görüntüle

  • 5.Web sayfalarından renk seçme

  • 6.Cetvel görüntüleme

  • 7.Sayfadaki CSS stilini gizle

Firefox’un “Geliştiricinin Tarayıcısı” olma özelliği, çalışmalarımızı kolaylaştıracak çok sayıda mükemmel araçlara sahiptir. Bu yazımızda, geliştirici araçları koleksiyonundan 7 kullanışlı araçları listeledik. Bu araçları gif’lerle neler yapabileceğini ve hızlı bir şekilde nasıl erişilebileceğini de gösterdik. Keyifli okumalar.

1.JavaScript kodu çalıştırma

Firefox‘un Karalama Defteri(Scratchpad)ni kullanarak herhangi bir web sayfasında basit ve hızlı bir şekilde JavaScript kodları çalıştırabilirsiniz.

Menüden Karalama Defteri(Scratchpad)ne ulaşmak için; ☰ > Geliştirici(Developer) > Karalama Defteri(Scratchpad) adımlarını izleyebilir. Kısayolu Shift + F4 dir.

webmaster-kitchen-scratchpad

2.Farklı ekran boyutlarında önizleme

Bir web sayfasının cevaplanabilirliğini yani farklı ekran boyutlarından Responsive Tasarım Görünümü(Responsive Design View)nü test etmek için; ☰ > Geliştirici(Developer) > Responsive Tasarım Görünümü(Responsive Design View) adımlarını uygulayarak web sitesinin nasıl gözüktüğünü gözlemleyebilirsiniz. Kısayolu Ctrl + Shift + M dir.

webmaster-kitchen-responsive

3.Bir request’e repsonse önizleme

Firefox geliştirici araçları(Firefox developer tools), HTML içerik türü yanıtlarını önizleme seçeneği vardır. Şöyle açalım HTML sayfaları programladığımız zaman request ve response özellikleri kazanabilir. Bir sayfadan bir sayfaya veri göndermek ve sayfanın isteklere cevap vermesi gibi düşünebiliriz. Bu araç sayesinde sayfanızda nasıl aksiyonlar olduğunu görebilirsiniz.

webmaster-kitchen-preview

Menü aracılığıyla erişmek için ☰ > Geliştirici(Developer) > Ağ(Network) açtıktan sonra bulunduğumuz sayfadan istek(request) yaptığımız da bize nasıl cevaplar(responses) döndüğünü eş zamanlı olarak önizleme yapabiliriz. Kısayolu Ctrl + Shift + Q dir.

4.Sayfa düzenini 3D olarak görüntüle

Web sayfalarını 3D olarak görüntüleme, düzen problemlerine yardımcı olur. Farklı katmanlı öğeleri 3D görünümde çok daha açık bir şekilde görebilirsiniz. Web sayfasını 3D olarak görüntülemek için 3D Görünüm(3D View) araç düğmesini tıklayın.

webmaster-kitchen-3d-view

Bunu geliştirici araçları penceresinde görünmesini sağlamak için Araç Kutusu Seçenekleri(Toolbox Options)ni tıklayın ve Kullanılabilir Araç Kutusu Düğmeleri(Available Toolbox Buttons) bölümünün altında 3D Görünüm(3D View) onay kutusunu işaretleyin.

5.Web sayfalarından renk seçme

Firefox, Damlalık(Eyedropper), adı altında yerleşik bir renk seçici aracına sahiptir. Damlalık(Eyedropper) aracına menü aracılığıyla erişmek için ☰> Geliştirici(Developer)> Damlalık(Eyedropper) bölümüne gidip ulaşabilirsiniz.

webmaster-kitchen-colorpicker

6.Cetvel görüntüleme

Firefox, sayfadaki piksel birimleri ile hem yatay hem de dikey cetvelleri görüntüleyen bir cetvel aracına sahiptir. Öğelerinizi sayfa boyunca düzenlemenizde kullanışlıdır.

Cetvellere menü aracılığıyla erişmek için şu adrese gidin: ☰> Geliştirici(Developer)> Geliştirici Araç Çubuğu(Developer Toolbar)(Kısayol: Shift + F2) Araç çubuğu sayfanın alt kısmında göründüğünde “rulers” yazın ve Enter tuşuna basın. Cetvelleri kaldırmak için aynı işlemi tekrarlamanız gerekmektedir.

webmaster-kitchen-rulers

Geliştirici araçları penceresinde görünmesini sağlamak için, Araç Kutusu Seçeneklerine(Toolbox Options) gidin. Kullanılabilir Araç Kutusu Düğmeleri(Available Toolbox Buttons) bölümünün altında Sayfa cetvellerini aç/kapat(Toggle rulers for the page) onay kutusunu işaretleyin.

7.Sayfadaki CSS stilini gizle

Bir web sayfasında uygulanan herhangi bir CSS stilini (inline, internal or external) kaldırmak için, Stil Editörü(Style Editor) sekmesinde listelenen stil sayfalarının göz simgesine tıklamanız yeterlidir. Orijinal görünüme dönmek için tekrar tıklayın.

Menü aracılığıyla Stil Editörüne(Style Editor) erişmek için ☰> Geliştirici> Stil Editörü(Style Editor)’ne gidin.(Kısayol: Shift + F7)

webmaster-kitchen-disable-stylesheet

Webmaster Mutfak ekibi olarak sizler için “Firefox Araç Koleksiyonu“ndan birkaçını derledik, “Firefox Geliştirici Araçları” web sayfasından daha fazla bilgi bulabilirsiniz ve test etmek için daha fazla özellik ve araçlara sahip olan “Geliştirici Sürümü Tarayıcısı“nı deneyebilirsiniz.

Bu yazımızla alakalı yorumlarınızı aşağıdaki yorum bölümüne aktarıp bizimle etkileşim kurabilirsiniz. Umarım faydalı olmuştur. Herkese iyi çalışmalar diliyorum.

İşin mutfağını öğrenmek herkesin hakkı.. Webmaster Mutfakta işin mutfağını öğrenin.  😉

Etiketler: 3D Görünüm 3D View CSS gizleme CSS stil kaldırma CSS style disable developer firefox firefox browser firefox developer firefox developer edition firefox developer tools firefox tarayıcısı front end developer javascript kodu çalıştır responsive görünüm tarayıcıya cevtel ekleme
Önceki Yazı
Sonraki Yazı

Fatih

author

Yorum Yap Yorumu İptal Et.

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Taze Yazılar
Güncel

Sosyal Medya Yasası Kabul Edildi

14 Ekim 2022
Blockchain

Binance ‘e Siber Saldırı

8 Ekim 2022
Blockchain

Binance ‘den Ücretsiz Eğitim

5 Ekim 2022
Güncel

Japonya için Yenilenen Corolla

4 Ekim 2022
© 2021 Webmaster Kitchen. Tüm Hakları Saklıdır.