Chrome, Safari ve Firefox'ta Öğe Nasıl Denetlenir?

Pek çok özellik ve işlevselliğe sahip web sayfalarının bu kadar etkileyici görünmesini sağlayan şeyin ne olduğunu hiç merak ettiniz mi? İyi çekici ve çarpıcı bir web sitesi oluşturmak için tüm kodlar nasıl bir araya gelir?

Tarayıcınızdaki Denetleme aracını kullanarak web sitesi öğelerini inceleyerek tüm sırlar kolayca ortaya çıkarılabilir.

Bu yerleşik aracın yardımıyla, web sitesi katmanını kolayca soyabilir ve kodların her bir öğeye nasıl bağlandığını görerek tamamen işlevsel bir web sitesi oluşturabilirsiniz. Size ön uçta işlerin nasıl yürüdüğüne dair bir fikir verecek ve aynı zamanda bunları projelerinizde yeniden yaratmanız için size ilham verecektir.

Bu yazıda size popüler tarayıcılarda web sitesi öğelerini nasıl inceleyeceğinizi göstereceğiz ve bunları doğrudan kullanmak için kısa yöntemler sunacağız.

Herhangi bir Tarayıcıda bir web sitesinin Öğeleri nasıl incelenir?

Bu Öğeleri Denetleme kısayollarını izleyerek herhangi bir Tarayıcıda bir web sitesinin öğelerini kolayca inceleyebilirsiniz.

1. Google Chrome tarayıcısı için Elements kısayollarını inceleyin

Klavyenizdeki Ctrl+Shift+I tuş kombinasyonuna basarak geliştirme araçlarını veya Öğeleri İnceleme araçlarını başlatarak web sitesinin öğelerine erişebilirsiniz.

Ancak deneyebileceğiniz başka bir kısayol ve basit yöntem, web sitesinde veya herhangi bir öğede boş bir alana sağ tıklayıp "İncele"yi seçmektir. Bundan sonra tüm site yapısını görüntülemek için “Öğeler” sekmesini kullanabilir veya her türlü uyarı veya hata için “Konsol” sekmesini kullanabilirsiniz.

Ancak geliştirme araçlarına erişmenin üçüncü ama uzun yolu, Chrome tarayıcının sağ üst köşesinde bulunan üç dikey noktayı veya hamburger menüsünü (üç yığılmış noktalı simge) tıklayıp ardından Diğer Araçlar'ı tıklatıp ardından Geliştirici Araçları .

2. Firefox Tarayıcısı için Elements kısayollarını inceleyin

Bir Firefox tarayıcı kullanıcısıysanız, web sitesi öğelerine zarar vermek amacıyla geliştirme araçlarını kullanmak için Ctrl+Shift+C kısayol tuşlarının bir kombinasyonunu deneyebilirsiniz. Veya web sitesinin boş bir alanına veya herhangi bir öğeye sağ tıklayıp "İncele"yi de seçebilirsiniz.

3. Opera Tarayıcı için Elements kısayollarını inceleyin

Opera kullanıcıları, web sitesi öğelerini incelemek üzere geliştirme araçlarına doğrudan erişmek için klavyenizde Ctrl+Shift+I tuşlarına basın. Benzer şekilde, diğer tarayıcılarda olduğu gibi, web sitesinin boş bir alanına veya herhangi bir öğeye doğrudan sağ tıklayıp "İncele" seçeneğini de seçebilirsiniz.

4. Edge Tarayıcı için Elements kısayollarını inceleyin

Kullandığınız varsayılan tarayıcının Edge olması durumunda; geliştirme araçlarını açmak için klavyenizdeki F12 tuşuna basabilirsiniz . Veya Web sitesinin veya herhangi bir öğenin boş bir alanına sağ tıklayın ve "İncele"yi seçin.

5. Safari Tarayıcısındaki Öğeleri İnceleyin

Safari Tarayıcının bir web sitesinin öğelerini incelemek için herhangi bir kısayol yöntemi yoktur, ancak aşağıda verilen adımları izlemeniz gerekir:

Inspect Element'i Safari'de kullanmak için önce geliştirici araçlarını etkinleştirmeniz gerekir. İşte nasıl:

• Üst menüde “Safari”ye tıklayın ve “Ayarlar”ı seçin.

• “Gelişmiş” sekmesine gidin ve “Menü çubuğunda Geliştirme menüsünü göster” yazan kutuyu işaretleyin.

• Tercihler penceresini kapatın.

Artık bir web sayfasında herhangi bir yere sağ tıklayıp Öğeler bölmesini açmak için "Öğeyi Denetle"yi seçebilirsiniz.

Bölme, pencerenizin alt kısmında hemen açılacaktır; bu, harika görünmeyebilir ve aynı zamanda kodları görüntülemede zorluk yaratabilir.

Size kolaylık sağlamak için, bölmenin sol üst köşesindeki ("X"in yanındaki) simgeye tıklayarak onu kenara taşıyın ve "Pencerenin sağına sabitle" veya "Pencerenin soluna sabitle" seçeneğini seçin .” ( Tüm Tarayıcılar için geçerlidir)

Ayrıca isterseniz bölmeyi pencereden bile ayırabilirsiniz. Bölmenin boyutunu değiştirmek için imlecinizi çift oka dönüşene kadar bölmenin kenarına getirin, ardından yeniden boyutlandırmak için tıklayıp sürükleyin.

Şimdi bölmeyi açtıktan sonra ne yapmanız gerektiğini veya web sitesi hakkında kontrol edebileceğiniz ana unsurların neler olduğunu merak ediyor olabilirsiniz.

Bu amaçla aşağıdaki bölümlere göz atın.

Inspect Website Elements Dev araçlarıyla yapabilecekleriniz

Artık Elements aracına başarıyla eriştiğinize ve bölmeyi açtığınıza göre, web sitesiyle kolayca oynamanıza, onu özelleştirmenize ve gereksinimlerinize göre düzenlemenize yardımcı olacak çeşitli yerleşik araçları göreceksiniz.

Size kolaylık sağlamak amacıyla Chrome'u tanıtım amacıyla kullanacağız ancak tüm özellikler, ayarlar, seçenekler ve talimatlar tüm tarayıcılarda aynı olacaktır.

1. Öğeyi İncele Arama aracının yardımıyla bir sitedeki her şeyi bulun

Kaynak kodun tamamında karmaşık ve bazen çok büyük olan herhangi bir şeyi aramak çok zor olabilir. Bu nedenle DevTools'un yerleşik bir Arama aracı vardır.

Bunu kullanmak için varsayılan Öğeler bölmesini açın ve kaynak kodunda arama yapmak için Ctrl + F veya Command + F tuşlarına basın. DevTools bölmesinin altında hemen bir Arama sekmesi görünecektir.

Arama alanında CSS, JavaScript dosyaları veya kaynak kodundaki belirli öğeler olsun, her şeyi arayabilirsiniz.

Örneğin, arama alanına "meta adı" yazıp Enter tuşuna basarsanız, koddaki "meta adı" ifadesinin tüm geçişlerini bulur ve gösterir. Bu, web sayfanızın metasını, SEO anahtar kelimelerini ve indekslenme durumunu kontrol etmenize yardımcı olur.

Benzer şekilde, eğer bir web tasarımcısıysanız, arama alanına #98fb98db gibi onaltılık renk kodunu girip Enter tuşuna basarak renkleri arayabilirsiniz. Bu, sitenin CSS ve HTML dosyalarında o rengin her örneğini gösterecektir.

İletişim ve Düzeltmeler:

• Arama aracı, hataların tam olarak nerede olduğunu veya nelerin değiştirilmesi gerektiğini göstererek geliştiricilerle iletişim kurmaya yardımcı olur.
• Daha hızlı düzeltmeler için geliştiricilere sorunun bulunduğu satır numarasını bildirin.
• Chrome'un Geliştirici Araçları'nın temel parçası olan Elements'ı kullanarak web sayfasını kendiniz de değiştirebilirsiniz.

2. Web sayfasının tek tek/belirli öğelerini seçin ve inceleyin

Ayrıca, bölmenin sol üst köşesindeki imleç simgesine doğrudan tıklayarak bir sayfanın belirli bir öğesinin HTML kodunu da görüntüleyebilirsiniz.

Artık inceleme panelinde kaynak kodunu ortaya çıkarmak için herhangi bir sayfa öğesine tıklayabilirsiniz.

3. Öğeler içeren herhangi bir şeyi düzenleyin veya değiştirin

Web sitesi tasarımıyla denemeler yapmaktan ve denemeler yapmaktan hoşlanıyorsanız ve anlık fikirleri hayata geçirmekten hoşlanıyorsanız, Öğeyi İnceleme aracı bunu yapmanıza yardımcı olabilir.

Bu araçla, CSS ve HTML dosyalarını değiştirerek veya düzenleyerek sonuçları gerçek zamanlı olarak görerek web sitesinin görünümünde geçici değişiklikler yapabilirsiniz.

Ancak değişiklikler kalıcı değildir. Sayfayı yeniden yükledikten sonra değişiklikler kaybolacaktır. Bu sayede sitenin kaynak koduna müdahale etmeden dilediğiniz kadar deneme yapabilirsiniz.

Bir noktada değişiklikleri çekici bulursanız, bunları kopyalayıp daha sonra kullanmak üzere başka bir yere kaydedebilirsiniz.

Referans olması açısından bazı örneklere bakalım.

Ama ondan önce oyun alanımızı hazırlayıp temizleyelim. Bu amaçla Geliştirici Araçları bölmesindeki Öğeler sekmesini tıklayın. Daha fazla yer açmak için arama kutusunu kapatmak üzere Esc tuşuna basın.

Artık ekranınızda kaynak kodun tamamıyla hazırsınız.

• Geliştirici bölmesinin sol üst köşesinde, karenin üstündeki fare simgesini tıklayın.
• Değiştirmek için sayfadaki herhangi bir öğeyi seçin.

Bir Web Sayfasındaki Metni Değiştirme:

• Fare imlecini/kare simgesini tıklayın.
• Sayfadaki herhangi bir metni tıklayın.
• Geliştirici Araçları bölmesinde, vurgulanan metni düzenlenebilir hale getirmek için çift tıklayın.

• Aşağıdaki resimde gösterildiği gibi “Premium” yerine “En Hızlı” gibi yeni metninizi yazın ve Enter tuşuna basın.
• Metin değişikliği geçicidir ve sayfayı yenilediğinizde eski durumuna dönecektir.

Öğeleri Düzenleme:

• Geliştirici bölmesini kapatın, web sayfasının herhangi bir bölümünü vurgulayın, sağ tıklayın ve Denetle'yi seçin.
• Geliştirici Araçları bölmesi seçilen cümleyi vurgulayacaktır.

Elements'in rengini ve yazı tipi boyutunu değiştirme:

• Geliştirici Araçları bölmesinde Stiller sekmesine gidin.

• “Yazı tipi boyutu” alanına tıklayın ve değeri 22 piksel olarak değiştirin.

• “Renk”e ilerleyin ve #ff0000 olarak değiştirin.

• “Yazı tipi ailesini” “Arial” olarak ayarlayın.

Artık yazı tipleri yaptığımız değişikliklerden önce şöyle görünüyordu:

Değişikliklerden sonra şöyle görünür:

Eleman Durumlarını Değiştirme:

Web sitenizi, ziyaretçileriniz düğmeler veya bağlantıların üzerine geldiklerinde veya bunlarla etkileşimde bulunduklarında görsel olarak daha çekici hale getirmek istiyorsanız Öğe Durumları seçeneğini kullanabilirsiniz.

• Fare imleci/kutu simgesine tıklayın ve öğeyi seçin.
• Geliştirici Araçları bölmesinde koda sağ tıklayın, Force state'in üzerine gelin ve :active'e tıklayın:
• Tekrarlayın ve tıklayın :hover:

• Yeni vurgu rengini görmek için "arka plan rengi" değerini #003b59 olarak değiştirin.

Arka Plan Resimlerini Değiştirme:

• Resim adresinin bağlantısını (yani resmin barındırıldığı yer) kopyalamanız yeterlidir.

• "Otomasyonunuzu AI ile güçlendirin" düğmesindeki Öğeyi Denetle'yi açın.
• “Arka plan rengi” kodunu bulun ve rengi url(“image-link”) ile değiştirin.

Daha Fazla Değişiklik Deneyin:

• Metni değiştirebilir, görüntüleri değiştirebilir, renkleri ve stilleri değiştirebilirsiniz.
• Sitenizin nasıl görünebileceğini görmek için farklı değişiklikler deneyin.

4. Web Sitesini herhangi bir ekran boyutunda veya Cihazda test edin

Günümüzde Google bile web sitelerinin duyarlı olmasını ve her cihaz ve ekran boyutunda kolayca erişilebilir olmasını şiddetle tavsiye ediyor. İnternet kullanıcılarının büyük çoğunluğu web sitelerine dizüstü ve masaüstü bilgisayarlardan ziyade akıllı telefonlarından erişmeyi tercih ediyor.

Bu nedenle web yöneticilerinin web sitelerini oluştururken duyarlı ve mobil uyumlu hale getirmeleri kritik hale geldi.

Ancak herhangi bir web geliştiricisinin veya tasarımcısının web sitesini her tür cihazda veya ekran boyutunda aynı anda kontrol etmesi mümkün olmayabilir. Bu sorunu çözmek için Emülasyon aracı, web sitenizin çeşitli cihazları kullanan farklı kullanıcılara nasıl görünebileceğini görmenize ve kontrol etmenize olanak tanır.

Bu, farklı cihazlarda gerçek testleri atlamanız gerektiği anlamına gelmez, ancak size iyi bir fikir verebilir.

Bu şekilde performans sergileyebilirsiniz:

• Geliştirici Araçları bölmesinde sol üst köşedeki küçük telefon simgesini tıklayın.
• Sayfa, üst kısmında boyutu değiştirmek için bir menü bulunan telefon tarzı bir görünüme dönüşecektir.
• Sayfanın tablet, telefon veya daha küçük ekran gibi farklı cihazlarda nasıl göründüğünü görmek için küçük tarayıcıyı yeniden boyutlandırın.

• Surface Duo veya iPhone 12 Pro gibi varsayılan cihaz boyutlarını seçmek için üstteki menüye tıklayın.
• Web sayfası seçilen cihazın boyutuna göre ayarlanacaktır. Yakınlaştırmak için boyutların yanındaki yüzde açılır menüsünü kullanın.
• Web sayfasının sağ kenarını sürükleyerek görünümü ayarlamak için cihaz ön ayarında "Duyarlı" seçeneğini seçin.
• Üst menünün sonundaki döndürme simgesini tıklayarak dikey ve yatay görünümler arasında geçiş yapın.
• Web sayfasının ve ekran çözünürlüğünün nasıl değiştiğini görmek için farklı cihazları keşfedin.
• Diğer tüm geliştirici araçları da cihaz görünümüne tepki verecektir.

5. Taklit edilmiş mobil ağlarda web sayfası performansını test edin

Tüm görsel testlerin yanı sıra web sitenizin 5G, 4G, 3G gibi farklı mobil ağlarda veya daha yavaş ağlarda nasıl performans gösterdiğini de görebilirsiniz.

Bunu göstermek için,

• Bölmenin sağ üst köşesindeki hamburger menüsünü tıklayın.
• Diğer araçlar'ın üzerine gelin ve Ağ koşulları'nı seçin.

Ağ Koşulları:

• Sayfanın internet olmadan nasıl çalıştığını görmek için hızlı 4G, yavaş 4G veya çevrimdışı gibi ağ koşullarından herhangi birini seçin.

• Test hızınızı dahil etmek için Ekle…'ye tıklayın (örneğin, çevirmeli interneti test etmek için 56Kbps).
• Yavaş bir bağlantıda yüklemenin ne kadar sürdüğünü ve yükleme sırasında nasıl göründüğünü görmek için sayfayı yeniden yükleyin.
• Bu, yavaş bağlantılar için sitenizin yükleme süresini iyileştirmenin önemini anlamanıza yardımcı olur.

Kullanıcı Aracısını Değiştirme:

• Kullanıcı aracısı alanında Tarayıcı varsayılanını kullan seçeneğinin işaretini kaldırın.
• Sitenin diğer tarayıcılar için görüntülemesini değiştirip değiştirmediğini görmek için farklı bir kullanıcı aracısı (örneğin, Firefox, Mac) seçin.
• Bu özellik web'in nasıl çalıştığını görmenizi sağlar sayfalar yükleniyor yalnızca farklı bir tarayıcıda çalıştıklarını iddia etseler bile.

Çözüm

Geliştirme Araçları veya İnceleme Öğeleri hakkında bu kadar derinlemesine bilgi edindikten sonra, favori web sitelerinizden herhangi biri hakkında kamuya açık çok fazla bilginin mevcut olduğunu fark etmiş olmalısınız.

Yalnızca birkaç tıklamayla herhangi bir web sitesini tamamen inceleyebilir, orijinal dosyaları kontrol etmenize gerek kalmadan sitenin görsel açıdan etkileyici özelliklerinin ve işlevlerinin tüm sırlarını ortaya çıkarabilirsiniz.

Artık hangi CSS stillerinin kullanıldığını, karmaşık işlevlerin arkasındaki mantığı, kod düzeyinde Arama motoru optimizasyonunun nasıl yapıldığını ve çok daha fazlasını analiz edebilir ve görüntüleyebilirsiniz.

Rahul

Rahul Kumar, WordPress ve web barındırma konusunda uzmanlaşmış bir web tutkunu ve içerik stratejistidir. Yılların deneyimi ve sektör trendlerini takip etme kararlılığıyla trafiği yönlendiren, etkileşimi artıran ve dönüşümleri artıran etkili çevrimiçi stratejiler oluşturuyor. Rahul'ın ayrıntılara olan ilgisi ve ilgi çekici içerik oluşturma yeteneği, onu çevrimiçi varlığını geliştirmek isteyen her marka için değerli bir varlık haline getiriyor.