Bilmeniz Gereken 10 Faydalı Firefox Geliştirici Araçları
Firefox'un "geliştiricinin tarayıcısı" olması, çalışmamızı kolaylaştırmak için birçok harika araca sahiptir. Firefox Geliştirici Araçları web sayfasındaki araç koleksiyonu hakkında daha fazla bilgi edinebilir ve test edilmekte olan daha fazla özellik ve araç içeren Geliştirici Sürümü Tarayıcılarını da deneyebilirsiniz..
Bu yazı için listeledik 10 kullanışlı alet geliştirici araçları koleksiyonundan beğenebilirsiniz. Ayrıca, bu araçların GIF’lerle neler yapabileceğini ve hızlı başvuru için bunlara nasıl erişeceğinizi gösterdim..
1. Yatay ve dikey cetvelleri görüntüleyin
Firefox’un cetvel aracı olduğu Hem yatay hem de dikey cetvelleri piksel birimleriyle gösterir sayfada. Araç, öğelerinizi sayfa üzerinde düzenlemek için kullanışlıdır.
Cetvellere menüden erişmek için şuraya gidin: ☰> Geliştirici > Geliştirici Araç Çubuğu (kısayol: ÜstKrkt + F2). Araç çubuğu sayfanın altında göründüğünde, cetveller ve bas Girmek.
Bunun geliştirici araçları penceresinde görünmesini sağlamak için, "Araç Kutusu Seçenekleri" ne gidin. "Kullanılabilir Araç Kutusu Düğmeleri" bölümünde, "Sayfa için cetvelleri değiştir"onay kutusu.
2. CSS seçicileri kullanarak ekran görüntüleri alın
Firefox araç çubuğu tam sayfanın veya görünen bölümlerin ekran görüntülerini almanıza izin verse de, bence CSS seçici yöntemi yakalamak için daha kullanışlıdır bireysel öğelerin ekran görüntüleri için olduğu gibi farenin üzerine getirildiğinde görünen öğeler sadece (menüler gibi).
Menüden ekran görüntüsü almak için ☰> Geliştirici > Geliştirici Araç Çubuğu (kısayolShift + F2). Araç çubuğu sayfanın altında göründüğünde, ekran görüntüsü --selector any_unique_css_selector ve bas girmek.
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 "kontrol edin"Tam sayfa ekran görüntüsü al " onay kutusu.
3. Web sayfalarından renkleri seçin
Firefox, "Damlalık" adında yerleşik bir renk seçme aracına sahiptir. Damlalık aracına menüden erişmek için ☰> Geliştirici > Damlalık.
Bunun geliştirici araçları penceresinde görünmesini sağlamak için: "Araç Kutusu Seçenekleri" ni ve "Kullanılabilir Araç Kutusu Düğmeleri" bölümünün kontrolünü "tıklayın.Sayfadan bir renk al"onay kutusu.
4. Sayfa düzenini 3D olarak görüntüleyin
Web sayfalarını 3B olarak görüntülemek, yerleşim sorunlarına yardımcı olur. Farklı katmanlı elemanları 3B görünümünde çok daha net görebileceksiniz. Web sayfasını 3B görüntülemek için "3B Görünüm" aracı 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 "Kullanılabilir Araç Kutusu Düğmeleri" bölümünün altında "3B Görünüm"onay kutusu.
5. Tarayıcı stilini görüntüleyin
Tarayıcı Stilleri iki türden oluşur: tarayıcının her öğeye atadığı varsayılan stil ve tarayıcıya özgü stiller (tarayıcı ön ekine sahip olanlar). Tarayıcı stillerine bir göz atarak stil sayfanızdaki geçersiz kılma sorunlarını tanımlayın ve ayrıca mevcut tarayıcıya özgü stilleri de öğrenin. .
Menüden "Tarayıcı stillerine" erişmek için ☰> Geliştirici > müfettiş. Ardından sağ bölümdeki "Bilgisayarlı" sekmesini tıklayın ve "Tarayıcı stilleri" onay kutusunu işaretleyin.
Ayrıca açabilirsiniz "müfettiş"Ctrl + ÜstKrkt + C kısayolundaki sekme ile" Tarayıcı stillerine "erişme.
6. Geçerli oturum için JavaScript’i devre dışı bırakın
En iyi uygulama ve ekran okuyucu uyumluluğu için, her zaman bir web sitesinin işlevselliğini javascript devre dışı bir ortamda engellenmeyecek şekilde kodlaması önerilir. Bu tür ortamları test etmek için çalıştığınız oturum için JavaScript’i devre dışı bırakın.
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ında "JavaScript'i devredışı bırak* "onay kutusu.
7. Sayfadaki CSS stilini gizle
Tıpkı JavaScript gibi, erişilebilirlik endişeleri nedeniyle web sitelerini bu şekilde tasarlamanın en iyisi sayfalar hala herhangi bir stil olmadan okunabilir olmalıdır. Sayfanın herhangi bir stil olmadan nasıl göründüğünü görmek için bunları geliştirici araçlarında devre dışı bırakabilirsiniz..
Bir web sayfasında uygulanan herhangi bir CSS stilini (satır içi, dahili veya harici) kaldırmak için Listelenen stil sayfalarının göz sembolüne tıklayın "Stil Düzenleyici" sekmesinde. Orijinal görünüme dönmek için tekrar tıklayın.
Menüden "Stil Düzenleyici" ye erişmek için ☰> Geliştirici > Stil Düzenleyicisi (kısayol: ÜstKrkt + F7.
8. İsteğe HTML içeriği yanıtını önizleme
Firefox geliştirici araçları için bir seçenek var HTML içerik türü yanıtlarını önizleyin. Bu, geliştiricinin herhangi bir 302 yönlendirmesini önizlemesine ve yanıtta hassas bilgilerin verilmiş olup olmadığını kontrol etmesine yardımcı olur..
Menüden "Önizleme" ye erişmek için ☰> Geliştirici > Ağ (kısayol: Ctrl + ÜstKrkt + Q. Ardından, istediğiniz web sayfasını açın veya geçerli sayfayı yeniden yükleyin. İstediğiniz istek (HTML yanıtıyla) istek listesinden ve "tıklayınÖn izleme"sağ bölümdeki sekme.
9. Farklı ekran boyutlarında web sayfasını önizleme
Bir web sayfasını yanıt verebilirliği için test etmek için, ☰> tarafından erişilebilen "Duyarlı Tasarım Görünümü" nü kullanın. Geliştirici > Duyarlı Tasarım Görünümü veya kısayolla: Ctrl + ÜstKrkt + M.
"Duyarlı Tasarım Modu" araç düğmesinin görünmesi için "Araç Kutusu Seçenekleri" ni tıklayın ve "Mevcut Araç Kutusu Düğmeleri" bölümünün altında "Duyarlı Tasarım Modu" onay kutusunu işaretleyin.
10. Sayfalarda JavaScript'i çalıştırın
Herhangi bir web sayfasındaki hızlı JavaScript uygulamaları için Firefox'un "Scratchpad" aracını kullanın. Menüden "Scratchpad" e erişmek için; ☰> Geliştirici > Scratchpad'i veya Shift + F4 klavye kısayolunu kullanın.
Hızlı kullanım için geliştirici araçları penceresinde "Scratchpad" araç düğmesinin görünmesini sağlamak için: "tıklayın"Araç Kutusu Seçenekleri"ve altında"Mevcut Araç Kutusu Düğmeleri"bölüm" Scratchpad "i kontrol et onay kutusu.
