Browser'daki Console İle Çalışmak

Bu eğitimde, mesajları görüntülemek için web geliştirme araçlarının Console sekmesini nasıl açacağınızı öğreneceksiniz.

Web geliştirme araçları, JavaScript kodunu test etmenize ve hata ayıklamanıza olanak tanır. Web geliştirme araçlarına genellikle geliştirici araçları denir.

Google Chrome, Firefox, Edge, Safari ve Opera gibi modern web tarayıcıları, geliştirme araçlarını yerleşik özellikler olarak sağlar.

Genel olarak geliştirme araçları HTML, CSS, DOM ve JavaScript gibi çeşitli web teknolojileriyle çalışmanıza olanak tanır.

Bu eğitimde, JavaScript tarafından gönderilen mesajları görüntülemek için geliştirici araçlarının Konsol sekmesini nasıl açacağınızı öğreneceksiniz.

Google Chrome

Öncelikle devtools.html dosyasını açın.

devtools.html dosyası aşağıdaki JavaScript koduna sahiptir:

<script>
    console.log('Hello, devtools!');

    // the following code causes an error
    let greeting = msg;
</script>

İkinci olarak, Windows'ta F12'ye veya Mac'teyseniz Cmd+Opt+J tuşlarına basın.

Geliştirici araçları varsayılan olarak Konsol sekmesini açacaktır. Bunun gibi görünecek:

İlk mesaj Hello DevTools! aşağıdaki komutun çıktısıdır:

console.log('Hello, DevTools!');

Değişkenin değerinin çıktısını almak için aşağıdaki console.log() yöntemini kullanırsınız. Örneğin:

let message = 'Good Morning!';
console.log(message);

Konsol sekmesinde görünen ikinci mesaj bir hatadır.

Uncaught ReferenceError: msg is not defined

Bunun nedeni, msg değişkeninin kodda tanımlanmamış olması ancak atamada referans verilmiş olmasıdır.

Artık console.log() tarafından verilen normal mesajları ve hata mesajlarını görebilirsiniz. Başlamak yeterli. Daha sonraki eğitimde geliştirme araçlarına dalacağız.

Firefox and Edge

Tipik olarak Firefox ve Edge'deki geliştirici araçlarının Konsol sekmesini F12'yi kullanarak açarsınız. Benzer kullanıcı arayüzlerine sahiptirler.

Safari

Mac'te Safari tarayıcısı kullanıyorsanız öncelikle Geliştirici Menüsünü etkinleştirmeniz gerekir:

Daha sonra Konsol penceresine geçiş yapmak için Cmd+Opt+C tuşlarına basın:

Bu eğitimde, JavaScript kodu tarafından yayınlanan mesajları kontrol etmek için geliştirici araçlarının Konsol sekmesini nasıl açacağınızı öğrendiniz.

Github JS Eğitimleri

Linkedin

Kaynak