Herhangi Bir Web Sayfasının HTML ve CSS'sine bakın
Web sitesi kod satırları ile oluşturulmuştur, ancak sonuç resim, video, yazı tipi ve daha fazlası olan belirli sayfalardır. Bu unsurlardan birini değiştirmek veya neyin içerdiğini görmek için, onu kontrol eden özel kod satırını bulmanız gerekir. Bunu bir eleman inceleme aracıyla yapabilirsiniz.
Çoğu web tarayıcısı sizi bir inceleme aracı indirmenize veya bir eklenti yüklemenize neden olmaz. Bunun yerine, sayfa öğesini sağ tıklatıp Öğeyi İnceleme veya İnceleme'yi seçmenize izin verirler. Ancak, işlem tarayıcınızda biraz farklı olabilir.
Chrome'da Elemanları İnceleyin
Google Chrome'un en yeni sürümleri, sayfayı birkaç şekilde incelemenize olanak tanır. Bunların tümü, yerleşik Chrome DevTools'unu kullanır:
- Sayfada bir şey (veya boş bir alan) sağ tıklayın ve İncele'yi seçin.
- Ctrl + ÜstKrkt + I klavye kısayolunu girin
- Diğer Araçlar> Geliştirici araçları seçeneğine erişmek için Chrome menüsünü kullanın
Chrome DevTools, HTML satırlarını kolayca kopyalamak veya düzenlemek veya öğeleri tamamen gizlemek veya silmek (sayfa yeniden yüklenene kadar) gibi işlemleri yapmanıza olanak tanır.
DevTools sayfanın kenarında açıldığında, nerede konumlandırılacağını değiştirebilir, sayfanın dışına çıkartabilir, tüm sayfaların dosyalarını arayabilir, belirli inceleme, dosya ve URL’leri kopyalamak için sayfadan öğeleri seçebilir ve hatta bir grubu özelleştirebilirsiniz. ayarların
Firefox'ta Elemanları İncele
Chrome gibi, Firefox'un Inspector adlı aracını açmanın birkaç farklı yolu var:
- Sayfadaki boş bir alanı sağ tıklayın veya bir öğe seçin ve Eleman İnceleyin'i seçin.
- Klavyeyle Ctrl + ÜstKrktr + T veya Ctrl + ÜstKrktr + I tuşlarına basın
- Firefox menüsünden Geliştirici > Denetçi'yi tıklayın.
- Araçlar menüsünden, Web Geliştirici> Denetçi'yi tıklayın.
Farenizi Firefox'taki çeşitli öğelerin üzerine getirdiğinizde, Inspector aracı otomatik olarak öğenin kaynak kodu bilgilerini bulur. Bir öğeyi tıklayın ve "anında arama" duracak ve öğeyi Inspector penceresinden inceleyebilirsiniz.
Desteklenen tüm denetimleri bulmak için bir öğeye sağ tıklayın. Sayfayı HTML olarak düzenlemek, iç veya dış HTML kodunu kopyalamak veya yapıştırmak, DOM özelliklerini, ekran görüntüsünü göstermek veya düğümü silmek, yeni öznitelikleri kolayca uygulamak, sayfanın tüm CSS'lerini görmek ve daha fazlasını yapmak gibi şeyler yapabilirsiniz.
Operadaki Elemanları İnceleyin
Opera, Chrome'la aynı olan DOM Inspector aracıyla öğeleri de denetleyebilir. Buna nasıl ulaşılacağı:
- Ctrl + ÜstKrktr + I klavye kısayolunu kullanın
- Menü> Diğer Araçlar> Geliştirici Göster menüsüne gidin ve ardından Menü> Geliştirici> Geliştirici Araçları'nı kullanarak menüyü açın.
- Sayfadaki herhangi bir öğedeki sağ tıklama menüsünden, İnceleme öğesini seçin.
Internet Explorer'da Elemanları İncele
Internet Explorer'da Geliştirici Araçları adı verilen benzer bir inceleme aracı kullanılabilir:
- Klavyede F12 tuşuna basın
- Araçlar> F12 Geliştirici Menüsü seçeneğini kullanın ( Araçlar menüsünü göremezseniz Alt + X tuşlarına basın )
- Sayfayı sağ tıklayın ve Eleman İnceleyin'i tıklayın.
IE, bu yeni menüde, HTML ve CSS ayrıntılarını görmek için herhangi bir sayfa öğesini tıklamanızı sağlayan bir Select öğesi aracına sahiptir. Ayrıca, DOM Gezgini sekmesinde gezerken öğenin vurgulanmasını kolayca devre dışı bırakabilir / etkinleştirebilirsiniz.
Yukarıdaki tarayıcılarda bulunan diğer öğe denetleyici araçları gibi, Internet Explorer HTML'yi düzenlemenin yanı sıra öğeleri düzenlemenize, kopyalamanıza ve yapıştırmanıza, öznitelikler eklemenize, ekli stilleri olan öğeleri kopyalamanıza ve daha fazlasını yapmanıza olanak tanır.