Element Inspector Püf Noktaları: Bilmeniz Gereken 8 İpucu! 🛠️

Tarayıcınızdaki Element Inspector yalnızca geliştiricilere özel bir araç gibi görünebilir, ancak programlama hakkında hiçbir şey bilmeseniz bile aslında onunla bazı harika şeyler yapabilirsiniz! 🚀

1 . Resimleri İndir

Bir web sitesinden bir görsel indirmeniz gerekebilir. Sağ tıklayıp “Resmi Kaydet” seçeneğine basmaya çalışıyorsunuz ve bu seçeneğin devre dışı olduğunu veya “Resmi Kaydet” düğmesinin görünmediğini görüyorsunuz. Bazen, dosyanın tamamını değil, yalnızca küçük resmini indirebilirsiniz. 🤔 N'aber?

Geliştiriciler genellikle "Görüntüyü Kaydet" düğmesini bilerek devre dışı bırakır veya bu şekilde görüntü indirmeye izin vermeyen bir web çerçevesi kullanırlar. Ama Element Inspector'da kullanışlı bir çözüm var. Üç basit adımda bir web sitesindeki herhangi bir resim kaynağını tam boyutta alabilirsiniz. 📸

Adım 1

Yapmak sağ tıkla Sayfanın herhangi bir yerine tıklayın ve “Öğeyi İncele” veya “İncele” seçeneğini seçin. Ayrıca tarayıcınızdaki denetçi için özel klavye kısayolunu da kullanabilirsiniz. F12 çoğu tarayıcıda çalışır ve işletim sistemleri. Bu demo için Firefox kullanıyorum ama adımlar aynı. 🖱️

Adım 2

Element Inspector penceresinde “Ağ” sekmesine tıklayın. Ağ sekmesinin alt menülerinden biri “Resimler” olmalıdır. “Resimler”e tıklayın. 🖼️

Şimdi sayfayı yeniden yükleyin, böylece tüm resim kaynakları “Resimler” sekmesinde görünecektir. Kullanın adres çubuğunun yanındaki yenileme düğmesi tarayıcınızdan veya Ctrl+R tuşlarına basın. 🔄

Adım 3

İşte karşınızda. Tüm resim kütüphanesi listeye yüklenmelidir. Liste dinamik olarak güncellenmektedir, dolayısıyla web sitesine daha fazla resim yüklendiğinde, bunlar burada da görünecektir. 🖼️✨

Bir dosyanın üzerine gelerek önizlemesini ve boyutlarını görebilirsiniz. Dosyayı yeni sekmede açmak için çift tıklayın ve sağ tıklama menüsünü kullanarak kaydedin. 💾

2 . Videoları İndir

Tıpkı görüntü varlıkları gibi, bazen web siteleri izin vermez deşarj videoları doğrudan. Ama bunları element denetçisine yükleyerek indirebilirsiniz. Denetçiye yüklendikten sonra, dosya adına çift tıklayarak yeni bir sekmede açabilirsiniz. 🎥

Adım 1

F12 klavye kısayoluna basarak Element Inspector penceresini açın (çoğu sistemde çalışması gerekir). Alternatif olarak, web sayfasında herhangi bir yere sağ tıklayıp "İncele"yi seçebilirsiniz. Element Inspector penceresi açılmalıdır. 🖱️

Adım 2

Video dosyaları hariç her şeyi filtrelemek için “Ağ” sekmesine ve ardından “Medya”ya tıklayın. Sayfayı yeniden yükleyin. Tarayıcınızın yenileme butonuna tıklayarak veya Ctrl+R tuşlarına basarak. 🔄

Adım 3

Video dosyaları bir liste halinde yüklenmeli. Anında önizleme yapamazsınız, ancak bir dosyayı çift tıklayarak yeni bir sekmede açabilirsiniz. Oradan sağ tıklayıp indirebilirsiniz. 🎬

3 . Tam Sayfa Ekran Görüntüleri Yakala

Eğer bir web sayfasının tamamını kaydetmek istiyorsanız, onu hızlıca PDF veya HTML dosyası olarak indirebilirsiniz. Peki ya sayfanın tamamının normal fotoğrafını çekmek isterseniz? Burada Nasıl yapılacağını açıklayacağım. 📸

Firefox'un içerik menüsünde özel bir ekran görüntüsü aracı var, bu yüzden bunu nasıl yapacağınızı göstereceğim Google Chrome ve diğer tarayıcılar. 🌐

Sayfanın herhangi bir yerine sağ tıklayarak veya F12 tuşuna basarak denetçi aracını açın.

Çalıştır penceresini açmak için Ctrl+Shift+P tuşlarına basın. yazdığım Yakalama yakalama tam boy ekran Bu pencerede. Üzerine tıklayın. 📄

Hemen "Farklı Kaydet" penceresi açılacaktır. Bu pencereden tam sayfa ekran görüntüsünü JPG olarak kaydedebilirsiniz. 💾

4 . Telefonda olduğunuzu düşünün

Çoğu web sitesi cihaz türüne ve ekran boyutuna bağlı olarak farklı şekilde yüklenir. Sitenin sizin farklı bir cihaz kullandığınızı düşünmesini sağlamak istiyorsanız (herhangi bir nedenle), bunu denetleme aracıyla kolayca yapabilirsiniz. 📱

Chrome'da sağ tıklama menüsünden veya F12 tuşuyla Elements Inspector penceresini açın. Daha sonra sol üst köşedeki küçük dizüstü bilgisayar ve telefon simgesine tıklayın. Firefox'ta da Duyarlı Tasarım Modu (Ctrl+Shift+M) adı verilen benzer bir buton var. 🖥️

Taklit edebileceğiniz aygıtların bir listesine sahip olacaksınız ve ayrıca boyutunu manuel olarak ayarlayabilirsiniz. ekran. Mobil cihazınızı seçtiğinizde tarayıcınızın dokunma hareketlerini de simüle ettiğini fark edeceksiniz. 📱✨

5 . Kaynakları Belirle

Bu ipucu yaratıcı kişiler içindir, ancak bir web sitesindeki yazı tipleriyle ilgilenen herkes bu numarayı kullanabilir. Kullanabilirsiniz müfettiş aracı tanımlamak için ve bazen yazı tiplerini bile indirebiliyoruz. 🖋️

Öncelikle eleman inceleme aracını açalım. Daha sonra “Ağ” sekmesine tıklayın (taşma menüsünde gizli olabilir) ve “Kaynak”ı seçin.

Daha sonra Ctrl+R tuşlarına basın. Oluşturulan fontlar muhtemelen WOFF formatında listeye yüklenecektir. Font ismine çift tıklayarak doğrudan indirebilirsiniz. Örneğin, How-To Geek varsayılan yazı tipi olarak Roboto'yu kullanır. 🔤

Yazı tipi hakkında daha ayrıntılı bilgiye ihtiyacınız varsa, “Öğeler” sekmesine gidin ve “Stiller”i seçin. Yazı tipi ailesi özelliğine gidin ve tıklayın. İlgili metin web sayfasında vurgulanacaktır. Bu şekilde kaynağınızı doğru bir şekilde tespit edebilirsiniz. 🎨

6 . Bir Sayfadaki Metni Düzenle (Geçici Olarak)

Bir web sayfasındaki hemen hemen her şeyi denetçiyi kullanarak geçici olarak düzenleyebileceğinizi biliyor muydunuz? Bu araç, web sitesini oluşturan kodu düzenlemenize olanak tanır; yani, kod hakkında biraz bilginiz varsa, sayfanın görünümünü istediğiniz gibi değiştirebilirsiniz (sadece kendi makinenizde, sayfayı yeniden yükleyene kadar). 🛠️

Kodlama hakkında hiçbir şey bilmeseniz bile herhangi bir web sayfasındaki temel metinleri düzenleyebilirsiniz. Arkadaşlarınıza yapabileceğiniz eğlenceli bir şaka olabilir. 😉

Düzenlemek istediğiniz sayfadaki metni vurgulayın ve üzerine sağ tıklayın. Daha sonra “İncele” veya “Öğeyi İncele” seçeneğini seçin.

İlgili metin parçası Öğeler sekmesinde görünmelidir. Sadece çift tıklayın ve metni istediğiniz herhangi bir şeyle değiştirin. ✏️

Element denetçisini kapatın ve işte bu kadar! Sayfayı yeniden yüklediğinizde yaptığınız değişikliklerin geri alınacağını unutmayın. 🔄

7 . Öğeleri Sil

Tıpkı metin düzenlemede olduğu gibi, bir web sayfasındaki belirli öğeleri de silebilirsiniz. Tekrar ediyoruz, değişiklikler yalnızca sayfayı yeniden yükleyene kadar geçerli olacaktır. ❌

Silmek istediğiniz öğeye sağ tıklayın ve ardından “İncele” veya “Öğeyi İncele” seçeneğini seçin.

Etiketlerin üzerine gelin "

” tüm öğe vurgulanana kadar. Daha sonra Delete tuşuna basmanız yeterli olacaktır. 🔚

İşte öylece gitti! 🕵️‍♂️

8 . Renk Değerlerini Tanımlayın

Yaratıcılar için bir ipucu daha: Herhangi bir öğenin RGB ve HEX değerlerini alabilirsiniz. bir web sayfasında renk Element denetçisinde bulacağınız damlalık aracını kullanarak. 🎨

Sayfanın herhangi bir yerine sağ tıklayın ve Denetçiyi açın. Varsayılan olarak, Kurallar penceresi Denetçi sekmesinde açılır. Renk olarak etiketlenen özellikleri bulmak için aşağı kaydırın.

Renk özelliğinin yanında renkli bir daire veya kare bulunmalıdır. Üzerine tıklayarak renk seçiciyi açın ve yanındaki damlalık simgesine basın. 🖌️

Renk değerlerini bulmak için bu damlalığı sayfanın herhangi bir yerine getirebilirsiniz. Damlalığa tıkladığınızda, özellik otomatik olarak seçtiğiniz renk değeriyle doldurulacaktır. Buradan kolayca kopyalayabilirsiniz. 📋

---

Bunlar ipuçları ancak yüzeyi çiziyor Elements Inspector'ı kullanarak gerçekte nelerin mümkün olduğunu görün. Web geliştirme konusunda daha derinlemesine bilgi edinmek istiyorsanız, işte size başlamanız için bir rehber. 💻