Tarayıcı consoluna görsel olarak değerler bastırma

Web veya bazen mobil proje geliştirirken tarayıcı konsollarına ciddi anlamda ihtiyaç duyuyoruz test işlemlerini çoğu zaman developer console üzerinden gerçekleştiriyoruz ama bazen art arda ekrana bastırdığımız değerlerin bazılarını farkedilebilir olması ihtiyacını hep hissetmişizdir bu gibi durumda tarayıcı konsollarının style desteğinden faydalanıyor olacağız.

Console işlemlerimi Google Chrome Developer Tools üzerinden gerçekleştireceğim console hakkında daha detaylı bigi için Javascript İle Tarayıcı Konsoluna Loglama İşlemleri makalesine gözatabilirsiniz.

Google Chrome Developer Tools

Google Developer Tools - Console

Üstte gördüğünüz gibi konsol’a bastırılmış 5 hata ve 1 uyarı bulunmaktadır ama renklendirmelere varsayılan olarak tarayıcı tarafından yapılmaktadır burada 10’larca bastırılmış uyarı, hata, bilgi olduğunu varsayarsak bazen aradığımız değere ulaşmak zor olabiliyor işte bunu ayırt etmek adında konsol’un stil desteğini kullanacağız.

Örnek olarak www.muratoner.net metnini yazı beyaz, arkaplan kırmızı ve font boyutu 24px olacak şekilde yazdıralım.

Konsola stilli değer bastırmak için ihtiyacınız olan şey %c belirtecidir. Log bastırmak için kullandığınız herhangi bir console log bastırma fonksiyonundan biri(info, log, error, warn v.b) içerisine değeriniz ile beraber %c belirtecini kullanmalısınız.

Sonuç

Google Developer Tools

Tarayıcı consoluna görsel olarak değerler bastırma
5 (100%) 1 oy

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir