Bu etkileşimli eğitim, Chrome Geliştirici Araçları Konsolu'nda JavaScript'in nasıl çalıştırılacağını gösterir. Mesajları konsola nasıl kaydedeceğinizi öğrenmek için Günlük Kaydı Mesajlarını Kullanmaya Başlama bölümüne bakın. JavaScript kodunu nasıl duraklatacağınızı ve kodu her seferinde bir satırlık adımın nasıl işleyeceğini öğrenmek için JavaScript Hatalarını Ayıklamaya Başlarken bölümüne bakın.
Şekil 1. Konsol.
Genel bakış
Konsol; Okuma, Değerlendirme, Yazdır ve Döngü anlamına gelen bir REPL'dir. içine yazdığınız JavaScript'i okur, kodunuzu değerlendirir, ifadenizin sonucunu yazdırır ve daha sonra 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. Fiziksel olarak takip ettiğinizde, iş akışlarını daha sonra hatırlama ihtimaliniz artar.
Konsolu tam bu sayfada açmak için Command+Option+J (Mac) veya Control+Üst Karakter+J (Windows, Linux, ChromeOS) tuşlarına basın.
2. Şekil. Bu eğitim sol tarafta, Geliştirici Araçları ise sağ taraftadır.
Sayfanın JavaScript veya DOM'sini görüntüleme ve değiştirme
Bir sayfa oluştururken veya hata ayıklarken sayfanın görünümünü veya çalışma şeklini değiştirmek için Konsol'da ifadeler çalıştırmak genellikle yararlıdır.
Aşağıdaki düğmede yer alan metne dikkat edin.
Konsola
document.getElementById('hello').textContent = 'Hello, Console!'
yazın ve ifadeyi değerlendirmek için Enter tuşuna basın. Düğmenin içindeki metnin nasıl değiştiğine dikkat edin.3. Şekil. Yukarıdaki ifade değerlendirildikten sonra Console'un görünümü.
Değerlendirdiğiniz kodun altında
"Hello, Console!"
görünür. REPL'nin 4 adımını hatırlayın: okuma, değerlendirme, yazdırma, döngü. Kodunuz değerlendirildikten sonra bir REPL, ifadenin sonucunu yazdırır. Yani"Hello, Console!"
,document.getElementById('hello').textContent = 'Hello, Console!'
değerlendirmesinin sonucu olmalıdır.
Sayfayla ilgili olmayan rastgele JavaScript çalıştırmak
Bazen, bazı kodları test edebileceğiniz veya bilmediğiniz yeni JavaScript özelliklerini deneyebileceğiniz bir kod oyun alanı istersiniz. Console bu tür denemeler için mükemmel bir yerdir.
- Konsola
5 + 15
yazın. Sonuç olarak20
, ifadenizin altında görünür (ifadenizin değerlendirilmesi çok fazla zaman almadığı sürece). - İfadeyi değerlendirmek için
Enter
tuşuna basın. Console, ifadenin sonucunu kodunuzun altında yazdırır. Aşağıdaki Şekil 4'te, bu ifade değerlendirildikten sonra Konsolunuzun nasıl görünmesi gerektiği gösterilmektedir. Aşağıdaki kodu Konsola yazın. Kopyalayıp yapıştırmak yerine karakter tek tek yazmayı deneyin.
function add(a, b=20) { return a + b; }
b=20
söz dizimine aşina değilseniz işlev bağımsız değişkenleri için varsayılan değerleri tanımlama bölümüne bakın.Şimdi, tanımladığınız fonksiyonu çağırın.
add(25);
4. Şekil. Yukarıdaki ifadeler değerlendirildikten sonra Console'un nasıl görüneceği.
add
işlevi ikinci bir bağımsız değişken olmadan çağrıldığındab
, varsayılan olarak20
değerine sahip olduğu içinadd(25)
,45
olarak değerlendirilir.
İşleviniz geri dönene kadar bu konsol oturumunda kod çalıştıramazsınız. Bu çok uzun sürerse zaman alan hesaplamayı iptal etmek için Görev Yöneticisi'ni kullanabilirsiniz. Ancak bu işlem, geçerli sayfanın başarısız olmasına ve girdiğiniz tüm verilerin kaybolmasına da neden olur.
Sonraki adımlar
Konsolda JavaScript çalıştırmayla ilgili diğer özellikleri keşfetmek için JavaScript'i çalıştırma konusuna bakın.
Geliştirici Araçları, bir komut dosyasını yürütme işlemi ortasında duraklatmanıza olanak tanır. Duraklatılmış durumdayken sayfanın window
veya DOM
değerlerini o anda görüntülemek ve değiştirmek için Konsol'u kullanabilirsiniz. Bu, güçlü bir hata ayıklama iş akışı sağlar. Etkileşimli bir eğitim için JavaScript Hata Ayıklamaya Başlama bölümüne bakın.
Konsol, bir dizi biçim tanımlayıcısını da destekler. Konsol mesajlarını biçimlendirme ve stil özelliklerini ayarlamayla ilgili tüm yöntemleri keşfetmek için Konsol'da mesajları biçimlendirme ve biçimlendirme başlıklı makaleyi inceleyin.
Konsolda, sayfalarla etkileşimi kolaylaştıran bir dizi kullanışlı işlev de bulunur. Örneğin:
- Bir öğe seçmek için
document.querySelector()
yerine$()
yazabilirsiniz. Bu söz dizimi jQuery'den esinlenilmiş olsa da aslında jQuery değildir. Bu sadecedocument.querySelector()
için bir takma addır. debug(function)
, bu işlevin ilk satırında etkili bir şekilde bir ayrılma noktası belirler.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.