Tarayıcınızın Inspect Element Tool'u Nasıl Kullanılır?

Çok sayıda web sitesiyle çalışıyorsanız, muhtemelen her zaman işleri halletmenin daha hızlı ve daha verimli yollarını ararsınız. Eğer öyleyse, çoğu büyük tarayıcıda bulunan Inspect Element aracı, elinizin altında bulunması gereken yararlı bir varlık olabilir. Bununla, CSS sınıflarını hızlı bir şekilde tanımlayabilir, bir sayfadaki öğelerde yapılan değişiklikleri önizleyebilir, mobil cihazlarda bir siteyi simüle edebilir ve çok daha fazlasını yapabilirsiniz.

Bu makalede, Inspect Element aracını tanıtacağız ve en popüler web tarayıcılarında ona nasıl erişeceğinizi göstereceğiz. Ardından, onu web geliştirme iş akışınızın bir parçası olarak nasıl kullanabileceğinize dair bazı örneklerde size yol göstereceğiz.

Hadi kazalım!

Ana Tarayıcılarda Inspect Element Tool'a Nasıl Erişilir

Öğeyi İncele aracı, herhangi bir web sayfasının temel kaynak kodunu görüntülemenizi sağlayan bir yardımcı programdır. Ek olarak, orijinal kaynak kodunu olduğu gibi bırakırken, geçici değişiklikler yapmak ve sonuçları gerçek zamanlı olarak görmek için kullanabilirsiniz. Bu, bir değişikliği test etmeniz veya bir sorunu teşhis etmeniz gerektiğinde inanılmaz derecede faydalıdır. Ayrıca beğendiğiniz bir özelliğe sahip bir siteyle karşılaşırsanız ve nasıl uygulandığını merak ediyorsanız işinize yarayabilir.

Chrome, Firefox ve Safari dahil olmak üzere çoğu büyük tarayıcı bu aracın bir varyasyonunu sunar. Her birinde ona nasıl erişileceğine bakalım.

Google Chrome'da Inspect Öğesine Erişme

Chrome'da Öğeyi Denetle aracına erişmenin üç yolu vardır:

• Sayfadaki bir elemanın üzerine sağ tıklayın ve kontrol edin seçin.
• Pencerenin sağ üst köşesindeki üç noktalı menüyü tıklayın ve Diğer Araçlar > Geliştirici araçları'nı seçin.
• Klavyenizde Ctrl + Shift + C tuşlarına basın ( Mac'te Cmd + Option + C ).

Araç açıldığında, size bölünmüş bir görünüm sunacaktır. Bir tarafta, görünümü ayarlamak ve farklı ekran çözünürlüklerini simüle etmek için birkaç kontrolle birlikte, incelemekte olduğunuz web sitesinin bir önizlemesine sahipsiniz:

Öte yandan, bilgi içeren birkaç bölme vardır. Üst bölme, sayfanın HTML'sidir. Kodun bir kısmının üzerine gelindiğinde, sağdaki sayfanın ilgili alanı vurgulanacaktır:

Bunun altında sayfayla ilgili bilgileri gösteren bir bölme var. Burada görüntülenen ayrıntılar, seçtiğiniz sekmelere göre değişir. Yukarıdaki ekran görüntülerinde sayfanın CSS stillerini gösteriyor.

Alt bölme, yalnızca Chrome Geliştirici Araçları ile ilgili haberler ve güncellemelerdir. X'e tıklayarak dağınıklığı azaltmak için bunu güvenle kapatabilirsiniz.

Son olarak, HTML bölmesinin sağ üst köşesindeki üç noktalı menüyü tıklayıp dock seçeneklerinden birini seçerek bu bölmelerin konumunu değiştirebilirsiniz.

Mozilla Firefox'ta Inspect Öğesine Erişme

Firefox'taki Öğeyi İncele aracı, Chrome'unkine oldukça benzer ve benzer yollarla erişilebilir:

• Sayfadaki bir öğeye sağ tıklayın ve Öğeyi İncele'yi seçin .
• Firefox penceresinin sağ üst köşesindeki hamburger menüsüne tıklayın ve Web Developer > Inspector öğesini seçin.
• Klavyenizde Ctrl + Shift + C tuşlarına basın ( Mac'te Cmd + Option + C ).

Firefox varsayılan olarak bilgi bölmelerini ekranın altına yerleştirir:

Ancak, üç noktalı menüye tıklayarak ve farklı bir seçenek belirleyerek bunları kolayca taşıyabilirsiniz.

Safari'de Inspect Öğesine Erişme

Mac bilgisayarlarda, Safari web tarayıcısı ayrıca bir Inspect Element aracı sunar. Ancak, ona erişmenin fazladan bir adımı var - Safari geliştirici araçlarını etkinleştirmeniz gerekecek.

Bunu yapmak için ekranınızın üst kısmındaki menü çubuğuna gidin ve Safari > Tercihler > Gelişmiş seçeneğine gidin. Ardından geliştirme araçlarını etkinleştirmek için ilgili kutuyu işaretleyebilirsiniz:

Etkinleştirildiğinde, diğer tarayıcılarda olduğu gibi Inspect Element özelliğine erişebilirsiniz:

• Bir öğeye sağ tıklayın ve Öğeyi İncele öğesini seçin.
• Üst menü çubuğunda Geliştirme > Web Denetçisini Göster'e gidin .
• Klavyenizde Cmd + Option + I tuşlarına basın.

Safari aracının başlangıç ​​düzeni, tarayıcılardan biraz farklıdır:

Ancak, Chrome ve Firefox'ta olduğu gibi, denetçi penceresinin sol üst köşesindeki simgelere tıklayarak kolayca özelleştirebilirsiniz.

Inspect Element Tool için 5 Yaygın Kullanım

Artık Öğeyi İncele aracına nasıl erişeceğinizi bildiğinize göre, onunla yapabileceğiniz bazı yararlı şeylere bakalım. Tonlarca olasılık var, ancak aşağıdaki kullanımlar en yaygın olanlardan bazıları. Bu örnekler için Chrome kullanacağımızı, ancak özelliklerin diğer tarayıcılarda benzer şekilde çalışması gerektiğini unutmayın.

1. Bir Web Sitesinde CSS Sınıfları Bulun

Inspect Element'ten yararlanmanın en kullanışlı yollarından biri, bir sayfanın Basamaklı Stil Sayfalarında (CSS) ayrıntıları bulmaktır. Bu birkaç nedenden dolayı kullanışlıdır. İlk olarak, sadece internette geziniyorsanız ve stilini gerçekten sevdiğiniz bir siteyle karşılaşırsanız, kendi web tasarımınız için bazı fikirler toplamak için CSS'ye göz atabilirsiniz.

Kendi sitenizde de kullanışlıdır. Örneğin, bir öğe tam olarak doğru görünmüyorsa, doğru CSS'yi kullandığından emin olmak için onu hızlı bir şekilde inceleyebilirsiniz.

Inspect Element'i kullanarak stilleri kontrol etmenin iki temel yolu vardır. Tek bir öğeyi hızlı bir şekilde görüntülemek istiyorsanız, öğeyle ilgili bazı temel bilgileri görmek için önizleme bölmesinde öğenin üzerine gelebilirsiniz:

Burada, blogumuzdaki başlık için renk düzenini, yazı tipini, kenar boşluklarını ve daha fazlasını görebilirsiniz. Ayrıntılı bölmelerde, araç ayrıca ilgili kodu vurgular, böylece tam olarak neler olduğunu görebilirsiniz. Önizlemede bir öğeye tıklamak, stiller bölmesini CSS'sini de gösterecek şekilde güncelleyecektir:

Öğenin üzerine gelmek hiçbir şey yapmıyorsa, denetçi bölmesindeki imleç simgesinin mavi renkle vurgulandığından emin olun:

Aradığınız belirli CSS sınıfını veya stilini biliyorsanız ve onu kullanan her öğeyi görmek istiyorsanız, arama işlevini de kullanabilirsiniz. Denetçi açıkken klavyenizde Ctrl + Shift + F tuşlarına basın ( Mac'te Cmd + Shift + F ). Bu, sayfanın kodunu arayabileceğiniz bir arama kutusu açar . İlgili sonuçlar, tıpkı bir belgede arama yapıyormuşsunuz gibi vurgulanacaktır.

2. Bir Sitede Sorun Giderme

Öğeyi Denetle aracı, sorunları gidermek için son derece kullanışlıdır. Örneğin, bir öğenin rengi veya yazı tipi tam olarak doğru görünmüyorsa, önceki bölümde açıkladığımız gibi aracı kullanarak hızlıca kontrol edebilirsiniz.

Ayrıca, Öğeyi İncele aracından bir sayfanın HTML'sini doğrudan düzenleyebilirsiniz. Düzenlemek için değiştirmek istediğiniz kodu çift tıklamanız yeterlidir.

Kodun web sitesinde gerçekten değiştirilmediğini unutmayın – sayfayı yenilerseniz orijinal formuna geri döner. Ancak bu işlev, hızlı testler ve sorun giderme için son derece kullanışlıdır.

Son olarak, yerleşik hata ayıklayıcı, sahne arkasına atılan herhangi bir hata mesajını görmek için kullanabileceğiniz daha gelişmiş bir araçtır. Erişmek için Müfettiş penceresinin üst kısmındaki Konsol'a tıklayın:

Kaynakları, ağ etkinliğini ve daha fazlasını görüntülemek için kullanılabilecek başka sekmeler de vardır. Tam listeye erişmek için denetçinin üst kısmındaki çift ok simgesine tıklayın.

3. Değişiklikleri Önizlemek İçin Metni Düzenle

Inspect Element'in en iyi kullanımlarından biri, bir sayfanın metninde, yazı tipinde veya renginde yapılan değişiklikleri hızlı bir şekilde önizlemektir. Bu şekilde, WordPress kontrol panelinize giriş yapmadan bile fikrinizin tam olarak nasıl göründüğünü görebilirsiniz.

Bir öğeyi düzenlemek için, üzerine sağ tıklayın ve İncele'yi seçin . Bu, aracı o öğenin kodu odakta olacak şekilde açar. Inspect Element zaten açıksa, ilgili kodu vurgulamak için önizleme bölmesindeki öğeye de tıklayabilirsiniz.

Ardından, düzenlenebilir hale getirmek için kodu çift tıklamanız yeterlidir. Örneğin, burada blogumuzun başlığını değiştirdik:

Renkleri de değiştirebilirsiniz. İlgili bölümü bulmak için öğeyi seçin ve Stiller bölmesinde gezinin. Bir renk seçiciyi açmak için renk karelerine tıklayabilirsiniz:

Kullanmak istediğinizi biliyorsanız, rengin hex kodunu da doğrudan düzenleyebilirsiniz.

4. Önizleme Görüntü Değişiklikleri

Inspect Element, görüntü değişikliklerinin önizlemesini de kolaylaştırır. Bu, farklı görüntü boyutlarını da denemek için mükemmel bir yoldur.

Önizleme bölmesinde değiştirmek istediğiniz resmi seçin ve ardından HTML bölmesinde URL'sine çift tıklayın:

Ardından, test etmek için farklı bir görüntünün URL'sini yapıştırabilirsiniz. Resim WordPress Medya Kitaplığınızdaysa, URL'yi ek ayrıntılarında hızlı bir şekilde bulabilirsiniz:

URL'yi panonuza kopyalamak için kullanışlı bir düğme bile var. Yine, denetçide yaptığınız tüm değişikliklerin yalnızca geçici olduğunu ve yalnızca sizin tarafınızdan görülebileceğini unutmayın, bu nedenle oynamaktan çekinmeyin.

5. Cihaz Öykünmesini Kullanarak Bir Siteyi Test Edin

Son olarak, Inspect Element'in bir başka kullanışlı özelliği, farklı ekran boyutlarını ve hatta belirli cihazları taklit etme yeteneğidir. Bu, bir sitenin yanıt verme hızını test etmenize ve çeşitli mobil form faktörleriyle tam olarak nasıl görüneceğini görmenize olanak tanır.

Müfettiş açıkken, yığılmış bir telefon ve tablete benzeyen simgeye tıklayın:

Bu, cihaz öykünmesini sağlar. Denetçiyi açtığınızda varsayılan olarak etkinleştirilebileceğini unutmayın. Çevresindeki tutamaçları kullanarak sayfanın önizlemesini yeniden boyutlandırın veya çeşitli cihazları seçmek için önizleme bölmesinin üstündeki açılır menülere tıklayın:

Ayrıca belirli bir en boy oranı girebilir veya mobil cihaz döndürüldüğünde sayfanın nasıl göründüğünü önizleme bölmesinin üst kısmındaki "döndür" simgesine tıklayarak kontrol edebilirsiniz. Konum ve dokunma gibi çeşitli sensörleri taklit etmek için denetçi bölmesindeki üç noktalı menüyü tıklayın ve Diğer araçlar > Sensörler öğesini seçin.

Çözüm

İster web geliştirmede yeni olun ister deneyimli bir profesyonel olun, Inspect Element aracı kesinlikle cephaneliğinizde olması gereken güçlü bir yardımcı programdır. Erişimi kolaydır, neredeyse evrensel olarak bulunur ve çeşitli işlemleri hızlı ve kolay hale getirir.

Bu makalede, Inspect Element'e Chrome, Firefox ve Safari'de nasıl erişileceğini gösterdik. Ayrıca, CSS sınıflarını bulmak, bir web sitesindeki sorunları gidermek, metin ve resimleri geçici olarak değiştirmek ve mobil cihazları taklit etmek için nasıl kullanılacağını da gösterdik. Bu araç seti ile Inspect Element'i iş akışınızın bir parçası yapmak için ihtiyacınız olan her şeye sahipsiniz.

Inspect Element'in kullanımıyla ilgili sorularınız mı var? Aşağıdaki yorumlar bölümünde bize bildirin!

Kinjugraphics / Shutterstock.com aracılığıyla Öne Çıkan Görsel.