Bu sayfada, Chrome Geliştirici Araçları Konsolu'nun web sayfası geliştirmeyi nasıl kolaylaştırdığı açıklanmaktadır. Console'un 2 temel kullanımı 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, genellikle JavaScript'lerinin beklendiği gibi çalıştığından emin olmak için Play Console'a mesaj kaydeder. Bir mesajı günlüğe kaydetmek için JavaScript'inize console.log('Hello, Console!') gibi bir ifade eklersiniz. Tarayıcı, JavaScript'inizi yürüttüğünde ve böyle bir ifade gördüğünde, mesajı Console'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üklenip 3 saniye bekledikten sonra Console'un nasıl göründüğü gösterilmektedir. 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ı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. 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 biçimleridir.
JavaScript'i çalıştırma
Console aynı zamanda bir REPL'dir. İncelemekte olduğunuz 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 gösterilmektedir. Şekil 3'te ise sayfanın başlığını değiştirmek için Konsol kullanıldıktan 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 window öğesine tam erişime sahip olduğundan sayfayı Console'dan değiştirebilirsiniz. Geliştirici Araçları'nda, bir sayfayı incelemeyi kolaylaştıran birkaç kolaylık işlevi vardır. Örneğin, JavaScript'inizin hideModal adlı bir işlev içerdiğini varsayalım. debug(hideModal) komutunun çalıştırılması, bir sonraki çağrıda kodunuzun hideModal ilk satırında duraklatılmasını sağlar.
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 alakalı olmayan yeni bir
kod denemek için Console'u kullanabilirsiniz. Örneğin, yerleşik JavaScript Dizisi yöntemini (map()) yeni öğrendiğinizi ve bu yöntemle deneme yapmak istediğinizi varsayalım. Konsol, işlevi denemek
için iyi bir yerdir.
Konsolda JavaScript çalıştırma konusunda uygulamalı deneyim edinmek için JavaScript Çalıştırmaya Başlama bölümüne bakın.