Bu sayfada, Chrome Geliştirici Araçları Konsolu'nun web sayfası geliştirmeyi nasıl kolaylaştırdığı açıklanmaktadır. Konsol 2 temel kullanım alanı vardır: günlüğe kaydedilen iletileri görüntüleme ve JavaScript'i çalıştırma.
Günlüğe kaydedilen iletileri görüntüleme
Web geliştiricileri, JavaScript'lerinin gerektiği gibi çalıştığından emin olmak için genellikle Konsol'a mesaj kaydeder
bekleniyor. Bir iletiyi günlüğe kaydetmek içinconsole.log('Hello, Console!')
JavaScript'e dokunun. Tarayıcı, JavaScript'inizi yürütüp böyle bir ifade gördüğünde
mesajı Console'a kaydetmesi gerektiğini varsayalım. Örneğin,
HTML ve JavaScript yazma işlemi aşağıda verilmiştir:
<!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üklenip 3 saniye bekledikten sonra Console'un nasıl göründüğü gösterilmektedir. Şunları deneyin: tarayıcının mesajları günlüğe kaydetmesine hangi kod satırlarının neden olduğunu belirleyebilirsiniz.
Şekil 1. Konsol paneli.
Web geliştiricileri, mesajları 2 genel nedenden dolayı günlüğe kaydeder:
- Kodun doğru sırada çalıştığından emin olmak
- Belirli bir zamandaki değişkenlerin değerlerini inceleme.
Günlük kaydı konusunda uygulamalı deneyim edinmek için Günlük Kaydı Mesajlarını Kullanmaya Başlama bölümüne bakın. Konsola göz atın.
API Referansı'nı tıklayarak console yöntemlerin tam listesine göz atabilirsiniz. Temel fark, iki dönem arasındaki
yöntemleri, günlüğe kaydettiğiniz verileri nasıl görüntüledikleridir.
JavaScript'i çalıştırma
Console aynı zamanda bir REPL'dir. Sayfayla etkileşimde bulunmak için Console'da JavaScript çalıştırabilirsiniz gözden geçireceksiniz. Örneğin Şekil 2'de Geliştirici Araçları ana sayfasının yanındaki Konsol gösterilmektedir. ve Şekil 3'te, sayfanın başlığını değiştirmek için Console kullanılarak sonra aynı sayfa gösterilmektedir.
2. Şekil. Geliştirici Araçları ana sayfasının yanındaki Konsol paneli.
3. Şekil. Sayfa başlığını değiştirmek için Console'u kullanma.
Console, sayfanın tüm içeriklerine tam erişime sahip olduğundan, sayfayı Console'dan değiştirmek mümkündür.
window. Geliştirici Araçları'nda, bir sayfayı incelemeyi kolaylaştıran birkaç kolaylık işlevi bulunur. Örneğin,
Örneğin, JavaScript'inizin hideModal adlı bir işlev içerdiğini varsayalım. Koşu
debug(hideModal), bir sonraki çağrıda kodunuzu hideModal etiketinin ilk satırında duraklatı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. Denemek için Console'u kullanabilirsiniz
sayfayla alakalı olmayan yeni bir kod yazmaktır. Örneğin, yerleşik destek bildirimleriyle ilgili bilgi edindiğinizi
map() JavaScript Dizisi yöntemi kullanıyor ve bu yöntemle deneme yapmak istiyorsunuz. Console iyi bir
işlevi deneyin.
JavaScript'i çalıştırmayla ilgili uygulamalı deneyim edinmek için JavaScript Çalıştırmaya Başlarken başlıklı makaleye bakın. Konsolda.