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
Ü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.
1 | console.log('%c www.muratoner.net', 'background: red; color: white; font-size: 24px;'); |
Sonuç