Her modern web tarayıcısı güçlü bir geliştirici araçları paketi içerir. Bu araçlar, şu anda yüklü olan HTML, CSS ve JavaScript’i incelemeden sayfanın hangi varlıkları talep ettiğine ve yüklenmesinin ne kadar sürdüğünü göstermeye kadar çeşitli işleri yapar. Bu makalede, tarayıcınızın geliştirici ayarları temel işlevlerinin nasıl kullanılacağına bakacağız.
Tarayıcınızda geliştirici araçları nasıl açılır
Devtools (geliştirici araçları), hangi tarayıcıyı kullandığınıza bağlı olarak, tarayıcınızın içinde kabaca buna benzeyen bir alt şekilde çalışır:
Nasıl açıyoruz? Üç yol:
- Klavye: Ctrl + Shift + I, dışında
- Internet Explorer ve Edge: F12
- macOS: ⌘ + ⌥ + I
- Menü çubuğu:
- Firefox: ➤ Menü ➤ Web Geliştirici ➤ Geliştirici Araçları veya Web Geliştirici ➤ Araçlar
- Chrome: diğer araçlar ➤ Geliştirici araçları
- Safari: Geliştir ➤ Web Inspector
- Opera: Geliştirici ➤ Geliştirici araçları
- Sağ tık menüsü: Web sayfasındaki bir öğeyi basılı tutun/sağ tıklatın (Mac’de Ctrl tuşuna basıp tıklatın) ve görüntülenen bağlam menüsünde Öğeyi İncele’yi seçin. (Ek bir bonus: Bu yöntem, sağ tıkladiğiniz öğenin kodunu hemen gösterir.)
Denetçi: DOM gezgini ve CSS editörü
Geliştirici araçları genellikle aşağıdaki ekran görüntüsüne benzeyen denetçiye varsayılan olarak açılır. Bu araç, sayfanızdaki HTML’nin çalışma zamanında nasıl göründüğünü ve sayfadaki her öğeye CSS’nin ne uygulandığını gösterir. Ayrıca, HTML ve CSS’yi anında değiştirmenize ve değişikliklerinizin sonuçlarını tarayıcı görünüm penceresine canlı olarak yansıtmanıza olanak tanır.
Eğer denetçiyi görmezsen,
- Denetçi sekmesine dokunun/tıklatın.
- Internet Explorer’da DOM Gezgini’ne dokunun/tıklatın veya ctrl+1 tuşuna basın.
- Microsoft Edge veya Opera’da Öğeler’e dokunun/tıklatın.
- Safari’de, denetimler çok net bir şekilde sunulmaz, ancak pencerede görünecek başka bir şey seçmediyseniz HTML’yi görmeniz gerekir. CSS’yi görmek için Stil düğmesine basın.
DOM denetçisini keşfetme
Başlangıç için, DOM denetçisinde bir HTML öğesini sağ tıklatın ve bağlam menüsüne bakın. Kullanılabilir menü seçenekleri tarayıcılar arasında değişir, ancak önemli olanlar çoğunlukla aynıdır:
- Öğe Sil (bazen Düğüm Sil). Geçerli öğeyi siler.
- HTML olarak düzenle (bazen Öznitelik ekle/Metni düzenle). HTML’yi değiştirmenizi ve sonuçları anında görmenizi sağlar. Hata ayıklama ve test için çok kullanışlıdır.
- :hover/:active/:focus. Öğe durumlarını geçiş yapmaya zorlar, böylece stillerinin nasıl görüneceğini görebilirsiniz.
- HTML Olarak Kopyala/Kopyala. Seçili HTML’yi kopyalayın.
- Bazı tarayıcılarda, geçerli HTML öğesini seçecek CSS seçicisini veya XPath ifadesini kopyalamanıza izin vermek için CSS Yolunu Kopyala ve XPath’i Kopyala kullanılabilir.
Dom’unuzun bir kısmını düzenlemeyi şimdi deneyin. Bir öğeyi çift tıklatın veya sağ tıklatın ve bağlam menüsünden HTML Olarak Düzenle’yi seçin. İstediğiniz değişiklikleri yapabilirsiniz, ancak değişikliklerinizi kaydedemezsiniz.
CSS düzenleyicisini keşfetme
Varsayılan olarak, CSS düzenleyicisi seçili öğeye uygulanan CSS kurallarını görüntüler:
Bu özellikler kullanışlı olacaktır:
- Geçerli öğeye uygulanan kurallar, en çok en az spesifik sırasına göre gösterilir.
- Bildirimi kaldırırsanız ne olacağını görmek için her bildirimin yanındaki onay kutularını tıklatın.
- Özelliğin uzun bir şekilde yazılacak eşdeğerlerini göstermek için her kısayol özelliğinin yanındaki küçük oku tıklatın.
- Stil değişikliğinin canlı önizlemesini almak için yeni bir değerde anahtar atabileceğiniz bir metin kutusu getirmek için özellik adını veya değerini tıklatın.
- Her kuralın yanında, kuralın tanımlandığı dosya adı ve satır numarası vardır. Bu kuralı tıklatmak, geliştirme araçlarının genellikle düzenlenebilir ve kaydedilebileceği kendi görünümünde göstermek için atlamasına neden olur.
- Sayfanız için tamamen yeni bir bildirim yazabileceğiniz yeni bir satırda metin kutusu getirmek için herhangi bir kuralın kapanış küme ayracına tıklatabilirsiniz.
CSS Görüntüleyicisi’nin üst kısmında birkaç tıklanabilir sekme göreceksiniz:
- Hesaplanan: Bu, seçili öğenin hesaplanan stillerini (tarayıcının uyguladığı son, normalleştirilmiş değerler) gösterir.
- Düzen: Firefox’ta bu alan iki bölüm içerir:
- Kutu Modeli: geçerli öğenin kutu modelini görsel olarak temsil eder, böylece ona hangi dolgunun, kenarlık ve kenar boşluğunun uygulandığını ve içeriğinin ne kadar büyük olduğunu bir bakışta görebilirsiniz.
- Izgara: İncelediğiniz sayfa CSS Grid kullanıyorsa, bu bölüm ızgara ayrıntılarını görüntülemenizi sağlar.
- Yazı Tipleri: Firefox’ta, Yazı Tipleri sekmesi geçerli öğeye uygulanan yazı tiplerini gösterir.
Daha fazla bilgi edinin
Denetçi hakkında daha fazla için aşağıdaki yazılara bakabilirsiniz:
JavaScript hata ayıklayıcısı
JavaScript hata ayıklayıcısı, değişkenlerin değerini izlemenize ve kesme noktalarını, kodunuzda yürütmeyi duraklatmak istediğiniz yerleri ayarlamanıza ve kodunuzun düzgün yürütülmesini engelleyen sorunları tanımlamanıza olanak tanır.
Hata ayıklayıcıya ulaşmak için:
Firefox: Web Geliştiricisi ➤ Hata Ayıklayıcı’yı seçin veya JavaScript Hata Ayıklayıcı’yı açmak için Ctrl+Shift+S tuşuna basın. Devtools zaten görüntüleniyorsa Hata Ayıklayıcı sekmesine tıklayın.
Chrome: Geliştirici araçlarını açın ve Kaynaklar sekmesini seçin.
Edge ve Internet Explorer 11: F12’ye basın ve sonra Ctrl+3 tuşuna basın veya araçlar zaten görüntüleniyorsa Hata Ayıklayıcı sekmesine tıklayın.
Safari: Geliştirici Araçları’nı açın ve Hata Ayıklayıcı sekmesini seçin.
Hata ayıklayıcıyı keşfetme
Firefox’taki JavaScript Hata Ayıklayıcısı’nda üç bölme vardır.
Dosya listesi
Soldaki ilk bölme, hata ayıkladığınız sayfayla ilişkili dosyaların listesini içerir. Bu listeden çalışmak istediğiniz dosyayı seçin. Dosyayı seçmek ve içeriğini Hata Ayıklayıcı’nın orta bölmesinde görüntülemek için üzerine tıklayın.
Kaynak kodu
Yürütmeyi duraklatmak istediğiniz kesme noktalarını ayarlayın. Aşağıdaki resimde, 18 sayısındaki vurgu, satırın bir kesme noktası kümesi olduğunu gösterir.
İfadeleri ve kesme noktalarını izleme
Sağ bölmede, eklediğiniz saat ifadelerinin ve ayarladığınız kesme noktalarının listesi gösterilir.
Aşağıdaki görüntüde, ilk bölüm, ifadeleri izle, listItems değişkeninin eklendiğini gösterir. Dizideki değerleri görüntülemek için listeyi genişletebilirsiniz.
Bir sonraki bölüm olan Kesme Noktaları, sayfada ayarlanan kesme noktalarını listeler. example.js, dosyasında bir kesme noktası ayarlanmıştır listItems.push(inputNewItem.value);
Son iki bölüm yalnızca kod çalışırken görünür.
Yığın bölümü, geçerli satıra ulaşmak için hangi kodun yürütüldüğlerini gösterir. Kodun fare tıklatma işleyen işlevde olduğunu ve kodun şu anda kesme noktasında duraklatılmış olduğunu görebilirsiniz.
Son bölüm olan Kapsam, kodunuzda çeşitli noktalardan hangi değerlerin görülebildiğini gösterir. Örneğin, aşağıdaki resimde addItemClick işlevinde kod için kullanılabilir nesneleri görebilirsiniz.
Daha fazla bilgi edinin
Farklı tarayıcılarda JavaScript hata ayıklayıcısı hakkında daha fazla şeyi aşağıdaki makalelerden öğrenebilirsiniz:
- Firefox JavaScript Hata Ayıklayıcı
- Microsoft Edge Hata Ayıklayıcısı
- Chrome Hata Ayıklayıcısı
- Safari Hata Ayıklayıcısı
JavaScript konsolu
JavaScript konsolu, beklendiği gibi çalışmayan JavaScript’te hata ayıklamak için inanılmaz derecede kullanışlı bir araçtır. Tarayıcıda şu anda yüklü olan sayfada JavaScript satırları çalıştırmanıza olanak tanır ve tarayıcı kodunuzu yürütmeye çalışırken karşılaşılan hataları raporlar. Konsola herhangi bir tarayıcıdan erişmek için:
Geliştirici araçları zaten açıksa Konsol sekmesini tıklatın veya basın.
Değilse, Firefox konsolu doğrudan Ctrl+Shift+K kullanarak veya menü komutunu kullanarak açmanıza izin verir.
Bu size aşağıdaki gibi bir pencere verecektir:
Ne olduğunu görmek için konsola aşağıdaki kod parçacıklarını tek tek girmeyi deneyin (ve enter tuşuna basın):
alert('hello!');document.querySelector('html').style.backgroundColor = 'purple';const myWordmark = document.createElement('img'); myWordmark.setAttribute('src','https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png'); document.querySelector('h1').appendChild(myWordmark);
Şimdi kodun aşağıdaki yanlış sürümlerini girmeyi deneyin ve ne elde ettiğinizi görün.
alert('hello!);document.cheeseSelector('html').style.backgroundColor = 'purple';const myWordmark = document.createElement('img'); myBanana.setAttribute('src','https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png'); document.querySelector('h1').appendChild(myWordmark);
Tarayıcının döndürdüğü hata türünü görmeye başlayacaksınız. Genellikle bu hatalar oldukça şifrelidir, ancak bu sorunları çözmek de genellikle oldukça basittir.
Daha fazla bilgi edinin
JavaScript konsolu hakkında daha fazla bilgi için aşağıdaki yazılara bakabilirsiniz: