Web'e göz atarak, perde arkasında neler olup bittiğini düşünmüyoruz. Metin, resimler ve video sadece görünür veya değil. Ancak, bir sayfayı her ziyaret ettiğinizde tarayıcınızda veya web sunucunuzda muazzam miktarda kod yürütülür. Bu yüzden bazen, bu kodu görebilmek yararlı olur. Örneğin, bir sayfa doğru yüklenmiyorsa veya bir video oynatıcı nasıl gömüldüğünü bilmek istiyorsanız.
Bu makalede, Safari, Chrome ve Firefox'ta öğeyi nasıl inceleyeceğinizi göstereceğiz.
Denetleme öğesi nedir?
İnceleme öğesi, çoğu web tarayıcısında, Web sayfasını oluşturmak için birleştirilen HTML, CSS, JavaScript ve diğer kodlamayı görüntüleyen bir pencere açmanızı sağlayan gelişmiş bir özelliktir. Bazı web tarayıcılarında, bunu ayarlarda etkinleştirmeniz gerekir, ancak çoğu zaten menüde. Esas olarak geliştiricileri web sitelerini hata ayıklamalarına izin vermeyi amaçlamaktadır, ancak diğer durumlarda da yararlı olabilir.
Neden bir web tarayıcısında öğeyi inceleyin?
Bir sayfada hata ayıklamanın yanı sıra, inceleme öğesi, WordPress gibi bir içerik yönetim sistemine eklenen Google Analytics gibi kodun doğru bir şekilde dağıtılıp dağıtılmadığını kontrol etmek için mükemmel bir araçtır. Ayrıca bir videonun neden oynamadığını veya dosya indirmeye başlamayacağını bulmak için de yararlı olabilir.
Bir web sitesinin belirli bir etkiye nasıl ulaştığını öğrenmek için istekli bir geliştiriciyseniz, inceleme öğesini kullanın. Değişiklik yaptığınızda nasıl göründüğünü test etmek için bir tarayıcıda kodu düzenleyebilirsiniz. Ana Tarayıcı penceresindeki web sayfası, tüm değişiklikleri sergilemek için hemen güncellenir.
Bir web tarayıcısında öğe nasıl denetlenir
Elemanları inceleme şekliniz kullandığınız tarayıcıya bağlıdır. Safari, Firefox ve Chrome'da nasıl yapılacağını göstereceğiz.
İLGİLİ:Mac'ten MAC'a veri aktarmanın 4 yolu
Safari'de Eleman Nasıl Denetlenir
Safari öğelerini incelemek için yapmanız gereken ilk şey, geliştirme menüsünü etkinleştirmektir. İşte bunu nasıl yapacağım.
- Safari'yi başlatın.
- Safari menüsünü tıklayın, ardından Ayarlar'ı seçin.
- Gelişmiş sekmesini seçin.
- 'Menü çubuğundaki Geliştirme Menüsünü Göster' etiketli kutuyu işaretleyin.
- Ayarları kapatın.
Geliştirme menüsünü etkinleştirdikten sonra, üzerine tıklayın ve sayfa kaynağını gösterin veya komut seçeneği-U'ya basın. Tarayıcının alt kısmında üstte çok sayıda sekme bulunan bir pencere göreceksiniz. Burada yapabileceğiniz birkaç şey var.
- Sayfanın tüm farklı bölümlerinin bir listesini görmek için Kaynakları tıklayın. Kenar çubuğunda, çerçeveler, görüntüler ve komut dosyaları gibi klasörlerin bir listesini göreceksiniz. Sayfadaki resimlerin bir galerisini görmek için resimler klasörüne tıklayın. Bu klasördeki öğeleri kontrol etmek için herhangi bir klasörün yanındaki açılır menü tıklayın. Bunlardan birini tıklayın, ana pencerede bir önizleme görünecektir.
- Web sayfasını oluşturan kodun iç içe görünümünü görmek için Elements sekmesini seçin. Herhangi bir bölümü genişletirseniz, bu bölümdeki kod görünür olacaktır; Bunu seçerseniz, size ilgili sayfa geçişini gösterir.
- Araç çubuğundaki örtüşen dikdörtgenlere tıklayarak Elements Müfettişini yeni bir pencerede açın.
- Elementler sekmesinde, her öğenin tam konumunu görmek için Cetvels simgesini tıklayın.
Safari'de belirli web sayfası öğesini nasıl denetleyecek ve değiştirebilirim
Yukarıdaki yöntem size Safari'deki bir web sayfasına iyi bir genel bakış sunar. Peki ya bir sayfada belirli bir öğeyi bulmak ve bir şeyi test etmek için değiştirmek istiyorsanız? İşte nasıl:
- Bir web sayfasında incelemek istediğiniz öğeye, örneğin bir metin satırına gidin.
- Metni seçin ve üzerinde kontrol tıklatın. Ardından Bağlam menüsünden öğeyi inceleyin.
- Pencere web sayfasının altından açılacak ve o öğeyi kontrol eden kodu göreceksiniz.
- Müfettişe çift tıklayarak ve yeni metin yazarak tarayıcınızdaki metni değiştirebilirsiniz. Veya bir görüntü ise, URL'yi farklı bir görüntünün URL'si ile değiştirebilirsiniz.
Google chrome'da denetleme öğesi nasıl kullanılır
- Chrome'u başlatın. Görünüm menüsüne tıklayın, işaretçiyi alttaki geliştiriciye taşıyın ve öğeleri inceleyin veya komut seçeneği-C'ye basın.
- Web sayfasındaki öğeleri görüntüleyerek tarayıcı penceresinin sağında bir pencere açılacaktır.
- Müfettişin tepesindeki sekmelerin Safari: Element, Konsol ve Kaynaklardakine benzer olduğunu fark edeceksiniz.
- Elementler sekmesinde, kontrol ettiği web sayfasının kısmını vurgulamak için herhangi bir bölümün üzerine gelin.
- Kaynaklar sekmesi, tıpkı Safari'de olduğu gibi, tüm farklı öğeleri klasörlerde bir araya getirir.
Chrome'da belirli bir web sayfası öğesini nasıl inceleyecek ve değiştirebilirim
Bir web sayfasındaki belirli öğeleri gözden geçirme ve değişiklik yapma işlemi Chrome'da Safari'de olduğu gibidir.
- Web sayfasındaki öğeyi bulun. Sonra üzerinde kontrol tıklayın.
- Menüden inceleyin. Sağdaki kenar çubuğunda, kodun seçtiğiniz öğeyle ilgili bölümünü göreceksiniz.
- Bölümü açıklamak için oku tıklayın.
- Değiştirmek istediğiniz metin satırını bulduğunuzda, seçin, metni silin ve yeni metni yazın. Değiştirmek istediğiniz bir görüntüse, yeni görüntünün URL'sini yazın veya yapıştırın.
Firefox'ta Expect öğesini nasıl kullanılır
- Firefox'u başlatın. Araçlar menüsüne tıklayın.
- Fare işaretçisini tarayıcı araçları üzerinden getirin ve web geliştirici araçlarını seçin.
- Safari'de açılana benzer şekilde ekranın altında açık bir pencere göreceksiniz.
- Bu durumda, ayrı öğeler veya kaynak sekmeleri yoktur. Kodu incelemek için Müfettiş sekmesini seçin.
- Müfettiş sekmesindeki kod bölümlerinin üzerine geldiğinizde, yukarıdaki sayfanın bölümlerinin vurgulandığını fark edeceksiniz.
Belirli bir web sayfası öğesini nasıl inceleyebilir ve Firefox'ta değiştirme
Yukarıdakilerin tümü Safari ve Chrome'da olduğu gibi Firefox'ta çalışır.
- Web sayfasında incelemek veya değiştirmek istediğiniz öğeyi kontrol tıklayın.
- Menüden inceleyin.
- Kodu ortaya çıkarmak için açılır oku tıklayın.
- Metni seçin, silin ve yeni metin yazın (veya bir resim URL'si seçin ve başka bir resim için URL ile değiştirin.)
Mac'te bir öğeyi nasıl inceleyeceğinizi öğrendikten sonra, bir web sitesindeki kaynak kodunu analiz edebilir, hatta değişiklikler yapabilir ve sonuçları test edebilirsiniz. İşlem çoğu tarayıcı için çok benzer. Görünüm menüsünde genellikle bir geliştirici araçları menüsü veya bir görünüm kaynağı komutu vardır. Safari'de, yalnızca ayarlarda geliştirici menüsünü etkinleştirdiğinizde görülebilir, ancak çoğu tarayıcıda menü çubuğunda. Safari, Chrome veya Firefox'taki öğeleri incelemek için yukarıdaki adımları izleyin.