Inspect Element Nasıl Kullanılır?

Cihaz Bağlantıları

• Android
• Chromebook
• Mac
• pencereler
• Cihaz Eksik mi?

Çoğu insan, ellerinde bir geliştirici araçları hazinesi olduğunun ve bunun en sevdikleri tarayıcıda gizlendiğinin farkında değil.

Her web tarayıcısı, bir web sitesinin kodlamasını kontrol etmek için geliştirici araçları sunar. Ancak, ortalama bir internet kullanıcısı için yabancı bir varlıktır. Sonuçta, kim bir web sitesinin kodlamasına bakmak ister, değil mi?

Görünen o ki, bir web sitesinin kodlamasına bakarak öğrenebileceğiniz pek çok şey var. Öğeyi incele özelliğinin neler sunabileceğini ve nasıl kullanılacağını öğrenmek için okumaya devam edin.

Çoğu tarayıcı, bir web sitesinin öğelerini incelemek için araçlara sahiptir, ancak genel olarak hepsi aynı şekilde çalışır.

Google Chrome'da Inspect Element'i Kullanma

1. İncelemek istediğiniz web sitesini açın.
   
2. Sayfada herhangi bir yeri sağ tıklayın ve İncele'yi seçin .
   
   VEYA
3. Araç çubuğunuzun sağ köşesindeki üç dikey noktaya tıklayın .
   
4. Diğer Araçlar'a gidin .
   
5. Geliştirici Araçları'nı seçin .
   
   VEYA
6. PC'de F12 klavye kısayol tuşuna basın (veya Mac'te CMD + Options + I. )
   

Microsoft Edge'de Inspect Element'i Kullanma

1. Bir web sitesi açın.
   
2. Tarayıcının araç çubuğunun sağ üst köşesindeki üç dikey noktaya tıklayın .
   
3. Aşağı kaydırın ve Diğer Araçlar'a tıklayın .
   
4. Geliştirici Araçları'na tıklayın .
   
   VEYA
5. Web sitesinde herhangi bir yeri sağ tıklayın ve İncele'yi tıklayın .
   
   VEYA
6. Ctrl + Shift + I tuşlarına basın .
   

Bu üç yöntemden herhangi biri size aynı sonucu verecektir.

Bunu doğru yaptıysanız, tarayıcınızın altında yeni bir bölme açılır. Bunlar Geliştirici Araçlarıdır ve Öğeler sekmesini içerir. Bu, Elemanı İncelemek için ihtiyacınız olan araçtır.

Panel, varsayılan olarak ekranınızın altında açılır, ancak nasıl göründüğünü her zaman değiştirebilirsiniz. Geliştirici Araçları panelini yeniden konumlandırmak için şu basit adımları izleyin:

1. Geliştirici Araçları panelinin üst köşesindeki üç yatay noktaya tıklayın .
   
2. Bir sabitleme tarafı seçin (sol, alt veya sağ) veya ayrı bir pencereye ayırın.
   

İmleci Geliştirici Araçları paneli çerçevesinin kenarına getirmek ve sürüklemek çalışma alanını daraltır veya genişletir. Örneğin, paneli tarayıcı penceresinin sağ tarafına sabitlemeyi seçerseniz, sol kenarlığın üzerine gelmeyi deneyin. Ok imlecini gördüğünüzde yeniden boyutlandırmak için paneli sürükleyebilirsiniz.

Inspect Element'i Kullanma (İşletim Sistemine Özel)

Inspect Element'i tarayıcıda nasıl kullanacağınızı göstererek ilgili adımların çoğu ele alınmış olsa da, yine de çoğu işletim sisteminde nasıl olduğunu göstereceğiz.

Inspect Element'i Chromebook'ta Kullanma

Bir Chromebook'taki varsayılan tarayıcı Google'dır, bu nedenle Inspect Element'e erişmek için Chrome tarayıcı talimatlarını izleyin . İşte size küçük bir tazeleme kursu:

1. Bir web sitesi açın.
   
2. Araç çubuğunun sağ üst köşesindeki üç dikey noktaya tıklayın .
   
3. Diğer Araçlar'ı seçin .
   
4. Geliştirici Araçları'na tıklayın .
   

Geliştirici Araçları'na daha hızlı ulaşmak için sağ tıklama yöntemini veya F12 işlev tuşunu da kullanabilirsiniz .

Bir Android Cihazda Inspect Element Nasıl Kullanılır

Inspect Element'i bir Android cihazda çalıştırmak biraz farklıdır. Android'de Elemanı İncele paneline nasıl ulaşacağınızı kontrol edin:

1. F12 işlev tuşuna basın .
   
2. Cihaz Çubuğunu Değiştir'i seçin .
   
3. Açılır menüden Android cihazı seçin.
   

Belirli bir Android cihazı seçtiğinizde, web sitesinin mobil sürümünün yüklendiğini fark edeceksiniz. Buradan, Inspect Element özelliğini Android cihazınızda masaüstünüzün rahatlığında kullanmakta özgürsünüz.

Bu yöntem, Geliştirici Araçlarında Cihaz Simülasyonu adlı bir özelliğe sahip oldukları için hem Chrome hem de Firefox tarayıcıları için çalışır.

Ayrıca iPhone cihazları için de aynı şekilde çalışır. Açılır menüden doğru olanı seçmeniz yeterlidir.

Windows'ta Inspect Element Nasıl Kullanılır?

Elemanı İncele aracının işletim sistemine özel olması gerekmez, ancak tarayıcıya özeldir. Bu, Geliştirici Araçları'nın kullandığınız tarayıcının bir özelliği olduğu ve Windows'un olması gerekmediği anlamına gelir. Ancak, hangi tarayıcıyı tercih ederseniz edin Inspect Element paneline ulaşabilirsiniz.

Windows işletim sistemi kullanıyorsanız, muhtemelen Microsoft Edge tarayıcısını da kullanacaksınız. MS Edge'de Inspect Element'e nasıl erişeceğinize bakın:

1. İncelemek istediğiniz web sitesini açın.
   
2. Tarayıcı penceresinin köşesindeki üç dikey noktaya dokunun.
   
3. Aşağı kaydırın ve Diğer Araçlar'ı seçin .
   
4. Geliştirici Araçları'na tıklayın .
   

Inspect Element'e daha hızlı erişmek için F12 işlev tuşunu da kullanabilirsiniz . Ayrıca, web sayfasına sağ tıklayıp İncele'yi seçmek de çalışır.

Mac'te Inspect Element Nasıl Kullanılır

Mac kullanıyorsanız, tercih ettiğiniz tarayıcı muhtemelen Safari'dir. Inspect Elements'ı Safari'de açmak, Chrome ve Firefox'tan biraz farklıdır. Ancak şu adımlarla bu kadar basit:

1. Safari tarayıcısını açın.
   
2. Başlık sekmesinde Safari'ye tıklayın ve açılır menüden Tercihler'i seçin .
   
3. Ekranın üst kısmında bulunan Gelişmiş dişli simgesine tıklayın .
   
4. Menü çubuğunda Geliştirme menüsünü göster yazan kutuyu işaretleyin .
   

Bu adımlardan geçmek, tarayıcınızdaki Elemanı İncele özelliğini etkinleştirir. Önce Öğeyi İncele'yi etkinleştirmezseniz, bir web sitesini açtığınızda seçeneği görmezsiniz.

Bu adımı tamamladıktan sonra, herhangi bir açık web sayfasına sağ tıklayın ve İncele'yi seçin. Hızlı tuş komutunu da kullanabilirsiniz: CMD + Option + I (incele).

iOS'ta Inspect Element Nasıl Kullanılır?

Bir web sayfasının mobil sürümünün bir iPhone'da nasıl göründüğünü görmek için Öğeleri İncele özelliğini kullanmak istiyor musunuz? Bunu ve daha fazlasını birkaç basit adımla yapabilirsiniz. Ancak bir öğeye bakmadan önce, iOS aygıtınız için Web Denetçisini etkinleştirmeniz gerekir :

1. Ayarlar'a gidin .
   
2. Şimdi Safari'yi seçin .
   
3. En alta kaydırın ve Gelişmiş Menü'ye dokunun .
   
4. Şimdi, Web Denetçisini açmak için değiştirme anahtarına dokunun .
   

Ayrıca, yukarıdaki bölümdeki adımları izleyerek Mac'inizde Geliştirme menüsünün etkinleştirildiğinden emin olun.

Hem iOS mobil cihazlarını hem de Mac'leri etkinleştirdikten sonra, Mac'inizin üst çubuğunda Geliştirme menüsünü göreceksiniz. Bağlı iPhone'u ve cihazda etkin olan web sayfasını görmek için üzerine tıklayın. Web sayfasını seçmek, Mac ekranınızda aynı sayfa için bir Web Denetçisi penceresi de açar.

Ancak, bu yönergelerin yalnızca Mac çalıştıran Safari için geçerli olduğunu, Windows üzerinde Safari için geçerli olmadığını unutmayın.

Inspect Element Engellendiğinde Nasıl Kullanılır?

Nadiren, bir web sayfasını inceleyemeyeceğinizi ve üzerine sağ tıklamayı denerseniz İncele seçiminin gri olduğunu fark edeceksiniz. Engellendiğini düşünebilirsiniz, ancak bunu aşmanın birçok yolu vardır:

Yöntem 1 - Javascript'i Kapatın

1. Ayarlar'a gidin .
   
2. JavaScript'te arama yapın .
   
3. JavaScript'i kapatın .
   

Yöntem 2 – Geliştirici Araçlarına Uzun Yoldan Erişin

İncelemek için fareye sağ tıklamak yerine şunu yapın:

1. Tarayıcınızda Ayarlar'a gidin .
   
2. Diğer Araçlar'ı seçin .
   
3. Aşağı kaydırın ve Geliştirici araçlarına tıklayın .
   

Yöntem 3 - İşlev Tuşunu Kullanma

İncele için sağ tıklamayı engelleyen web sayfalarında F12 fonksiyon tuşunu kullanmayı da deneyebilirsiniz .

Sizin için uygun olana rastlamadan önce bu yöntemlerin hepsini denemeniz gerekebilir. Son çare olarak, view-source: [enter full url] yazarak kaynak kodunu görüntülemeyi de deneyebilirsiniz .

Inspect Element'i Okul Chromebook'unda Kullanma

Chromebook'unuz bir okul tarafından verildiyse Öğeyi İncele özelliğinin kullanılması birkaç basit adımı içerir:

1. Web sayfasına sağ tıklayın veya iki parmakla dokunun ve İncele öğesini seçin .
   
2. Ctrl + Shift + I tuşlarına basın .
   
3. view-source:[url] yöntemini deneyin ve kullanın, örneğin view-source:https://www.wikipedia.com .
   
   

Ancak bazı okullar ve kuruluşlar bu özelliği engeller, bu nedenle işinize yaramıyorsa kuruluşunuzla veya okul yöneticinizle iletişime geçmeniz gerekebilir.

Yanıtları Bulmak İçin Öğeyi İncele Nasıl Kullanılır?

Öğeyi Denetle'yi aşağıdakiler gibi çeşitli soruların yanıtlarını bulmak için kullanabilirsiniz:

• Site tasarımını mobil cihazlarda önizleme.
• Rakiplerin kullandığı anahtar kelimeleri bulun.
• Hız testleri.
• Bir web sayfasındaki metni değiştirme.
• Geliştiricilere neye ihtiyacınız olduğunu göstermek için hızlı örnekler bulun.

Inspect Element panelini başlattığınızda, web sitesi için tüm kodlamayı göreceksiniz. Bu, yerleşik tüm JavaScript, CSS ve HTML kodlamasını içerir. Kodda değişiklik yapabilmeniz dışında, bir web sayfasının kaynak kodlamasını görmek gibidir. Ayrıca, gerçek zamanlı olarak uygulanan değişiklikleri görebilirsiniz.

Bu araç, pazarlamacılar, tasarımcılar ve geliştiriciler için herhangi bir tasarım değişikliğini tamamlamadan önce görüntülemeyi paha biçilmez kılar. Ancak, Inspect Element ile kodlamada değişiklik yapmak sonsuza kadar sürmez. Sayfayı yeniden yüklediğinizde, varsayılan durumuna geri döner.

Ek SSS

Yukarıdakileri okuduktan sonra Inspect Element konusunda uzman değilseniz, burada daha fazla yanıt var.

Yanıtları Bulmak İçin Öğeyi İncele Komutunu Nasıl Kullanırım?

Elemanı İncele özelliğini kullanarak cevapları bulmanın tek yolu, web sitesinin bunu gönderildikten sonra anında göstermesidir. Bu örnekte, cevaplar kodlamada mevcuttur.

Aksi takdirde, Elemanı İncele özelliğini kullandığınızda sınav veya testin kodlamasını ve gönderdiğiniz tüm yanıtları görüntülüyorsunuz demektir.

Elemanı İncele Yasa Dışı mı?

Hayır, Elemanı İncele aracı yasa dışı değildir; web geliştiricileri için tasarlanmıştır. Bir web sitesinin kaynak kodunu görüntülemek yasa dışı değildir; yalnızca, toplanan bilgileri açıklardan yararlanmaya çalışmak vb. gibi hain amaçlarla kullanırsanız bir sorun haline gelir.

Tarayıcıda İnceleme Öğesini Devre Dışı Bırakmak Mümkün mü?

Kısa cevap hayır.

Öğeyi İncele'yi bir tarayıcıda devre dışı bırakamazsınız, ancak kullanıcıların bir web sayfasına sağ tıklamak gibi belirli eylemleri gerçekleştirmesini engelleyen parametreler ayarlayabilirsiniz. Belirli olayları devre dışı bırakmak için uygun komut dosyalarını ayarlamak için çevrimiçi olarak çok sayıda öğretici vardır. Ancak, Elemanı İncele özelliğini tamamen devre dışı bırakamazsınız.

Bir Web Sayfasının İçindekileri Tanıyın

Bir web sayfasının Inspect Element özelliğini kontrol etmek, muhtemelen ihtiyacınız olduğunu asla bilmediğiniz bir geliştirici aracıdır – kendiniz bir geliştirici olmasanız bile. Web sitenizin daha sorunsuz çalışmasını sağlayabilecek tonlarca tasarım ve pazarlama uygulamasına sahiptir. Ve belki de size bir rakipte avantaj sağlar.

Inspect Element'i ne için kullanıyorsunuz? Aşağıdaki yorumlar bölümünde bize bundan bahsedin.