Bir Web Sitesini Doğru Şekilde İnceleme

İster bir projede yeni özellikleri test eden bir geliştirici, ister HTML ve CSS koduna daha yakından bakmak isteyen bir tasarımcı olun, bir web sitesini ve öğelerini incelemek için birçok neden vardır. Ancak, nereden başlayacağınızı bilmek kafa karıştırıcı görünebilir (ilk başta).

Neyse ki, web öğelerini düzgün bir şekilde incelemek için çeşitli basit araçlar, teknikler ve püf noktaları kullanabilirsiniz. Ayrıca, neredeyse her tarayıcı ve İşletim Sistemi (OS) için seçenekler vardır.

Bu yazıda, bir web sitesini neden incelemek isteyebileceğinizi tartışacağız. Ardından, ne arayacağınızı açıklamadan önce, kullanabileceğiniz en iyi araçlardan bazılarını size göstereceğiz. Hadi atlayalım!

Bir Web Sitesini Neden Kontrol Etmelisiniz?

Bir web sitesini incelemek isteyebileceğiniz birkaç neden vardır. Örneğin, bir sorunu gidermeniz veya belirli bir bilgiyi bulmanız gerekebilir.

Web öğelerini bir tarayıcıda incelemek, WordPress geliştiricilerinin, tasarımcılarının ve dijital pazarlamacıların bir web sayfasının görünümünü değiştirmesine ve değişiklikleri test etmesine olanak tanır. Geliştiricilerin veya testçilerin bu özelliği belirli bir öğede hata ayıklamak, düzen testleri yapmak veya canlı CSS düzenlemesi yapmak için kullanma olasılığı daha yüksektir.

Web öğelerini incelemek, web tasarımcıları için de yararlıdır. Bir renk değişikliğini veya yeni bir yazı tipini hızlı bir şekilde test etmek istiyorsanız, bunu CSS kodunuzla uğraşmadan yapabilirsiniz.

Ek olarak, dijital pazarlamacılar, belirli değişikliklerin bir web sayfasının genel görünümünü ve hissini nasıl etkileyeceğini görmek için Öğeyi İncele aracını kullanabilir. Örneğin, yeni bir Harekete Geçirici Mesaj (CTA) düğmesi veya farklı bir renk düzeni denemek isteyebilirsiniz. Canlı sitenizde herhangi bir değişiklik yapmadan güncellemeleri çoğaltmak için araçları kullanabilirsiniz.

Son olarak, bir web sitesini incelemek, bir web sitesinin nasıl oluşturulduğu ve çalıştığı hakkında bilgi edinmenin mükemmel bir yolu olabilir. Web geliştirme hakkında daha fazla bilgi edinmekle ilgileniyorsanız, siteleri incelemek başlamak için mükemmel bir yoldur.

Bir Web Sitesini İncelemek İçin En İyi Araçlar ve Uzantılar

Bir web sitesini incelemek için kullanabileceğiniz bir dizi farklı araç ve uzantı vardır. İşte en popüler seçeneklerden bazıları!

Elemanı İncele

Elemanı İncele Aracı en yaygın seçenektir. Bir web sayfasını oluşturan HTML ve CSS koduna yakından bakmanızı sağlar. CSS'yi canlı olarak düzenlemek ve herhangi bir kalıcı değişiklik yapmadan yaptığınız değişikliklerin nasıl görüneceğini görmek için de kullanabilirsiniz.

Bir Google Chrome uzantısı olarak mevcut olsa da Inspect Element aracı aynı zamanda tüm büyük tarayıcılarla birlikte gelir. Bu özellik, bir web sayfasının HTML ve CSS kodunu incelemenizi ve düzenlemenizi sağlayan bir dizi program olan Chrome Geliştirici Araçları'nın bir parçasıdır.

Google Chrome Geliştirici Araçları'na erişmek için Ctrl+Shift+I (veya Mac'te Cmd+Opt+I ) tuşlarına basmanız yeterlidir. Araçlara, Chrome menüsünü açıp Diğer araçlar > Geliştirici araçları'nı seçerek de erişebilirsiniz :

Aynı geliştirici araçlarına diğer tarayıcılardan da erişebilirsiniz. Örneğin, Firefox Geliştirici Araçları benzer özelliklere sahiptir. Araçlara erişmek için Ctrl+Shift+I (veya Mac'te Cmd+Opt+I ) tuşlarına basmanız yeterlidir. Araçları Firefox menüsünü açıp Web Developer > Inspector'ı seçerek de bulabilirsiniz.

Ayrıca Safari Geliştirici Araçları, bir web sayfasının HTML ve CSS kodunu Mac cihazlarda incelemenizi ve düzenlemenizi sağlar. Cmd+Opt+I tuşlarına basmanız yeterlidir. Ayrıca Safari menüsünü açabilir ve menü çubuğunda Tercihler > Gelişmiş > Geliştirme menüsünü göster'i seçebilirsiniz.

Tarayıcı Yığını

Web sitelerini test etmek için kullanabileceğiniz başka bir platform da BrowserStack'tir:

Bu bulut tabanlı test platformu, tüm büyük tarayıcılar ve cihazlarla çalışır. Ücretsiz deneme için kaydolduktan sonra Canlı kontrol paneline gidebilir ve işletim sisteminizi seçebilirsiniz.

Ardından, tarayıcınızda bir Canlı oturum başlatmak için tercih ettiğiniz tarayıcı sürümünü seçebilirsiniz. Son olarak, Inspect Element aracılığıyla yaptığınız gibi incelemek istediğiniz web sitesinde gezinebilirsiniz.

Bir Web Sitesi Nasıl İncelenir

Elemanı İncele aracını kullanarak bir web sitesini nasıl inceleyebileceğinize bir göz atalım. Herhangi bir web sayfası öğesine sağ tıklayarak ve içerik menüsünden İncele'yi seçerek başlayın:

Bu, tarayıcınızda Elemanı İncele aracını açacaktır. Araç açıldıktan sonra, web sayfasının görünümünü nasıl etkileyeceğini görmek için HTML ve CSS kodunu değiştirmeye başlayabilirsiniz.

Örneğin, bir öğenin rengini değiştirebilir, bir sınıf ekleyebilir veya kaldırabilir, hatta bir öğenin konumunu değiştirebilirsiniz. Bir metin parçasını veya görseli aramak için üst kısımdaki arama alanını da kullanabilirsiniz.

Elbette Inspect Element'i kullanarak yaptığınız tüm değişiklikler yalnızca geçicidir. Sayfayı yenilediğinizde veya tarayıcıyı kapattığınızda kaydedilmezler. Ancak bu, web sitenizi kalıcı olarak değiştirmeden belirli değişikliklerin nasıl görüneceğini denemenin harika bir yoludur.

Geliştirici araçlarını açmak için Ctrl+Shift+I (veya Mac'te Cmd+Opt+I ) tuşlarına basarak da araca erişebilirsiniz. Ardından, pencerenin üst kısmındaki Öğeler sekmesine tıklayın:

Son olarak, Inspect Element'e Chrome menüsünü açıp daha önce tartıştığımız Diğer araçlar > Geliştirici araçları'nı seçerek de erişebilirsiniz.

Bir Eleman Nasıl Değiştirilir

Bir web sayfasındaki bir öğeyi değiştirmek istiyorsanız, üzerine sağ tıklayın ve İncele'yi seçin. Açılan Elements panelinde değiştirmek istediğiniz parçayı bulun ve üzerine çift tıklayın.

Öğeler kutusunu açtığınızda, değiştirmek istediğiniz öğenin kaynak kodunu vurgulamak için panelin sol üst kısmındaki İncele imleç simgesini kullanabilirsiniz. Vurgulanan koda sağ tıkladığınızda HTML Olarak Düzenle'yi seçin:

Kutu genişleyecektir, ardından metni değiştirebilirsiniz. Değişiklikleri önizlemek için öğenin seçimini kaldırabilirsiniz. Düzenlemek için metne çift tıklayabilirsiniz.

Bir öğenin CSS kodunu değiştirmek için de bu tekniği kullanabilirsiniz. Bunu yapmak için, üzerine sağ tıklayın ve İncele'yi seçin. Öğeler panelinde, değiştirmek istediğiniz öğeyi bulun ve element.style özelliğini seçin. Ardından, kodunuzu veya bildirimlerinizi süslü parantez içinde ekleyebilirsiniz.

Bir Öğe Nasıl Gizlenir veya Silinir?

Ayrıca bir web sayfasındaki bir öğeyi gizlemek veya silmek isteyebilirsiniz. Gizlemek veya silmek istediğiniz öğeyi bulduğunuzda, öğeye sağ tıklayın ve Öğeyi İncele aracını başlatmak için İncele'yi seçin.

Buradan öğeye sağ tıklayın, ardından Öğeyi sil veya Öğeyi gizle seçeneğini seçin:

Sil düğmesi, Belge Nesne Modeli (DOM) öğesini kaldırır. Gizle düğmesi basitçe öğeyi gizler, ancak yine de DOM'da olacaktır.

CSS Sınıfları Nasıl İncelenir?

CSS sınıflarını incelemenin birkaç yolu vardır. Ancak, en kolay yöntem, incelemek istediğiniz öğeye sağ tıklayıp İncele'yi seçmektir. Ardından, CSS stillerini görmek için Stiller sekmesini açın:

Bu sekmenin size stil sayfasından gelenleri değil yalnızca uygulanan satır içi stilleri gösterdiğini unutmayın.

Bir öğeye uygulanan tüm CSS stillerini görmek istiyorsanız Hesaplanan sekmesini kullanabilirsiniz. Stil sayfasındakiler de dahil olmak üzere bir öğeye uygulanan tüm CSS stillerini gösterir:

Bir web sayfasını incelemeyi bitirdiğinizde, Elemanı İncele aracını kapatmanız yeterlidir. Değişiklikleriniz kaydedilmeyecek, bu nedenle yanlışlıkla bir şeyi bozma konusunda endişelenmenize gerek yok.

Bir Web Sitesini İncelerken Nelere Bakmalı?

Inspect Element'e erişmek için hangi yöntemi kullanırsanız kullanın, aynı arayüzü göreceksiniz. İki bölmeden oluşur: HTML bölmesi ve CSS bölmesi.

HTML bölmesi size web sayfasının yapısını gösterir. Çeşitli öğelerin nasıl iç içe ve ilişkili olduğunu görebilirsiniz.

CSS bölmesi, seçili öğeye uygulanan stilleri size gösterir. Değişikliklerinizin öğenin görünümünü nasıl etkileyeceğini görmek için CSS kurallarını da düzenleyebilirsiniz.

Bir web sitesinde belirli bir metin veya resim gibi belirli bir şey arıyorsanız, onu bulmanıza yardımcı olması için Inspect Element'i kullanabilirsiniz. Belirli bir öğeyi arayabileceğiniz bir arama alanına sahiptir.

Bir web sitesini incelerken aklınızda bulundurmanız gereken birkaç şey vardır:

• HTML: Web sayfasının yapısını tanımlayan kod. Unsurların nasıl organize edildiğine ve birbirleriyle nasıl etkileşime geçtiklerine dikkat edin.
• CSS: Web sayfasının stilini tanımlayan kod.
• JavaScript : Web sayfasının davranışını tanımlayan kod. Öğelerin nasıl etkileşime girdiğini ve sayfanın kullanıcı girişine nasıl yanıt verdiğini etkiler.
• Tasarım : Web sitesinin genel görünümü ve hissi. Düzenin ne kadar kullanıcı dostu olduğunu ve web sitesinin amacına ne kadar uygun olduğunu etkiler.
• İçerik: Web sitesinin metni, resimleri ve diğer ortamları.

Bir web sitesini incelerken nelere bakmanız gerektiği esas olarak tasarımcı, geliştirici veya dijital pazarlamacı olmanıza bağlı olacaktır. Daha önce tartıştığımız gibi, Inspect Element aracı, tasarım testinden sorun giderme sorunlarına kadar her konuda size yardımcı olabilir.

Çözüm

Inspect Element, tasarımcılar ve geliştiriciler için değerli bir özelliktir. Bir web sayfasının HTML ve CSS'sini görüntülemek ve düzenlemek için kullanabilirsiniz. Bu araç, üzerinde çalıştığınız bir web sayfasında değişiklik yapmak veya nasıl kodlandığını görmek istediğinizde yardımcı olabilir.

Inspect Element çoğu web tarayıcısında mevcuttur. Bir web sayfasına sağ tıklayarak ve menüden İncele'yi seçerek erişebilirsiniz. İncele penceresini açtığınızda, web sayfası için HTML ve CSS kodunu göreceksiniz ve çeşitli değişiklikler yapabilirsiniz.

Web sitenizin yönetimi veya optimizasyonu ile ilgili yardıma mı ihtiyacınız var? WP Engine'in WordPress barındırmadan site ve müşteri yönetimine kadar her konuda nasıl yardımcı olabileceğini öğrenin!