Bu etkileşimli eğitim, Chrome Geliştirici Araçları Konsolu'nda JavaScript'in nasıl çalıştırılacağını gösterir. Görüntüleyin Mesajların konsola nasıl kaydedileceğini öğrenmek için Günlük Kaydı Mesajlarını Kullanmaya Başlama. Başlarken bölümüne bakın. JavaScript'te Hata Ayıklama ile JavaScript kodunu nasıl duraklatacağınızı ve en son adımda birlikte çalışır.
Şekil 1. Konsol.
Genel Bakış
Konsol; Okuma, Değerlendirme, Yazdır ve Döngü anlamına gelen bir REPL'dir. Şunu okuyor: yazdığınız JavaScript kodu, kodunuzu değerlendirir, oluşturduğunuz ifade'dir 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. Zaman takip ederseniz iş akışlarını hatırlama ihtimaliniz artar.
Açmak için Command+Option+J (Mac) veya Control+Üst Karakter+J (Windows, Linux, ChromeOS) tuşlarına basın Console'a, yani buraya, tam da bu sayfaya.
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 ifadeleri Konsolda sırayla çalıştırmak genellikle yararlıdır. sayfanın görünümünü veya çalışma şeklini değiştirin.
Aşağıdaki düğmede yer alan metne dikkat edin.
Konsola
document.getElementById('hello').textContent = 'Hello, Console!'
yazın ve ve ardından 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'in 4 adımını hatırlayın: okuma, değerlendirme, yazdırma, döngü oluşturma. Kodunuz değerlendirildikten sonra bir REPL, ifadenin sonucunu yazdırır. Yani"Hello, Console!"
, yapılan değerlendirmenin sonucu olmalıdırdocument.getElementById('hello').textContent = 'Hello, Console!'
.
Sayfayla ilgili olmayan rastgele JavaScript çalıştırmak
Bazen, bazı kodları test edebileceğiniz veya yeni JavaScript'i deneyebileceğiniz bir kod parkı istersiniz özellikleri olabilir. 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 kodunuzun altındaki ifadenin sonucudur. Aşağıdaki Şekil 4'te Console'un sonra bunu göz önünde bulundurmalısınız. Aşağıdaki kodu Konsola yazın. İçerikleri ayrı ayrı yazmak yerine kopyalayıp yapıştırdığınızdan emin olun.
function add(a, b=20) { return a + b; }
b=20
hakkında bilginiz yoksa işlev bağımsız değişkenleri için varsayılan değerleri tanımlama bölümüne bakın söz dizimine uygun olmalıdır.Ş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(25)
işlevi45
olarak değerlendirilir çünküadd
işlevi ikinci bir bağımsız değişken olmadan çağrıldığındab
, varsayılan olarak20
değerine ayarlanır.
İş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 geçerli sayfanın başarısız olmasına ve girdiğiniz tüm verilerin kaybolmasına 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 şunları kullanabilirsiniz:
Konsol'u kullanarak sayfanın window
veya DOM
ayarlarını o anda görüntüleyebilir ve değiştirebilirsiniz. Bu durum,
API'yi kullanabilirsiniz. Etkileşimli ve etkileşimli yapılandırma için JavaScript Hatalarını Ayıklamaya Başlama
eğiticidir.
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 yalnızcadocument.querySelector()
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.