Ç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 10 Yararlı Firefox Geliştirici Araçları
 Bilmeniz Gereken 10 Yararlı Firefox Geliştirici Araçları
İpuçları Verimlilik

Bilmeniz Gereken 10 Yararlı Firefox Geliştirici Araçları

Yazar : Bilal UÇAR 28 Mart 2017 0 Comment

İçindekiler

  • 1. Yatay ve dikey cetvelleri görüntüleyin

  • 2. CSS seçicilerini kullanarak ekran görüntüleri alın

  • 3. Web sayfalarından renk seçme

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

  • 5. Tarayıcı stilini görüntüleme

  • 6. Geçerli oturum için JavaScript’i devre dışı bırakın

  • 7. CSS stilini sayfadan gizle

  • 8. Bir isteğe HTML içeriğinin yanıtını önizleme

  • 9. Farklı ekran boyutlarında web sayfasını önizleyin

  • 10. JavaScript’i sayfalarda çalıştırın

Firefox‘un geliştiriciler için çok sayıda işinizi kolaylaştıracak araçlara sahip olduğunu daha önceden duymuş muydunuz? Bu araçları keşfettiğimde çok şaşırmıştım. Sizin de bu araçları çok seveceğinizi düşünüyorum.

Araç koleksiyonları hakkında daha fazla bilgiye Firefox Geliştirici Araçları web sitesinden ulaşabilirsiniz. Hatta şu anda test edilen daha fazla özellik ve araçlara sahip olan Developer Edition tarayıcısını deneyebilirsiniz.

Bu yazıda geliştirici araçları koleksiyonundan seçtiğimiz 10 kullanışlı aracı listeledik. Bu araçları GIF’lerle neler yaptığını ve hızlı bir şekilde nasıl kullanabileceğinizden bahsettim.

1. Yatay ve dikey cetvelleri görüntüleyin

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


Cetvel aracını kullanabilmeniz için: sağ üst köşede bulunan ☰ menüye basın. Ardından Geliştirici > Geliştirici Araç Çubuğuna tıklayarak veya kısayol olarak Shift + F2 ‘yi kullanabilirsiniz. Alta gelen komut satırı gibi çubuğa rulers yazıp Enter tuşuna basın.

Bu özelliğin Geliştirici Araçları kutusunda görünmesini sağlamak için öncelikle aşağıda açılan çubuğun yanındaki Anahtar simgesine tıklayın. Açılan Geliştirici araçları seçeneklerinin sağ üstünde bulunan Ayarlar butonuna basın açılan bölümde Sayfanın cetvellerini aç / kapat” tikini aktif ederek Geliştirici Araçlarında görünmesini sağlayabilirsiniz.

2. CSS seçicilerini kullanarak ekran görüntüleri alın

Bu araç sayesinde tam sayfanın veya görünen belli bir bölümün ekran görüntüsünü almanıza yarar. CSS seçici yöntemi ile tek tek öğelerin ekran görüntülerinin yakalamanın yanında yalnızca fareyle üzerine gelince çıkan (menü gibi) öğeler için de kullanılabiliyor.


CSS seçici aracını kullanabilmeniz için: sağ üst köşede bulunan ☰ menüye basın. Ardından Geliştirici > Geliştirici Araç Çubuğuna tıklayarak veya kısayol olarak Shift + F2 ‘yi kullanabilirsiniz. Alta gelen komut satırı gibi çubuğa screenshot –selector (buraya fotoğrafını almak istediğiniz yerin id değerini) yazıp Enter tuşuna basın.

Bunun daha iyi oturması için küçük bir örnek vermek istiyorum. Örneğin sitemizin sağında bulunan Bunları da beğenebilirsin kısmının fotoğrafını almak istiyorsunuz. Bu kısmın başlığına sağ tıklayıp öğeyi incele dediğinizde karşınıza html kodları çıkacaktır. Oradaki vce_posts_widget-12 idsini göreceksiniz. Bunu screenshot –selector vce_posts_widget-12 şeklinde yazıp Enter tuşuna bastığınızda bu bölümün resminin bilgisayarınıza kaydedildiğini görebilirsiniz.

3. Web sayfalarından renk seçme

Gelelim benim en sevdiğim özelliğe. Bir renk beğendiniz ve bu rengin kodunu öğrenmek istiyorsunuz. Harici hiçbir yazılım kurmadan Firefox’ta bulunan bir araca bu özelliği kullanabiliyorsunuz. Yapmanız gereken ☰> Geliştirici> Damlalık seçeneğini seçmek ve istediğiniz bölüme farenizi sürüklemek.

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

Web sayfalarını 3D olarak görüntülemek, 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” araç düğmesini tıklayın.


Bunun geliştirici araçları penceresinde görünmesini sağlamak için “Araç Kutusu Seçenekleri” ni tıklayın ve “Mevcut Araç Kutusu Düğmeleri” bölümünün altında “3D Görünüm” onay kutusunu işaretleyin.

5. Tarayıcı stilini görüntüleme

Tarayıcı Stilleri iki türden oluşur: bir tarayıcı tarafından her öğe için atanan varsayılan stil ve sitenin kendi CSS’i. Bu ayarları Denetçi ‘den görebilirsiniz.


“Tarayıcı stilleri” menüsüne erişmek için ☰> Geliştirici> Denetçi ‘ye gidin. Sonra sağ bölümdeki “Hesaplananlar” sekmesini tıklayın ve “Tarayıcı stilleri” onay kutusunu işaretleyin.

Ayrıca, “Denetçi” sekmesini Ctrl + Shift + C kısayolunu kullanarak açıp “Tarayıcı stilleri” ne erişebilirsiniz.

6. Geçerli oturum için JavaScript’i devre dışı bırakın

Bazı testler yapılırken sayfanın JavaScript’siz hali görülmek istenebilir. Bu tür ortamları test etmek için, çalıştığınız sayfada JavaScript’i devre dışı bırakabilirsiniz.


Geçerli oturum için JavaScript’i devre dışı bırakmak için “Araç Kutusu Seçenekleri” ni tıklayın ve “Gelişmiş ayarlar” bölümünün altındaki “JavaScript’i Devre Dışı Bırak *” onay kutusunu işaretleyin.

7. CSS stilini sayfadan gizle

JS ve CSS gibi sayfanın dışından import edilen dosyalarda bazen sıkıntılar olabilir. CSS olmadan sayfanızın nasıl göründüğünü merak ediyorsanız, geliştirici araçlarını kullanarak bu stilleri devre dışı bırakmanız mümkün.


Bir web sayfasında uygulanan herhangi bir CSS stilini (satır içi, dahili veya harici) kaldırmak için, “Stil Editörü” 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 erişmek için ☰> Geliştirici> Stil Editörü ‘ne gidin (kısayol: Shift + F7).

8. Bir isteğe HTML içeriğinin yanıtını önizleme

Firefox geliştirici araçlarının HTML içerik türü yanıtlarını önizleme seçeneği vardır. Bu, geliştiricinin herhangi bir 302 yönlendirmesini önizlemesine ve yanıtta hassas bilgilerin işlenip işlenmediğini kontrol etmesine yardımcı olur.


Menüden “Önizleme” ye erişmek için ☰> Geliştirici> Ağ’a (kısayol: Ctrl + Shift + Q) gidin. Ardından, seçtiğiniz web sayfasını açın veya geçerli sayfayı yeniden yükleyin, listeden istediğiniz isteği (HTML yanıtıyla) tıklayın. İsteklerinizi bildirin ve sağ bölümdeki “Önizleme” sekmesini tıklayın.

9. Farklı ekran boyutlarında web sayfasını önizleyin

Bir web sayfasını yanıt vermesi açısından test etmek için ☰> Geliştirici> Responsive Tasarım Görünümü veya kısayol ile erişilebilen “Responsive Tasarım Görünümü” nü kullanın: Ctrl + Shift + M).


“Responsive Tasarım Modu” araç düğmesini görünmesini sağlamak için “Araç Kutusu Seçenekleri” ni tıklayın ve “Kullanılabilir Araç Kutusu Düğmeleri” bölümünün altında “Responsive Tasarım Modu” onay kutusunu işaretleyin.

10. JavaScript’i sayfalarda çalıştırın

Herhangi bir web sayfasında hızlı JavaScript yürütmeleri için Firefox’un “Scratchpad” aracını kullanın. Menüden “Scratchpad” ‘e erişmek için; ☰> Geliştirici> Karalama Defteri veya Shift + F4 klavye kısayolunu kullanın.


“Scratchpad” aracı düğmesini hızlı bir şekilde kullanmak için geliştirici araçları penceresinde görünmesi için: “Araç Kutusu Seçenekleri” ni tıklayın ve “Kullanılabilir Araç Kutusu Düğmeleri” bölümünün altındaki “Scratchpad” onay kutusunu işaretleyin.

Bunların dışında Web Developer’s Toolbox kısmından daha fazla araca erişebilirsiniz. Bu konuda sizin fikirlerinize de almak isteriz. Bu makalenin altına yorum yazarak bizlerle düşüncelerinizi paylaşabilirsiniz.

Etiketler: firefox araçları firefox developer tools firefox geliştirici araçları firefox geliştirici araçları kısayolları firefox geliştirici araçları nasıl kullanılır firefox geliştirici araçları ne işe yarar
Önceki Yazı
Sonraki Yazı

Bilal UÇAR (Website)

administrator

Front-end Developer @Webmaster.Kitchen. Front-end developer olarak çalışıyorum. Bu konuda öğrendiklerimi sizlerle paylaşmaya çalışıyorum. Siz de yaptığınız çalışmaları, edindiğiniz bilgileri paylaşabilirsiniz. Yorum alanı ile mutfağa katkıda bulunun.

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.