Geliştiriciler ve UI tasarımcıları, kaynak kodunu değiştirmeden web sitelerini çevrimiçi olarak değiştirmek için Inspect Element özelliğini kullanır. Ancak, bir web geliştirme kursuna katılmadan öğeleri nasıl inceleyebilirim?
Inspect Element, popüler web tarayıcılarıyla kutudan çıkan kullanışlı bir geliştirici aracıdır. Web sitelerinde gezinirken aracı birkaç tıklamayla nasıl dağıtacağınızı bilmeniz yeterlidir.
Web sitesi düzenini değiştirmek, metinsiz ekran görüntüleri almak, yazı tiplerini değiştirmek, sayıları değiştirmek ve daha fazlası gibi birçok sihirbazlık numarası yapabilirsiniz.
Elemanları zahmetsizce nasıl inceleyeceğinizi öğrenmek için aşağıda adım adım kısa bir kılavuz bulun.
İnceleme Elemanı Nedir?
Inspect Element, çoğu web tarayıcısında bulunan bir web geliştirme aracıdır. Ziyaret ettiğiniz herhangi bir web sitesinin ön uç kaynak kodunu düzenlemek için kullanabilirsiniz.
Yaptığınız değişiklikler, web tarayıcınızın içindeki bir sanal alanda gerçekleşir. Yani, gerçek web sitesinde herhangi bir değişiklik yapmıyorsunuz. Ayrıca yaptığınız yüzeysel değişiklikler sayfayı yenilediğinizde kayboluyor.
İşte onu kullanmanın bazı yaratıcı yolları:
- Bir internet sitesinden ekran görüntüsü almanız gerekiyor ve görseldeki yazılar sizi rahatsız ediyor. Bu metinleri silmek için Elemanı İncele aracını kullanın.
- New York Times veya Washington Post'ta adınızı göstererek arkadaşlarınıza şaka yapmak istiyorsunuz. Inspect Element, bunu yapmanın en iyi yoludur.
- Inspect Element aracını kullanarak web sitelerindeki hata ayıklama kodlarını gerçek zamanlı olarak uygulayarak test edin. Çalışırsa, arka uç kaynak kodunu değiştirebilirsiniz.
- Bir dijital pazarlamacı olarak, bu güçlü web geliştirme aracını kullanarak rakiplerinizin anahtar kelimelerini, SEO başlıklarını, meta etiketlerini vb. ortaya çıkarabilirsiniz.
Windows'ta Öğeler Nasıl İncelenir
Inspect Element aracını Windows'ta kullanmak gülünç derecede kolaydır. Windows'ta çeşitli web tarayıcılarını kullanarak öğeleri incelemek için adım adım bir kılavuzu aşağıda bulabilirsiniz:
Google Chrome İnceleme Aracı
- Kullanırken Google Chrome, sağ tık bir web sitesinde herhangi bir yerde.
- Sağ tıklama bağlam menüsü açılacaktır.
- Alt kısımda, göreceksiniz İncelemek.
- Tıklamak İncelemek HTML ve CSS kodlarını görüntülemek için sağ yan panel.
Inspect Element'i Chrome'da Sağ Tıklamadan Nasıl Açarım?
Windows için Google Chrome'da Elemanı İncele aracını açmak için bazı kullanışlı kısayollar vardır. Bu kısayol tuşları aşağıdaki gibidir:
- Ctrl + Vardiya + C
- fonksiyon tuşu F12
Yukarıdaki kısayol tuşları, Windows için Mozilla tarayıcısında da çalışır.
Mozilla Müfettiş Aracı
Mozilla tarayıcısında, işlem Google Chrome ile aynıdır. Ancak Müfettiş pencere, Google Chrome'da olduğu gibi tarayıcının sağ tarafı yerine altında görünecektir.
Microsoft Edge İnceleme Aracı
Şaşırtıcı bir şekilde, Microsoft Edge'in Inspect Element özelliği, Google Chrome tarayıcısına benzer şekilde çalışır. İnceleme aracı sağ tıklandığında kullanılabilir. Ayrıca, HTML ve CSS kodları, Google Chrome'a benzer şekilde sağ tarafta görünür.
Mac'te Öğeler Nasıl İncelenir
Apple'ın Mac bilgisayarlarında Google Chrome, Mozilla Firefox veya Microsoft Edge kullanıyor musunuz? Evet ise, Windows bölümünde yukarıda belirtilen adımları izleyerek Elemanı İncele aracını dağıtabilirsiniz.
Ancak, varsayılan macOS web tarayıcısı Safari'yi kullanıyorsanız, Elemanı İncele aracını kullanmak zor bir oyundur. Varsayılan olarak Safari, Mac'te Elemanı İncele'yi göstermez. İşte yapmanız gerekenler:
Mac'te Inspect Element Nasıl Açılır
Öncelikle, bir Mac'te Safari'de geliştirici araçlarını etkinleştirmeniz gerekir. İşte nasıl:
- Koşmak the Safari tarayıcısı.
- Web öğelerini incelemek istediğiniz bir web sitesini ziyaret edin.
- Seçme Safari Safari tarayıcısının üst menü çubuğundan.
- Tıklamak Tercihler açılan bağlam menüsünden.
- Üzerinde Tercihler ekranı, seçme Gelişmiş.
- onay işareti Geliştirmeyi Göster altındaki menü Gelişmiş Tercihler ekran.
Mac için Safari'de geliştirici araçlarını başarıyla etkinleştirdiniz. Şimdi, Inspect Element'i kullanmak için şu adımları izleyin:
- Metin veya resim gibi bir web sitesinin herhangi bir öğesinde, sağ tık.
- Bir bağlam menüsü görünecektir. Alt kısımda, göreceksiniz Elemanı İncele.
- Web sitesinin altında HTML'yi gösteren bir hata ayıklama bölümü açmak için buna tıklayın ve CSS kodlar.
Elemanı İnceleme Tuşları Nelerdir?
Mac'te Inspect Element için kısayollar arıyor olabilirsiniz. Aşağıdakileri kullanabilirsiniz:
- Emretmek + Vardiya + C
- basın Kontrol tuşuna basın ve ardından herhangi bir öğeyi seçin.
- İzleme dörtgenini iki parmağınızla tıklayın
Chromebook'lardaki Öğeler Nasıl İncelenir?
Chromebook, Google Chrome'u varsayılan tarayıcı olarak kullanır. Bu nedenle, herhangi bir web sitesini açtıktan sonra, aşağıdaki içerik menüsünde Öğeyi İncele seçeneğini bulmak için sağ tıklayın.
İşten veya okuldan bir Chromebook kullanıyorsanız şu soruyu soruyor olabilirsiniz:
Neden Okul Chromebook'umda İnceleyemiyorum?
Çoğu okul ve işletme yöneticisi, iş veya eğitim için size sağladıkları Chromebook'taki gelişmiş özellikleri devre dışı bırakır. Geliştirici araçları gelişmiş özellikler olduğundan, okulunuz veya iş yeriniz Chromebook'ta Elemanı İncele aracını göstermez.
iPad/iPhone'da Öğeler Nasıl İncelenir
Ne yazık ki, Elemanı İncele aracını Mac olmadan bir iPhone veya iPad'de kullanamazsınız.
iOS ve iPadOS, Safari uygulaması için Web Denetçisine sahiptir. Ancak, yalnızca mobil aygıtı Safari için geliştirici araçlarını zaten etkinleştirmiş olduğunuz bir Mac'e bağlarsanız çalışır. Deneyebileceğiniz adımlar aşağıdadır:
- iPad/iPhone'u açın Ayarlar uygulama.
- Tıklamak Safari sol taraftaki gezinti bölmesinde.
- Ardından, bulmak ve seçmek için sağ tarafta aşağı kaydırın. Gelişmiş.
- için anahtarı etkinleştirin Web Denetçisi.
- Şimdi, kullanarak mobil cihazı Mac'e bağlayın. USB.
- Mac'te iPhone/iPad'i yetkilendirin.
- Herhangi bir web sitesini bir mobil cihazda Safari'de açın.
- Şimdi, Mac'te Safari'yi çalıştırın ve seçin Geliştirmek üst menü çubuğunda.
- Açılan bağlam menüsünde mobil cihazınızın adını arayın.
- Tüm açık web sitelerini görüntülemek için imleci mobil cihazın üzerine getirin.
- Şimdi, HTML ve CSS kaynak kodunu Mac'in Safari tarayıcısında görüntülemek için herhangi bir web sitesini seçin.
Çözüm
Geçici web sayfası düzenlemesi için Elemanı İncele aracını kullanmanın tüm olası yollarını keşfettiniz. Mac, Windows, Chromebook, iPad ve iPhone gibi çeşitli aygıtlar için öğeleri nasıl inceleyeceğinizi de öğrendiniz.
Bir dahaki sefere eğlence için veya profesyonel ihtiyaçlar için bir web sayfasını değiştirmeniz gerektiğinde, bu yöntemleri deneyin. Başka bir yerde açıklanan diğer karmaşık yöntemlere göre bu zahmetsiz adımları kesinlikle seveceksiniz.
Yukarıdaki adımlar size yardımcı olduysa, zorlayıcı bulduğunuz herhangi bir yöntem veya Elemanı İncele aracıyla ilgili herhangi bir gizli ipucu varsa aşağıya yorum bırakmayı unutmayın.
Basılı referans olarak bir web sayfasına mı ihtiyacınız var? Nasıl yapılacağını öğrenin bir web sayfasını hızlı bir şekilde PDF olarak kaydedin Şimdi!