JavaScript Geliştirici Konsolunu Kullanma

Giriş

Modern tarayıcılar, JavaScript ve diğer web teknolojileriyle çalışmayı kolaylaştıran yerleşik geliştirme araçlarına sahiptir.
Bu araçların içinde, bir kabuk (shell) arayüzüne benzeyen Konsol bulunur. Ayrıca DOM’u inceleme, hata ayıklama ve ağ trafiğini analiz etme gibi işlevleri de içerir.

Konsol, JavaScript geliştirme sürecinde bilgi kaydetmek (loglamak) için kullanılabilir.
Ayrıca sayfa bağlamında JavaScript ifadeleri çalıştırarak web sayfasıyla etkileşim kurmanıza da imkân tanır.

Özetle, Konsol size ihtiyaç duyduğunuz anda JavaScript kodu yazma, yönetme ve izlemenin pratik bir yolunu sunar.

Bu rehberde tarayıcı içinde Konsol ve JavaScript ile nasıl çalışacağımızı öğreneceğiz.
Ayrıca web geliştirme sürecinde kullanabileceğiniz diğer yerleşik geliştirme araçlarına da genel bir bakış yapacağız.

Not: Bu rehberi takip ederken tarayıcınızın veya Konsol’un, örneklerdeki ekran görüntülerinden farklı göründüğünü fark edebilirsiniz.
Tarayıcılar sık sık güncellenir, yeni araçlar eklenebilir ya da görsel tasarımları değişebilir.
Bu güncellemeler, Konsolu kullanma yeteneğinizi etkilemez.

Tarayıcıda Konsolla Çalışmak

Standart tabanlı HTML ve XHTML’i destekleyen modern tarayıcıların çoğu, size Geliştirici Konsolu erişimi sağlar.
Bu konsol, terminal benzeri bir arayüzde JavaScript ile çalışmanıza imkân tanır.

Bu bölümde Chrome tarayıcısında Konsola nasıl erişileceğini inceleyeceğiz.

Chrome’da JavaScript Konsol Açma

Chrome’da JavaScript Konsol açmak için, tarayıcınızın sağ üst köşesindeki üç dikey noktadan menüyü açın.
Buradan Diğer Araçlar (More Tools) > Geliştirici Araçları (Developer Tools) seçeneğini takip edin.

Bu adımları yaptığınızda bir panel açılır.
Üst menü çubuğunda Console (Konsol) sekmesine tıklayarak JavaScript Console’u açabilirsiniz.
Eğer zaten seçiliyse, doğrudan kullanmaya başlayabilirsiniz.

Kısayol kullanarak da JavaScript Console’a geçiş yapabilirsiniz:

• Linux / Windows: CTRL + SHIFT + J
• macOS: COMMAND + OPTION + J

Bu kısayollar sizi doğrudan Konsol’a odaklar.
Artık Konsola eriştiğinize göre, JavaScript ile çalışmaya başlayabilirsiniz.

Konsolda Çalışmak

Konsol içinde JavaScript kodu yazabilir ve çalıştırabilirsiniz.

Örneğin, ekrana Rabisu Docs'a Hoşgeldiniz..” yazdıran basit bir uyarıyla başlayalım:

alert("Rabisu Docs'a Hoşgeldiniz..")

JavaScript satırınızı yazdıktan sonra ENTER tuşuna bastığınızda, tarayıcınızda bir uyarı (alert) penceresi açılacaktır:

Not: Konsol, yazdığınız ifadeyi değerlendirip sonucunu da gösterecektir. Eğer ifade açıkça bir değer döndürmezse, sonuç undefined olarak görünür.

Sürekli tıklamanız gereken pop-up uyarılar yerine, JavaScript çıktısını Konsol’a yazdırmak için console.log kullanabilirsiniz.

Örneğin, Rabisu Docs'a Hoşgeldiniz.. yazısını Konsol’a bastırmak için şu satırı yazın:

console.log("Rabisu Docs'a Hoşgeldiniz..")

Konsol içinde aşağıdaki çıktıyı göreceksiniz:

Output
Rabisu Docs'a Hoşgeldiniz..

Konsolda matematiksel işlemler de yapabilirsiniz:

console.log("4+9")

Konsol içinde aşağıdaki çıktıyı göreceksiniz:

Output
13

Daha karmaşık matematiksel işlemleri de deneyebilirsiniz:

console.log("435.63635463 * 342.5346")

Output
149220.5245

Ayrıca değişkenlerle çalışarak birden fazla satırda da işlem yapabilirsiniz:

let today = new Date();
console.log("Bugünün tarihi: " + today);

Output
Bugünün Tarihi: Sun Sep 28 2025 15:53:09 GMT-0700 (Kuzey Amerika Pasifik Yaz Saati)

Konsola yazdığınız bir komutu değiştirmek isterseniz, klavyenizdeki yukarı ok (↑) tuşuna basarak önceki komutu geri getirebilirsiniz.
Böylece komutu düzenleyip tekrar çalıştırabilirsiniz.

JavaScript Konsolu size, terminal benzeri bir arayüz içinde gerçek zamanlı olarak JavaScript kodlarını deneme imkânı sunar.

Diğer Geliştirme Araçlarını Anlamak

Kullandığınız tarayıcıya göre, geliştirme sürecinize yardımcı olacak farklı araçlar da sunulabilir.
Bu araçlar sayesinde web geliştirme iş akışınızı daha verimli hale getirebilirsiniz.

DOM — Document Object Model

Bir web sayfası her yüklendiğinde, tarayıcı o sayfanın Document Object Model (DOM) yapısını oluşturur.

DOM, sayfadaki HTML öğelerini ağaç yapısı (tree) halinde hiyerarşik olarak gösterir.
Bu DOM Ağacını, Chrome’da Elements panelinde görüntüleyebilirsiniz.

Bu araçlar sayesinde DOM öğelerini inceleyebilir ve düzenleyebilirsiniz.
Ayrıca bir sayfadaki belirli bir öğeye ait HTML kodunu bulmanıza yardımcı olur.

Örneğin, DOM size bir metin parçasının veya görselin ID özelliği olup olmadığını ve varsa bu özelliğin değerini gösterebilir.

Yukarıda düzenlediğiniz sayfa, yeniden yüklenmeden önce DOM görünümünde buna benzer şekilde görünecektir:

Ayrıca DOM panelinin yanında ya da altında CSS stillerini görebilirsiniz.
Bu sayede HTML belgesinde ya da harici bir CSS dosyasında hangi stillerin uygulandığını inceleme şansınız olur.

Örneğin, örnek sayfanızın <body> etiketi için kullanılan stilleri Chrome Elements panelinde şu şekilde görebilirsiniz:

Bir DOM öğesini canlı olarak düzenlemek için, seçtiğiniz elemente çift tıklayın ve değişiklik yapın.
Örneğin, bir <h1> etiketini değiştirip <h2> etiketi haline getirebilirsiniz.

Tıpkı Konsolda olduğu gibi, sayfayı yeniden yüklediğinizde HTML belgesi orijinal kaydedilmiş haline geri döner.

Network

Tarayıcınızın yerleşik geliştirme araçlarındaki Network (Ağ) sekmesi, yapılan ağ isteklerini izleyip kaydedebilir.
Bu sekmede tarayıcının hangi istekleri yaptığını görebilirsiniz:

• Sayfanın yüklenmesi sırasında yapılan istekler,
• Her isteğin ne kadar sürdüğü,
• İsteklerin detayları.

Bu bilgiler, sayfanın yüklenme performansını optimize etmek ve ağ istekleriyle ilgili hataları ayıklamak için kullanılabilir.

Ayrıca JavaScript Konsolu ile birlikte de kullanabilirsiniz. Yani önce Konsolda hata ayıklamaya başlayıp, ardından Network sekmesine geçerek ağ trafiğini sayfayı yeniden yüklemeden görebilirsiniz.

Network sekmesini kullanmayı öğrenmek için Chrome DevTools ile ağ performansını analiz etmeye başlama dökümantasyonuna göz atabilirsiniz.

Responsive Design

Bir web sitesi responsive olduğunda, farklı cihazlarda (telefon, tablet, masaüstü, laptop) hem düzgün görünür hem de doğru çalışır.
Cihazlar arasında geliştirme yaparken; ekran boyutu, piksel yoğunluğu ve dokunmatik desteği gibi faktörler dikkate alınmalıdır.

Bir web geliştirici olarak responsive tasarım ilkelerini gözetmek önemlidir. Böylece siteniz, kullanıcı hangi cihazı kullanırsa kullansın erişilebilir olur.
Chrome, sitelerinizi geliştirirken responsive tasarım ilkelerini test etmenizi sağlayan modlar sunar.
Bu modlar sayesinde farklı cihazları taklit ederek sitenizi inceleyebilir ve analiz edebilirsiniz.

Daha Fazla Bilgi:
Responsive tasarım test araçlarını öğrenmek için Chrome Device Mode dökümantasyonuna göz atabilirsiniz.

Sonuç

Tebrikler, bu rehberde modern tarayıcılarda JavaScript Konsolu ile nasıl çalışabileceğinizi öğrendiniz.
Ayrıca geliştirme sürecinizde işinize yarayacak diğer araçlara da kısaca değindik.