15 Ön Uç Geliştiriciler için Firefox'ta Komut Satırı (Grafiksel Komut Satırı) (GCLI) Komutları

Ne kadar çok süslü tuş ve menümüz olursa olsun, her zaman takdir eden programcılar vardır. komut satırı erişimi çalışma ortamlarında, özellikle de doğru düğme veya menü için bir avı ortadan kaldırır bizim görüş hattımızdaki gerekli ayarı gösteren.

Firefox’un Grafiksel Komut Satırı Yorumlayıcısı, veya kısacası GCLI Bir süredir, ve zaman içinde ayarlanan komutunu genişletiyor. GCLI komutları, geliştiricilere bir geliştirme ve yapılandırma araçlarına hızlı erişim. Ayrıca bir otomatik tamamlama özelliği; Herhangi bir komut yazarken Tab tuşuna basarsanız, GCLI tarafından önerilen komutlar girilir..

Araç Çubuğu

Firefox'un GCLI olarak da bilinir Geliştirici Araç Çubuğu. Var üç yol açmak için:

1. Shift + F2 klavye kısayoluna basın.
2. Tıkla “Menüyü aç” Adres çubuğunun en sağ tarafındaki (hamburger) simgesini (Ana sayfa düğmesine sağ tıklayın), ardından Geliştirici> Geliştirici Araç Çubuğu alt.
3. Üst menü çubuğunda Araçlar> Web Geliştirici> Geliştirici Araç Çubuğu seçenek.

Geliştirici Araç Çubuğu açıldığında, onu görebilirsiniz. tarayıcı penceresinin altında. İle çalışmaya karar verdiyseniz GCLI, Çalışırken her zaman sadece açık bırakmanızı tavsiye ederim.

Şimdi Firefox'ta yapabileceğiniz bazı faydalı görevleri görelim. GCLI'sini kullanarak.

1. Sayfa öğelerini kaldırın

Komut: pagemod elemanı kaldır

Başka bir sayfa almanız gerektiğinde, bir web sayfasının düzenine bakın. bazı öğeler kaldırılmış olarak, sadece komutu yaz pagemod elemanı kaldır bu öğeleri sayfadan kaldırmak için Firefox Komut Satırı'na.

Değeri olması gerekiyor Sayfadaki geçerli CSS seçici. Bir sayfada, sınıfın tüm bağlantılarını (özellikle de) kaldırmak istediğinizi söyleyin. .btn, komut şöyle yazılır: pagemod eleman a.btn kaldır.

Genellikle, komut pagemod için kullanılır sayfa değiştirme, Seçilen öğeleri veya özellikleri kaldırarak veya değiştirerek.

2. Ölçü elemanları

Komut: ölçmek

Eğer istersen ölçümü bilmek Bir web sayfasındaki görsel modüllerden herhangi biri için bir araç var. “ölçmek” araca hem tipik web geliştirici araç takımı hem de GCLI üzerinden erişilebilir.

Yazın ve girin ölçmek komut satırı içine komut ve imleç artıya dönüşmek. Ölçümler olacak piksel cinsinden gösterilir artı imlecinin yanında ve genişlik, yükseklik ve diyagonal uzunluk Seçilen alanın Aracı devre dışı bırakmak için, yeniden çalıştırmak ölçmek komuta.

3. Dosyaları hızlıca düzenleyin

Komut: Düzenle

başla sayfanızın kaynaklarını düzenleme ile Düzenle Komut. Komutu yazarken, Mevcut tüm kaynakların URI'leri yukarı ve aşağı ok tuşlarını kullanarak göz atabileceğiniz o sayfadan. Düzenlemek istediğiniz kaynağı seçtikten sonra, öneriyi otomatik olarak tamamlamak için Tab tuşuna basın ve Enter tuşuna basın. tarayıcının editör aracı seçilen dosya ile açılacak.

4. Bilmediğiniz CSS özelliklerine bakın

Komut: mdn css

Bu oldukça hoş bir komut - bu bir çeşit CSS özellikleri için açılır sözlük. Bilmediğiniz bir CSS özelliğine rastlarsanız ve ne anlama geldiğini kontrol etmek istiyorsanız, komutu çalıştırın. mdn css GCLI’de bu bilinmeyen mülkün gerçek adı ile değiştirildi.

Bir açılır pencere belirecek ile “tanım” bu CSS özelliği için Araç çubuğunun hemen üstünde. Tanımı bir resmi Mozilla Geliştirici Ağı (MDN) sayfasından alıntı verilen mülkün MDN’nin CSS özellikleri, HTML öğeleri ve web API’leri sözlüğü.

Açılır pencerede gösterilen metin yeterli değilse, daha fazla bilmek istiyorum, linke tıklayabilirsiniz MDN Sayfasını Ziyaret Edin açılan pencerenin içinde ve o özelliğin ilgili MDN sayfası açılır. Şu anda, bu komut yalnızca CSS özellikleri için kullanılabilir.

5. Sayfayı yeniden boyutlandır

Komut: yeniden boyutlandırmak

Yeniden boyutlandırma aracı, sayfanızın nasıl göründüğünü görmenizi sağlar belirli boyutlara göre yeniden boyutlandırıldı, sayfanızın görünümünü, üzerinde çalıştığınızdan farklı boyutlara sahip cihazlarda önizlemek istediğinizde faydalı olabilir..

Firefox’un bir bu aracı açmak için klavye kısayolu: Ctrl + ÜstKrkt + M (Mac için Cmd + Alt + M). Ama eğer zaten kesin boyutları bilmek yeniden boyutlandırma için kullanılacak en hızlı yol boyutlandırmak İhtiyacınız olan boyutlarla komut verin.

Boyutları piksel cinsinden yorumlanır. Komut çalıştırıldığında, yeniden boyutlandırılmış sayfayı göreceksiniz.

6. Tarayıcıyı yeniden başlatın

Komut: tekrar başlat

Bu komut açıktır. Firefox’u yeniden başlatmak için, sadece tekrar başlat komut satırının içine girin ve Enter tuşuna basıp yeniden başlatma gerektiren eklentileri veya eklentileri yüklediğinizde kullanışlı olabilir.

7. Firefox profil klasörünüzü açın

komuta: klasör openprofile

Her Firefox kullanıcısı kendi yerel profil klasörü o kullanıcıya özel dosyaları saklar, yer imleri ve /krom Klasör. Firefox'u kişiselleştirdiğinizde, bu klasörün içeriğini görüntülemeniz ve değiştirmeniz gerekebilir..

Bu klasörü açmanın alternatif yolu, ekrandaki Klasörü Göster düğmesine tıklamaktır. hakkında: desteği sayfa. Komutu çalıştırarak klasör openprofile Firefox Komut Satırı'nda profil klasörünüzü göreceksiniz hemen aç.

8. Renk değerlerini kopyala

Komut: damlalık

Yalnızca onaltılık formatı desteklemesi dışında, damlalık için mükemmel bir araçtır renk değerinin kopyalanması web sayfasında görünen herhangi bir renk tonu. Komutu girin damlalık takımın işlevselliğini değiştirmek için GCLI'ye.

9. Dış kütüphaneleri test edin

Komut: enjekte etmek

Eğer istersen bazı dış kütüphaneleri test et Web sayfanızda, geçici ilaveler yapmak için kaynak koda dalmak yerine, yalnızca enjekte etmek emir vermek kütüphaneleri yerleştirin. Örneğin, sadece jQuery eklemek için jQuery enjekte.

Komutu çalıştırırken, kaynak sayfaya içe aktarıldı ekleyerek > etiketine HTML belgesinin bölümü.

10. Ekran görüntüsü al

Komut: ekran görüntüsü

dahili ekran görüntüsü alma aracı Firefox'ta oldukça güçlü. Örneğin, CSS seçicilerini kullanarak öğeleri tek tek hedefleyebilir, bir zamanlayıcı kullanabilir, dpr. Hatta bir ekran görüntüsü alabilir sadece tarayıcının krom kısmı (kullanıcı içeriğini çevreleyen alan) kullanarak ekran görüntüsü --chrome komuta.

Ekran görüntüleri Klasörü indir tarayıcının PNG formatında.

11. Açık cetveller

komuta: cetveller

Firefox'tan GCLI ile kolayca erişilebilen bir başka harika araç. cetveller komuta yatay ve dikey cetvelleri görüntüler sayfanın etrafında. Cetvellerin ölçüleri piksel cinsinden. Cetveli devre dışı bırakmak için aynı komutu çalıştırın.

12. Konsolu ve hata ayıklayıcıyı açın

Komut: konsol açık ve dbg açık

Klavye kısa devre yapıyorsa web konsolunu veya hata ayıklayıcı aracını açma Aklını kaçırdım, endişelenme, sadece basit komutu yaz konsol açık veya dbg açık ilgili aracı açmak için Firefox Komut Satırı’nın.

13. Sayfa öğelerini say

Komut: QSA

GCLI'nin bu şık komutu bir web sayfasındaki elementlerin hızlı bir sayımını alır. herhangi bir CSS seçiciyle eşleş. Örneğin, hepsinin sayımını almak için sayfadaki öğeleri qsa a komuta.

14. Eklentileri etkinleştirin veya devre dışı bırakın

Komut: Eklenti listesi

Firefox eklentilerinizi araştırmanız ve yönetmeniz gerekirse, şunları yapmanızı öneririm: Eklentiler menüsü yerine GCLI komutlarını kullanın GCLI sürümü tüm eklentileri ve eklentileri listeler çünkü, önceden kurulmuş olanlar dahil, Eklentiler menüsünde listelenmemiş olabilir.

GCLI’deki eklenti durumunu komutla değiştirebilirsiniz. Ayriyeten ilgili alt komuttan sonra etkinleştirme veya devre dışı.

Aşağıdaki demoda görebilirsiniz Hızlı Pocket nasıl devre dışı bırakılır Firefox’ta.

15. Ayarları yönet

Komut: pref show

Ton var özelleştirme ayarları kullanıcılar Firefox’lar üzerinden erişebilir about: config sayfa. Aynı ayarlar GCLI kullanılarak da görüntülenebilir ve değiştirilebilir.

Özelleştirme ayarlarına erişmek için GCLI’yi kullanmak daha hızlı seçenek hangi yapılandırmayı görüntülemek veya değiştirmek istediğinizi zaten biliyorsanız. için bir ayar için değer belirlemek, kullan pref seti komut ve bir ayarı sıfırla, tip pref sıfırlama .

Aşağıdaki demoda nasıl yapılacağını görebilirsiniz URI’yi kontrol edin jQuery enjekte komutu sayfaya enjekte edildi (bu makalenin 9. bölümüne bakın):