Konsolda JavaScript'i çalıştırın

Kayce Basques

Bu etkileşimli eğitimde, Chrome Geliştirici Araçları Konsolu'nda JavaScript'i nasıl çalıştıracağınız gösterilmektedir. Konsola mesaj kaydetme hakkında bilgi edinmek için Günlük Mesajlarını Kullanmaya Başlama başlıklı makaleyi inceleyin. JavaScript kodunu nasıl duraklatacağınızı ve her seferinde tek bir satır halinde nasıl adım adım ilerleyeceğinizi öğrenmek için JavaScript'te Hata Ayıklamaya Başlama başlıklı makaleyi inceleyin.

Şekil 1. Console (Konsol)

Genel Bakış

Console, Read, Evaluate, Print ve Loop kelimelerinin kısaltması olan REPL'dir. Yazdığınız JavaScript'i okur, kodunuzu değerlendirir, ifadenizin sonucunu yazdırır ve ardından ilk adıma geri döner.

Geliştirici Araçları'nı ayarlama

Bu eğitim, demoyu açıp tüm iş akışlarını kendiniz deneyebileceğiniz şekilde tasarlanmıştır. Adımları fiziksel olarak uyguladığınızda iş akışlarını daha sonra hatırlama olasılığınız artar.

1. Bu sayfada Konsol'u açmak için Command+Option+J (Mac) veya Control+Shift+J (Windows, Linux, ChromeOS) tuşlarına basın.

   

   Şekil 2. Sol tarafta bu eğitim, sağ tarafta ise Geliştirici Araçları yer alır.

Sayfanın JavaScript'ini veya DOM'unu görüntüleme ve değiştirme

Bir sayfayı oluştururken veya hata ayıklarken, sayfanın görünümünü ya da çalışmasını değiştirmek için Console'da ifadeleri sırayla çalıştırmak genellikle yararlıdır.

1. Aşağıdaki düğmedeki metne dikkat edin.

   Merhaba Dünya!

2. Console'a document.getElementById('hello').textContent = 'Hello, Console!' yazıp Enter tuşuna basarak ifadeyi değerlendirin. Düğmenin içindeki metnin nasıl değiştiğine dikkat edin.

   

   Şekil 3. Yukarıdaki ifade değerlendirildikten sonra konsolun görünümü.

   Değerlendirdiğiniz kodun altında "Hello, Console!" simgesini görürsünüz. REPL'nin 4 adımını hatırlayın: oku, değerlendir, yazdır, başa dön. REPL, kodunuzu değerlendirdikten sonra ifadenin sonucunu yazdırır. Bu nedenle "Hello, Console!", document.getElementById('hello').textContent = 'Hello, Console!' değerlendirmenin sonucu olmalıdır.

Sayfayla ilgili olmayan rastgele JavaScript'ler çalıştırma

Bazen sadece bir kodu test edebileceğiniz veya aşina olmadığınız yeni JavaScript özelliklerini deneyebileceğiniz bir kod alanı istersiniz. Konsol, bu tür denemeler için mükemmel bir yerdir.

1. Konsola 5 + 15 yazın. Sonuç 20, ifadenizin altında görünür (ifadenizin değerlendirilmesi çok uzun sürmediği sürece).
2. İfadeyi değerlendirmek için Enter tuşuna basın. Konsol, kodunuzun altındaki ifadenin sonucunu yazdırır. Aşağıdaki Şekil 4'te, bu ifade değerlendirildikten sonra konsolunuzun nasıl görünmesi gerektiği gösterilmektedir.

3. Konsol'a aşağıdaki kodu yazın. Kopyalayıp yapıştırmak yerine karakter karakter yazmayı deneyin.

   function add(a, b=20) {
     return a + b;
   }
   

4. Şimdi, az önce tanımladığınız işlevi çağırın.

   add(25);
   

   

   Şekil 4. Yukarıdaki ifadeler değerlendirildikten sonra konsolun görünümü.

   add(25), 45 olarak değerlendirilir. Bunun nedeni, add işlevi ikinci bir bağımsız değişken olmadan çağrıldığında b değerinin varsayılan olarak 20 olmasıdır.

İşleviniz döndürülene kadar bu konsol oturumunda herhangi bir kod çalıştıramazsınız. Bu işlem çok uzun sürerse Görev Yöneticisi'ni kullanarak zaman alan hesaplamayı iptal edebilirsiniz. Ancak bu durumda, mevcut sayfa da başarısız olur ve girdiğiniz tüm veriler kaybolur.

Sonraki adımlar

Konsolda JavaScript çalıştırmayla ilgili daha fazla özelliği keşfetmek için JavaScript çalıştırma başlıklı makaleyi inceleyin.

DevTools, bir komut dosyasını yürütülürken duraklatmanıza olanak tanır. Duraklatma sırasında, o anki window veya DOM değerlerini görüntülemek ve değiştirmek için Konsol'u kullanabilirsiniz. Bu sayede güçlü bir hata ayıklama iş akışı elde edebilirsiniz. Etkileşimli bir eğitim için JavaScript'te Hata Ayıklamaya Başlama başlıklı makaleyi inceleyin.

Console, bir dizi biçim belirleyiciyi de destekler. Konsol mesajlarını biçimlendirme ve stil verme yöntemlerinin tümünü öğrenmek için Konsoldaki mesajları biçimlendirme ve stil verme başlıklı makaleyi inceleyin.

Bunun dışında, Console'da sayfayla etkileşimi kolaylaştıran bir dizi pratik işlev de bulunur. Örneğin:

• Bir öğeyi seçmek için document.querySelector() yazmak yerine $() yazabilirsiniz. Bu söz dizimi jQuery'den esinlenmiştir ancak aslında jQuery değildir. Bu, yalnızca document.querySelector() için bir takma addır.
• debug(function), söz konusu işlevin ilk satırında etkili bir şekilde kesme noktası ayarlar.
• keys(object), belirtilen nesnenin anahtarlarını içeren bir dizi döndürür.

Tüm kolaylık işlevlerini keşfetmek için Console Utilities API Referansı'na bakın.