Bu sayfada, Chrome Geliştirici Araçları Konsolu'nun web sayfası geliştirmeyi nasıl kolaylaştırdığı açıklanmaktadır. Konsolun 2 ana kullanım alanı vardır: günlüğe kaydedilen mesajları görüntüleme ve JavaScript'i çalıştırma.
Günlüğe kaydedilen iletileri görüntüleme
Web geliştiricileri, JavaScript'lerinin beklendiği gibi çalıştığından emin olmak için genellikle Konsol'a mesajları günlüğe kaydeder. Bir mesajı günlüğe kaydetmek için JavaScript'inize console.log('Hello, Console!') gibi bir ifade eklersiniz. Tarayıcı JavaScript'inizi çalıştırıp buna benzer bir ifade gördüğünde, mesajı Konsol'a kaydetmesi gerektiğini bilir. Örneğin, bir sayfa için HTML ve JavaScript
yazma sürecinde olduğunuzu varsayalım:
<!doctype html>
<html>
<head>
<title>Console Demo</title>
</head>
<body>
<h1>Hello, World!</h1>
<script>
console.log('Loading!');
const h1 = document.querySelector('h1');
console.log(h1.textContent);
console.assert(document.querySelector('h2'), 'h2 not found!');
const artists = [
{
first: 'René',
last: 'Magritte'
},
{
first: 'Chaim',
last: 'Soutine'
},
{
first: 'Henri',
last: 'Matisse'
}
];
console.table(artists);
setTimeout(() => {
h1.textContent = 'Hello, Console!';
console.log(h1.textContent);
}, 3000);
</script>
</body>
</html>
Şekil 1'de, sayfa yüklendikten ve 3 saniye bekledikten sonra Konsolun nasıl göründüğü gösterilmiştir. Tarayıcının mesajları günlüğe kaydetmesine hangi kod satırlarının neden olduğunu bulmaya çalışın.
Şekil 1. Konsol paneli.
Web geliştiricileri, mesajları 2 genel nedenden dolayı günlüğe kaydeder:
- Kodun doğru sırayla çalıştığından emin olmak.
- Değişkenlerin değerlerini belirli bir andaki gözden geçirme.
Günlük kaydı konusunda uygulamalı deneyim edinmek için Günlük Kaydı Mesajlarını Kullanmaya Başlayın bölümüne bakın. console yöntemlerinin tam listesine göz atmak için Console API Referansı'nı inceleyin. Yöntemler arasındaki temel fark, günlüğe kaydettiğiniz verileri gösterme şeklidir.
JavaScript'i çalıştırma
Konsol aynı zamanda bir REPL'dir. İncelediğiniz sayfayla etkileşimde bulunmak için Konsol'da JavaScript'i çalıştırabilirsiniz. Örneğin, Şekil 2'de Geliştirici Araçları ana sayfasının yanındaki Konsol ve Şekil 3'te sayfanın başlığını değiştirmek için Console kullanıldıktan sonra aynı sayfa gösterilmektedir.
2. Şekil. Geliştirici Araçları ana sayfasının yanındaki Konsol paneli.
3. Şekil. Konsol'u kullanarak sayfanın başlığını değiştirme.
Console'un, sayfadaki window öğesine tam erişimi olduğundan sayfa Konsoldan değiştirilebilir. Geliştirici Araçları'nda, bir sayfanın incelenmesini kolaylaştıran birkaç kullanışlı işlev bulunur. Örneğin, JavaScript'inizin hideModal adlı bir işlev içerdiğini varsayalım. debug(hideModal) çalıştırıldığında, kod bir daha çağrıldığında hideModal kodunun ilk satırında duraklatılır.
Yardımcı program işlevlerinin tam listesini görmek için Console Utilities API Referansı'na bakın.
JavaScript'i çalıştırdığınızda sayfayla etkileşimde bulunmanız gerekmez. Sayfayla ilgili olmayan yeni bir kod denemek
için Console'u kullanabilirsiniz. Örneğin, yerleşik map() JavaScript Dizi yöntemi hakkında bilgi sahibi olduğunuzu ve bu yöntemle deneme yapmak istediğinizi varsayalım. Console, işlevi denemek için
iyi bir yerdir.
Console'da JavaScript'i çalıştırma konusunda uygulamalı deneyim edinmek için JavaScript Çalıştırmaya Başlayın bölümüne bakın.