"Inspect Element", herhangi bir web sayfasında HTML kodunu izlemek için kullanabileceğiniz Firefox tarayıcısında bulunan bir geliştirici aracıdır. Bir web sayfasının HTML ve CSS stil sayfaları "Inspect Element" ile düzenlenebilir. Bir sayfayı istediğiniz gibi düzenlemeyi deneyebilir ve düzenlenen web sayfasını yeniden yükleyerek eski haline geri getirebilirsiniz.
Adım
Bölüm 1 / 2: Öğeleri Kontrol Etme
Adım 1. Firefox'u güncelleyin (isteğe bağlı)
Firefox'un daha eski bir sürümünü kullanıyorsanız, bu makalede açıklanan özelliklere erişemeyebilirsiniz. Hangi Firefox sürümünü kullandığınızı kontrol ettiğinizde güncelleme otomatik olarak yüklenecektir.
Firefox 9 ve önceki sürümlerinde "Öğeyi İncele" aracı hiç yoktur
Adım 2. Herhangi bir web sayfası öğesini sağ tıklayın
Herhangi bir resme, metne, arka plana veya öğeye sağ tıklayabilirsiniz. Farenizin yalnızca bir düğmesi varsa, sol tıklama ve Kontrol tuşu kombinasyonu sağ tıklamayla sonuçlanır.
3. Adım. Açılır menüden "Öğeyi İncele"ye tıklayın
Pencerenin altında bir araç çubuğu görünecektir. Araç çubuğunun altında bir panel de görünecek ve etkin sayfada HTML kodunu görüntüleyecektir.
Adım 4. Mevcut araç çubuklarını ve panelleri tanıyın
"Öğeyi İncele"yi kullandığınızda, tarayıcı penceresinin altında birkaç panel açılacaktır. Aşağıda, "Öğeyi Denetle"deki araç çubuklarının ve panellerin adları ve işlevleri açıklanmaktadır:
- En üst sırada Araç Kutusu Araç Çubuğu bulunur. Burada bulunabilecek birkaç araç var ama biz soldaki Müfettiş düğmesine odaklanacağız. Bu kılavuz boyunca bu düğmenin etkin olduğundan (etkin olduğunda maviye dönen düğmenin rengiyle belirtilir) emin olun.
- Bunun altında, o anda seçili olan öğenin konumunu gösteren bir HTML öğelerinin kırıntıları satırı vardır.
- Gezinme istemlerinin altındaki bölme, web sayfasının HTML ağacını veya "İşaretleme Görünümü"nü gösterir. Seçilen öğenin HTML'si bu bölmede işaretlenecek ve ortalanacaktır.
- Sağdaki bölme, geçerli web sayfasının CSS stil sayfasını görüntüler.
Adım 5. Başka bir öğe seçin
Araç çubuğu açıkken diğer öğeleri kolayca seçebilirsiniz. Bunu yapmanın üç yolu vardır:
- Seçilen öğeyi işaretlemek için bir HTML satırının üzerine gelin (bu özellik Firefox 34+ gerektirir). Bu öğeyi seçmek için HTML'yi tıklayın.
- Araç çubuğunun sol köşesindeki "Öğe Seç" aracına tıklayın: bir kutunun üzerinde imleç şeklinde bir simgeye sahiptir. Bir öğeyi işaretlemek için imleci web sayfasında hareket ettirin ve seçmek için tıklayın.
Adım 6. HTML kodunu izleyin
HTML bölmesinde herhangi bir yeri tıklayın. Koddan koda geçmek için klavyedeki sol ve sağ yön tuşlarını kullanın (bu özellik Firefox 39+ gerektirir). Bu yöntem, imleçle seçilemeyecek kadar küçük öğeleri seçmek için kullanışlıdır.
- Grileştirilmiş HTML, sayfada görüntülenmeyen öğeleri belirtir. Buna dahil olan öğeler, düğümler gibi yorumlar ve CSS görüntüleme özelliği tarafından gizlenen diğer öğelerdir.
- İçeriği göstermek veya gizlemek için kutunun solundaki oku tıklayın. Tüm içeriği görüntülemek için oku tıklatırken alt=""Görüntü" veya seçeneğini basılı tutun.</li" />
Adım 7. Öğeyi bulun
İçerik haritaları satırının en sağ köşesindeki arama alanını (döngü şeklindeki simge) arayın. Arama alanını genişletmek için tıklayın ve aramak istediğiniz HTML kodunu yazın. Siz yazarken, eşleşen arama sonuçlarını gösteren bir açılır pencere görüntülenecektir. Arama sonuçlarından bir öğeye tıklayın ve HTML bölmesini aradığınız koda kaydırın.
Bölüm 2/2: HTML'yi Düzenleme
Adım 1. Baştan başlamak için sayfayı yeniden yükleyin
Web sitesi geliştirme araçlarında yeniyseniz, düzenlediğiniz sayfalarda kalıcı değişiklikler yapmadığınızı unutmayın. Düzenlemeleriniz yalnızca siz sayfayı yeniden yükleyene veya kapatana kadar ekranınızda görünür. Ne olacağını bilmeseniz bile denemekten çekinmeyin.
Adım 2. Düzenlemek için HTML'ye çift tıklayın
Satır içi HTML'ye çift tıklayın. Yeni metni yazın ve değişiklikleri kaydetmek için enter tuşuna basın.
Adım 3. Daha fazla seçenek getirmek için aracı içerik haritasında basılı tutun
İçerik haritası araç çubuğunun, HTML ağacı ile üstündeki araç çubuğu arasında yer aldığını unutmayın. Daha fazla menü açmak için bu satırdaki bir araca tıklayın ve basılı tutun. Aşağıda mevcut seçeneklerin bir ipucu verilmiştir (ayrıntılı değil):
- "HTML Olarak Düzenle", her satırı düzenlemek yerine tüm HTML içeriğini doğrudan HTML ağacından düzenlemenize olanak tanır.
- "İç HTML'yi Kopyala", düğümün içindeki tüm içeriği kopyalarken, "Dış HTML'yi Kopyala", içerikleri ve düğümleri (örneğin veya
- "Yapıştır →", düğümden önce veya düğümün ilk alt öğesinden sonra olduğu gibi, kopyanın nereye yapıştırılacağına ilişkin çeşitli seçenekler getirir.
- :hover,:active ve:focus, kullanıcı etkileşim kurduğunda öğenin görünümünü değiştirir. Değiştirilen efektler CSS stil sayfasından tanımlanır (Sağdaki panelden düzenlenebilir).
Adım 4. Sürükleyip bırakın
Koddaki öğeleri yeniden düzenlemek için HTML'yi tıklayın ve noktalı bir çizgi görünene kadar basılı tutun. Çizgiyi ağaçta yukarı ve aşağı hareket ettirin ve çizgi istediğiniz yere geldiğinde fare düğmesini bırakın.
Bu özellik için Firefox 39 ve sonraki sürümleri gerekir
Adım 5. Geliştirici araç çubuğunu kapatın
Öğeyi İncele penceresinin tamamını kapatmak için, CSS panelinin üzerinde bulunan araç çubuğunun sağ üst köşesindeki X düğmesine tıklayın.
İpuçları
- Araç çubuğunu pencerenin üst kısmındaki menü seçeneklerinden de açabilirsiniz:
- Windows: Firefox → Web Geliştirici → Araçları Değiştir
- Mac veya Linux: Araçlar → Web Geliştirici → Araçları Değiştir
- Firefox 40, HTML'yi düzenlemek için daha fazla alana sahip olmanız için CSS panelini gizleme seçeneğine sahiptir. İçerik haritaları satırının en sağ köşesinde ve arama alanının sağındaki ok simgesini arayın. CSS panelini gizlemek için bu simgeye tıklayın ve açmak için tekrar tıklayın.
- CSS panellerini de düzenleyebilirsiniz, ancak bunlar bu makalede listelenmemiştir. İnternette CSS kodunu düzenleme talimatlarını bulabilirsiniz.
