Tarayıcı İnceleme Elemanı Aracı Nasıl Kullanılır
Birçok web sitesi ile çalışıyorsanız, her zaman bir şeyleri bitirmek için daha hızlı ve daha verimli yollar arayabilirsiniz. Eğer öyleyse, çoğu ana tarayıcıda bulunan Eleman Eleman aracı, yararlı olan bir varlık olabilir. Onunla birlikte, CSS sınıfını hızlı bir şekilde tanımlayabilir, sayfadaki öğelerde önizleme değişikliklerine bakabilir, mobil cihazlardaki siteleri simüle edebilir ve daha fazlası olabilir. Bu makalede, inceleme öğesi aracını tanıtacağız ve en popüler web tarayıcısında nasıl erişileceğini göstereceğiz. Ardından, web geliştirmenizin iş akışının bir parçası olarak nasıl kullanabileceğinize dair bazı örnekler aracılığıyla size rehberlik edeceğiz.
Hadi kazalım! Ana Tarayıcı Denetim Elemanı Aracı’ndaki muayene öğelerine nasıl erişilir, herhangi bir web sayfasının altında yatan kaynak kodunu görmenizi sağlayan bir yardımcı programdır. Buna ek olarak, geçici değişiklikler yapmak için kullanabilir ve orijinal kaynak kodunun sağlam kalmasına izin verirken sonuçları gerçek zamanlı olarak görebilirsiniz. Değişiklikleri test etmeniz veya sorunları teşhis etmeniz gerekiyorsa bu çok yararlıdır. Bu, istediğiniz özelliklere sahip ve nasıl uygulanacağınızı bilmek istediğiniz bir site bulursanız da yararlı olabilir. Chrome, Firefox ve Safari dahil olmak üzere ana tarayıcıların çoğu bu aracın varyasyonlarını sunar. Her birinde nasıl erişeceğine bakalım.
Google Chrome’da Muayene Elemanlarına Erişme Chrome’da Expect Aracına erişmenin üç yolu vardır:
Sağ -sayfadaki öğeye tıklayın ve inceleyin.
Pencerenin sağ üst köşesindeki üç nokta menüsünü tıklayın ve başka bir araç> geliştirici seçin.
Klavyenizde Ctrl + Shift + C tuşlarına basın (Mac’te CMD + Option + C).
Araç açık olduğunda, size ayrı bir görünüm verecektir. Bir yandan, görünümü ayarlamak ve farklı ekran çözünürlüğünü simüle etmek için birkaç kontrol ile birlikte kontrol ettiğiniz web sitesinin bir önizlemesine sahipsiniz: Öte yandan, bilgi içeren birkaç panel vardır. Üst panel sayfa için HTML’dir. İmlecin Kod bölümüne yönlendirilmesi, sağdaki ilgili sayfa alanını vurgulayacaktır:
Firefox penceresinin sağ üst köşesindeki Hamburger menüsünü tıklayın ve Web Geliştiricileri> Müfettiş’i seçin.
Klavyenizde Ctrl + Shift + C tuşlarına basın (Mac’te CMD + Option + C).
Firefox Varsayılan Bilgi panelini ekranın altına yerleştirmek için:
Ancak, üç nokta menüsüne tıklayarak ve farklı seçenekler seçerek kolayca hareket ettirebilirsiniz. Safari’de muayene öğelerine erişen bir Mac bilgisayarında, Safari Web tarayıcısı ayrıca inceleme öğe araçları sunar. Ancak, erişmek için ekstra adımlar vardır – Safari geliştiricisini etkinleştirmelisiniz. Bunu yapmak için, ekranınızın üst kısmındaki menü çubuğunu açın ve Safari> Tercihler> Gelişmiş’e gidin. Ardından, geliştirme aracını etkinleştirmek için ilgili kutuyu kontrol edebilirsiniz: Etkinleştirildikten sonra, diğer tarayıcılarda olduğu gibi inceleme özelliğine erişebilirsiniz:
Bir öğeyi sağa tıklayın ve öğeyi inceleyin. Üst menü çubuğunda, Web Müfettişini Geliştirmek için Gezin.
Klavyenizde CMD + Option + I tuşuna basın.
Safari araçları için ilk düzeni tarayıcıdan biraz farklıdır:
Ancak, Chrome ve Firefox gibi, Müfettiş penceresinin sol üst köşesindeki simgeyi tıklayarak kolayca ayarlayabilirsiniz.
5 Denetim öğesi araçları için genel kullanım Şimdi inceleme öğesi aracına nasıl erişileceğini bildikten sonra, onunla yapabileceğiniz bazı yararlı şeylere bakalım. Birçok olasılık vardır, ancak aşağıdaki kullanım en yaygın olanlardan bazılarıdır. Bu örnek için Chrome’u kullanacağımızı unutmayın, ancak özellikler diğer tarayıcılarda aynı şekilde çalışacaktır. 1. CSS sınıfını web sitesindeki bulun, inceleme öğesini kullanmanın en kullanışlı yollarından biri, Basamaklı Stil Sayfaları (CSS) sayfalarında ayrıntıları bulmaktır. Bu birkaç nedenden dolayı kullanışlıdır. İlk olarak, sadece interneti keşfedip gerçekten sevdiğiniz bir site bulursanız, kendi web tasarımınız için bazı fikirler toplamak için CSS’ye bakabilirsiniz. Bu aynı zamanda kendi sitenizde de kullanışlıdır. Örneğin, bir öğe doğru görünmüyorsa, öğenin doğru CSS kullandığından emin olmak için hızlı bir şekilde kontrol edebilirsiniz. Muayene öğesini kullanarak kuvveti kontrol etmenin iki temel yolu vardır. Bir öğeyi hızlı bir şekilde görmek istiyorsanız, bu konuda bazı temel bilgileri görmek için imleci önizleme paneline yönlendirebilirsiniz: Burada, blogumuzdaki başlık için renk şemasını, yazı tipini, marjı ve diğerlerini görebilirsiniz. Ayrıntılı panelde, bu araç da tam olarak ne olduğunu görebilmeniz için ilgili kodu vurgular. Önizlemedeki öğeleri tıklamak, CSS’yi görüntülemek için stil panelini güncelleyecektir:
Elementin üzerinde yüzmek hiçbir şey yapmıyorsa, Müfettiş panelindeki imleç simgesinin mavi olarak vurgulandığından emin olun:
Aradığınız sınıfı veya belirli CSS stilini biliyorsanız ve onu kullanan her öğeyi görmek isterseniz, arama işlevini de kullanabilirsiniz. Açık Müfettiş ile klavyenizde Ctrl + Shift + F tuşlarına basın (Mac’te CMD + Shift + F). Bu eylem, sayfa kodunu izleyebileceğiniz arama kutusunu açacaktır. Tıpkı belge arıyorsanız, ilgili sonuçlar vurgulanacaktır. 2. ENCLEPED Eleman Sitesi Sitesini Çözme Sorunları çözmek için çok kullanışlıdır. Örneğin, bir öğenin rengi veya yazı tipi doğru görünmüyorsa, önceki bölümde açıkladığımız gibi aracı kullanarak hızlı bir şekilde kontrol edebilirsiniz. Ayrıca, inceleme öğesinin sayfasının sayfasını doğrudan düzenleyebilirsiniz. Düzenlemek için değiştirmek istediğiniz kodu çift tıklayın. Kodun web sitesinde gerçekten değiştirilmediğini unutmayın – sayfayı yenilerseniz, orijinal formuna geri dönecektir. Bununla birlikte, bu işlev hızlı test ve problem çözme için çok kullanışlıdır. Son olarak, varsayılan hata ayıklayıcı, sahne arkasında görünen hata mesajını görmek için kullanabileceğiniz daha karmaşık bir araçtır. Erişmek için, Müfettiş penceresinin üst kısmındaki konsolu tıklayın: Kaynakları, ağ etkinliğini ve diğerlerini görmek için başka sekmeler de vardır. Tam bir listeye erişmek için müfettişin üst kısmındaki çift ok simgesini tıklayın. 3. Metni Düzenle İnceleme öğeleri için en iyi kullanımlardan birinde değişiklikleri görmek için metin, yazı tipi veya sayfa rengindeki önizleme değişikliklerini hızlı bir şekilde görmektir. Bu şekilde, WordPress kontrol panelinize girmeden bile fikirlerinizin tam olarak ne olduğunu görebilirsiniz. Elemanları düzenlemek için, üzerine sağlayın ve inceleyin seçin. Aracı öğe kodu ile açar. Denetleme öğesini açtıysanız, ilgili kodu vurgulamak için önizleme panelindeki öğeleri de tıklayabilirsiniz. Ardından, düzenlenmesi için koda çift tıklayın. Örneğin, burada blog başlığımızı değiştirdik: Ayrıca rengi değiştirebilirsiniz. Sadece öğeyi seçin ve ilgili kısmı bulmak için Styles panelinde kaydırın. Renk seçmenlerini açmak için renk kutusuna tıklayabilirsiniz:
Ne kullanmak istediğinizi biliyorsanız doğrudan renk altıgen kodunu da düzenleyebilirsiniz. 4. Görüntü inceleme öğesindeki önizleme değişiklikleri, görüntü değişikliklerini görmeyi de kolaylaştırır. Farklı görüntüleri denemenin en iyi yolu budur. Önizleme panelinde değiştirmek istediğiniz görüntüyü seçin, ardından HTML panelindeki URL’ye çift tıklayın: Daha sonra test etmek için farklı bir görüntü URL’sini koyabilirsiniz. Resim WordPress Media Kütüphanesi’ndeyse, ek ayrıntılarında URL’yi hızlı bir şekilde bulabilirsiniz: URL’yi panonuza kopyalamak için pratik bir düğme bile var. Bir kez daha, müfettişte yaptığınız her değişikliğin sadece geçici ve sadece sizin için görünür olduğunu unutmayın, bu yüzden lütfen oynayın. 5. Siteyi son cihaz emülasyonunu kullanarak test edin, inceleme öğesinin bir başka yararlı özelliği, çeşitli ekran boyutlarını ve hatta belirli cihazları paketleme yeteneğidir. Bu, site yanıtını test etmenizi ve çeşitli hücresel form faktörleriyle tam olarak nasıl göründüğünü görmenizi sağlar. Açık Müfettiş ile cep telefonu ve tablet gibi görünen simgeyi tıklayın:
Bu, cihazların emülasyonuna izin verir. Müfettişi açtığınızda bunun varsayılan olarak etkinleştirilebileceğini unutmayın. Çevredeki tutamaç kullanarak sayfaların boyutunu değiştirin veya çeşitli cihazları seçmek için önizleme panelinin üst kısmındaki açılır listeyi tıklayın:
