JavaScript web uygulamalarını test etmek ve hata ayıklamak için Konsol'u kullanın.
Genel Bakış
Bu sayfada, Chrome Geliştirici Araçları Konsol'un web sayfası geliştirmeyi nasıl kolaylaştırdığı açıklanmaktadır. Konsolun 2 ana kullanımı vardır: günlüğe kaydedilen mesajları görüntüleme ve JavaScript'i çalıştırma.
Konsolu aç
Konsol'u panel olarak veya Çekmece'de sekme olarak açabilirsiniz. Bunu nasıl yapacağınızı öğrenmek için özellik referansımızdaki Console'u açma bölümüne bakın.
Günlüğe kaydedilen mesajları görüntüleme
Web geliştiricileri, JavaScript'lerinin beklendiği gibi çalıştığından emin olmak için genellikle Konsol'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 buna benzer bir ifade gördüğünde, mesajı Konsol'a kaydetmesi gerektiğini bilir. Örneğin, bir sayfanın HTML ve JavaScript'ini 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 beklendikten sonra Console'un görünümü gösterilmektedir. Tarayıcının iletileri günlüğe kaydetmesine neden olan kod satırlarını bulmaya çalışın.
Şekil 1. Konsol paneli.
Web geliştiricileri, mesajları iki genel nedenden dolayı günlüğe kaydeder:
- Kodun doğru sırada yürütüldüğünden emin olma
- Belirli bir zamandaki değişken 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 çalıştırma
Konsol da bir REPL'dir. İncelemekte olduğunuz sayfayla etkileşimde bulunmak için Konsolda JavaScript çalıştırabilirsiniz. Örneğin, Şekil 2'de Geliştirici Araçları ana sayfasının yanındaki Konsol, Şekil 3'te ise sayfanın başlığını değiştirmek için Konsol kullanıldıktan sonra aynı sayfa gösterilmektedir.
Şekil 2. DevTools ana sayfasının yanındaki Konsol paneli.
Şekil 3. Sayfanın başlığını değiştirmek için Konsol'u kullanma.
Console, sayfanın window'ına tam erişime sahip olduğundan sayfayı Console'dan değiştirmek mümkündür. Geliştirici Araçları'nda, sayfaları incelemeyi kolaylaştıran birkaç kolaylık işlevi bulunur. Örneğin, JavaScript'inizin hideModal adlı bir işlev içerdiğini varsayalım. debug(hideModal) çalıştırıldığında, kodunuz bir sonraki çağrısında hideModal'ın 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ırırken sayfayla etkileşime geçmeniz gerekmez. Sayfayla alakalı olmayan yeni bir kodu denemek için Konsolu kullanabilirsiniz. Örneğin, yerleşik JavaScript dizisi yöntemi map() hakkında bilgi edindiğinizi ve bu yöntemi denemek istediğinizi varsayalım. Bu işlevi denemek için Console'u kullanabilirsiniz.
Konsol'da JavaScript çalıştırmayla ilgili uygulamalı deneyim edinmek için JavaScript Çalıştırmaya Başlama başlıklı makaleyi inceleyin.