Inspect Element Nasıl Kullanılır

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

Inspect Element Nasıl Kullanılır

Her web tarayıcısı, bir web sitesinin kodlamasını kontrol etmek için geliştirici araçları sunar, ancak bu, 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. Inspect element özelliğinin neler sunabileceğini ve nasıl kullanılacağını öğrenmek için okumaya devam edin.

Belirli Bir Tarayıcıda Inspect Element Nasıl Kullanılır

Çoğu tarayıcıda bir web sitesinin öğelerini denetlemek için araçlar bulunur, ancak hepsi genellikle aynı şekilde çalışır.

Google Chrome'da Inspect Element'i Kullanma

  1. İncelemek istediğiniz web sitesini açın.

  2. Sayfada herhangi bir yere sağ tıklayın ve seçin İncelemek.

    VEYA

  3. Araç çubuğunuzun sağ köşesindeki üç dikey noktayı tıklayın.

  4. git Diğer Araçlar.

  5. Seçme Geliştirici Araçları.

    VEYA

  6. basın F12 PC'de klavye kısayol tuşu veya CMD + Seçenekler + I bir Mac'te.

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 noktayı tıklayın.
  3. Aşağı kaydırın ve tıklayın Diğer Araçlar.

  4. Tıklamak Geliştirici Araçları.

    VEYA

  5. Web sitesinde herhangi bir yere sağ tıklayın.
  6. Tıklamak İncelemek.

    VEYA

  7. basmak Ctrl + Üst Karakter + I.

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ölmenin açıldığını göreceksiniz. 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ü istediğiniz 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 üç dikey noktaya tıklayın.

  2. Bir rıhtım tarafı seçin (sol, alt veya sağ) veya ayrı bir pencereye çıkarın.

İmleci Geliştirici Araçları paneli çerçevesinin kenarının yanında gezdirmek ve sürüklemek, çalışma alanını daraltacak veya genişletecektir. Örneğin, paneli tarayıcı penceresinin sağ tarafına yerleştirmeyi seçerseniz, sol kenarda gezinmeyi deneyin. Ok imlecini gördüğünüzde paneli yeniden boyutlandırmak için sürükleyebilirsiniz.

İnceleme Öğesini Kullanma (OS'a Özel)

İlgili adımların çoğu, yalnızca Inspect Element'i tarayıcıda nasıl kullanacağınızı göstererek kapsanmış olsa da, ilk etapta var olduğu yerde, ancak yine de çoğu işletim sisteminde nasıl olduğunu göstereceğiz.

Bir Chromebook'ta Inspect Element Nasıl Kullanılır

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

  1. Bir web sitesi açın.

  2. Araç çubuğunun sağ üst köşesindeki üç dikey çizgiye tıklayın.

  3. Seçme Diğer Araçlar.

  4. Tıklamak Geliştirici Araçları.

Ayrıca sağ tıklama yöntemini veya F12 Geliştirici Araçlarına daha hızlı ulaşmak için işlev tuşu.

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 Inspect Element paneline nasıl ulaşacağınızı kontrol edin:

  1. basın F12 fonksiyon tuşu.
  2. Seçmek Cihaz Çubuğunu Aç/Kapat.

  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, Android cihazınızda Inspect Element özelliğini masaüstünüzün rahatlığında kullanmakta özgürsünüz.

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

Aynı zamanda 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

Öğeyi Denetle aracı, mutlaka işletim sistemine özel değildir, 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 mutlaka Windows olmadığı anlamına gelir. Ancak, hangi tarayıcıyı tercih ederseniz edin, Inspect Element paneline gidebilirsiniz.

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

  1. İncelemek istediğiniz web sitesini açın.

  2. Tarayıcı penceresinin köşesindeki üç dikey noktaya dokunun.

  3. Aşağı kaydırın ve seçin Diğer Araçlar.

  4. Tıklamak Geliştirici Araçları.

Ayrıca F12 Inspect Element'e daha hızlı erişmek istiyorsanız fonksiyon tuşuna basın. Ayrıca, web sayfasına sağ tıklayıp Denetle'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'i Safari'de açmak, Chrome ve Firefox'tan biraz farklıdır. Ancak bu adımlarla bu kadar basit:

  1. Safari tarayıcısını açın.
  2. Tıklamak Safari başlık sekmesinde.
  3. Seçme Tercihler açılır menüden.
  4. Tıkla ileri ekranın üst kısmında bulunan dişli simgesi.
  5. yazan kutuyu işaretleyin Menü çubuğunda Geliştirme menüsünü göster.

Bu adımların üzerinden geçmek, tarayıcınızda Öğeyi İ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şlar komutunu da kullanabilirsiniz: CMD + Seçenek + I (incelemek).

Bir iPhone'da Inspect Element Nasıl Kullanılır

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

  1. git Ayarlar.

  2. Şimdi, seçin Safari.

  3. Aşağıya kaydırın ve üzerine dokunun. Gelişmiş Menü.

  4. Şimdi, açmak için geçiş anahtarına dokunun Web Müfettişi.

Ayrıca, Mac'inizde Geliştirme menüsünün etkinleştirildiğinden emin olmanız gerekir:

  1. Safari'yi açın.
  2. Seçme Safari üst başlıklardan.
  3. Ardından, üzerine tıklayın Tercihler.
  4. Ardından, tıklayın ileri.
  5. yazan kutuyu işaretleyin Menü çubuğunda Geliştirme menüsünü göster.

Hem iOS mobil aygıtını hem de Mac'i etkinleştirdikten sonra, Mac'inizin üst çubuğundaki 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 talimatların yalnızca Mac çalıştıran Safari için çalıştığını, Windows'ta Safari için geçerli olmadığını unutmayın.

Google Formlarda Inspect Element Nasıl Kullanılır?

İnceleme Öğesini Google Formlar'da da kullanabilirsiniz. Ancak, bir testin cevaplarını arıyorsanız, şansınız kalmadı. Kodlamada gömülü cevapları bulamazsınız. Yanıtları yalnızca formu oluşturan veya düzenleyen sizseniz görüntüleyebilirsiniz. Her iki durumda da, Google Formlar'da bir testi yanıtlayan bir öğrenciyseniz, yalnızca kendi yanıtlarınızı görürsünüz.

  1. Forma sağ tıklayıp seçebilirsiniz. İncelemek formun tüm kodunu görmek için

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

Bazen, bir web sayfasını inceleyemeyeceğinizi ve üzerine sağ tıklamayı denerseniz İncele seçiminin grileştiğini fark edeceksiniz. Engellendiğini düşünebilirsiniz, ancak bunun birçok yolu vardır:

Yöntem 1 - Javascript'i Kapat

  1. içine gir Ayarlar.

  2. Arama "JavaScript”.

  3. Kapatmak JavaScript.

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

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

  1. git Ayarlar tarayıcınızda.

  2. Seçme Diğer Araçlar.

  3. Aşağı kaydırın ve tıklayın Geliştirici araçları.

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

Ayrıca kullanmayı deneyebilirsiniz F12 Inspect için sağ tıklamayı engelleyen web sayfalarındaki işlev tuşu.

Sizin için işe yarayan biriyle karşılaşmadan önce tüm bu yöntemleri denemeniz gerekebilir. Son çare olarak, yazarak kaynak kodunu görüntülemeyi de deneyebilirsiniz. view-source: [tam url'yi girin]. Wikipedia görünüm-kaynak sayfası

Discord'da Inspect Element Nasıl Kullanılır?

Discord'da kodlamanızı kontrol etmek kolay bir işlemdir. sadece kullan Ctrl + Üst Karakter + I komut veya F12 Bir Discord sayfasındaki tuşa basın.

Bir Okul Chromebook'unda Inspect Element Nasıl Kullanılır

Chromebook'unuz bir okul tarafından verildiyse Öğeyi Denetle özelliğini kullanmak birkaç basit adımı içerir:

  1. Web sayfasına sağ tıklayın veya iki parmakla dokunun ve İncelemek.
  2. basmak Ctrl + Üst Karakter + I.
  3. “ gibi view-source:[url] yöntemini deneyin ve kullanın.görünüm-kaynak://www.wikipedia.com", tırnak işaretleri olmadan.

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

Yanıtları Bulmak için İnceleme Öğesi Nasıl Kullanılır?

Inspect Element'i aşağıdakiler gibi çeşitli soruların yanıtlarını bulmak için kullanabilirsiniz:

  1. Mobil cihazlarda site tasarımının önizlemesi.
  2. Rakiplerin kullandığı anahtar kelimeleri öğrenin.
  3. Hız testleri.
  4. Bir web sayfasındaki metni değiştirme.
  5. 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 kodlamaları göreceksiniz. Buna yerleşik tüm JavaScript, CSS ve HTML kodlaması dahildir. 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 tasarım değişikliklerini tamamlamadan önce görmelerini çok değerli 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önecektir.

Ek SSS

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

Öğeyi İncele özelliğini kullanarak yanıtları bulmanın tek yolu, web sitesinin gönderildikten sonra anında ifşa etmesidir. Bu durumda, cevaplar kodlamada mevcuttur.

Aksi takdirde, Öğeyi Denetle özelliğini kullandığınızda testin veya testin kodlamasını ve ayrıca gönderdiğiniz tüm yanıtları görüntülüyorsunuz.

Tespit Elemanı Yasadışı mı?

Hayır, Inspect Element 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 istismar girişimi vb. gibi kötü amaçlarla kullanırsanız sorun haline gelir.

Tarayıcıda Inspect Element'i Devre Dışı Bırakmak Mümkün mü?

Kısa cevap hayır.

Bir tarayıcıda İnceleme Öğesini devre dışı bırakamazsınız. Ancak, kullanıcıların bir web sayfasına sağ tıklamak gibi belirli eylemleri yapmasını engelleyen parametreler ayarlayabilirsiniz. Belirli olayları devre dışı bırakmak için doğru komut dosyalarını ayarlamak için çevrimiçi çok sayıda öğretici vardır. Ancak, Öğeyi Denetle özelliğini bütünüyle devre dışı bırakamazsınız.

Bir Web Sayfasının Yapılarını Tanıyın

Bir web sayfasının Öğeyi İncele özelliğini kontrol etmek, muhtemelen, kendiniz bir geliştirici olmasanız bile, ihtiyacınız olduğunu asla bilmediğiniz bir geliştirici aracıdır. Web sitenizin daha sorunsuz çalışmasını sağlayacak tonlarca tasarım ve pazarlama uygulamasına sahiptir. Ve belki 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.


$config[zx-auto] not found$config[zx-overlay] not found