Veriler Tarayıcı Konsolunda tablo olarak nasıl görüntülenir?

Konsol, web sitelerinde meydana gelen hataları kaydeden, tarayıcıya yerleşik bir araçtır. Bozuk bağlantılar, eksik JavaScript işlevleri veya bilinmeyen CSS özellikleri gibi herhangi bir hata varsa tarayıcı, Konsolda hata mesajları görüntüler.

Ayrıca belirli işlevleri ve çıktı verilerini test etmek için yararlı olan kabuk ve Konsol API'si aracılığıyla Konsol ile etkileşimde bulunabilirsiniz. Burada makale size Konsol API'sinin kullanımına ilişkin yararlı bir ipucu gösterecektir.

Tarayıcıdan Konsola Erişim

Chrome'da Konsolu görüntülemek için Görünüm > Geliştirici > JavaScript Konsolu'nu seçebilirsiniz . Ek olarak, klavye kısayolunu da kullanabilirsiniz: OS X'te Cmd++ ve Windows'ta ++ .OptionJCtrlShiftJ

Aşağıda hatasız bir Chrome Konsolu bulunmaktadır.

Buradan Konsol API'sinde sağlanan komutları kullanmaya başlayabilirsiniz.

Konsol ile etkileşime gir

Tarayıcınızın Konsolu ile Konsolun kendisi aracılığıyla ve JavaScript ekleyerek etkileşim kurabilirsiniz. Örneğin, burada Konsoldan "Günaydın!" sonucunun çıktısını vermesini istiyoruz. console.log() komutunu doğrudan Konsola yazarak :

Belirtildiği gibi console.log() işlevini de uygulayabilirsiniz . Console.log(), bir JavaScript koşullu ifadesini test etmek için kullanılabilir . Console.log() 'un yardımıyla sonucun doğru veya yanlış (doğru veya yanlış) döndürdüğünü daha net görebilirsiniz .

İşte bir örnek:

var a = 1;

if(a == 1) {

console.log('true');

} else {

console.log('false');

}

Bir değişken 1 sayısını içerdiğinden yukarıdaki kod true değerini döndürecektir . Konsolda, tarayıcının içeriği “true” olan metni çıkardığını göreceksiniz.

Tablo biçiminde çıktı verileri

Bazen aşağıda gösterildiği gibi bir veri dizisini veya Nesnelerin bir listesini işlemeniz gerekebilir:

var data = [

{ name: "Andi", age: "21", city: "Tuban" },

{ name: "Ani", age: "25", city: "Trenggalek" },

{ name: "Adi", age: "30", city: "Kediri" }

];

console.table(data);

console.log() metodunu kullandığımızda bu verinin okunması zor olacaktır . console.log() yöntemi, Diziyi aşağıda gösterildiği gibi daraltılabilir bir ağaç görünümünde görüntüler.

Böyle bir Diziyle uğraşmanız gerektiğinde, console.table() işlevini kullanmak veri çıktısı almanın daha iyi bir yoludur. Bu yöntem verileri tablo formatında görüntüler. Yukarıdakiyle aynı verileri aldığımızda sonuç aşağıdaki gibi görünecektir:

Tarayıcı konsolu, web geliştiricilerinin web sitelerindeki hataları yönetmesine yardımcı olur. Kullanıcılar aynı zamanda console.log() yönteminde olduğu gibi veri çıktısını incelemek için de kullanabilirler . Bir veri diziniz olduğunda console.table () komutu daha kullanışlıdır çünkü Diziyi okunması kolay bir tablo formatında görüntüler. console.table() işlevinin yalnızca Chrome, Safari ve Opera'nın en son sürümü gibi Webkit tabanlı tarayıcılarda geçerli olduğunu lütfen unutmayın .

Umarım başarılısınızdır.