Frontend her zaman süprizlere açıktır. Çünkü piyasada aktif olarak kullanılmakta olan 6 adet tarayıcı var ve bu tarayıcılarında pek çok versiyonu var. Birde bunlara çeşitli ekran çözünürlükleri eklenince, kullanıcıların web sitenizi gezerken yaşadığı deneyimi tahmin etmeniz çok çok zorlaşabiliyor.

Lakin kullanıcılarınızın tarayıcılarını dinleyip, istediğiniz objeleri dump etmeniz, elementlerin boyutlarını anlık olarak öğrenmeniz vb. tüm işlemleri yapmanız size inanılmaz kolaylıklar sağlayabilecektir.

 

http://console.re/ tam da bunun için var. Çok basit bir kurulum ile hemen kullanmaya başlayabiliyorsunuz.

“Kurulum”

  • http://console.re/ anasayfadaki your-project-name yazan yeri kendi istediğiniz proje ismi ile değiştirip go butonuna basın.
  • Açılan sayfanın ortasındaki How to connect butonuna basınca açılan modal’ da sayfanızın head tagının içine eklemeniz gereken kod bulunuyor, kopyalayıp sayfanıza ekleyin. Örneğin benimkisi
  • Ve javascript kodunuzun en başına aşağıdaki komutu ekleyin ve kaydedin. Sayfanızı refreshlediğinizde , az önce açtığınız siyah sayfada logu görebilirsiniz. 🙂

     

Tabiki tüm yapacağımız sayfamıza bu kadar basit loglar koymak değil. http://console.re/try adresinde yapılmış çok güzel örnekler var. Mesela Backend ten gelen JSON objesini dump etmek, yada sayfadaki tüm p elementlerinin genişliklerini görmek. Örneğin aşağıdaki kod ile bunu yapabilirsiniz.

Screen Shot 2015-09-19 at 23.20.55

Örnekleri kendi ihtiyacınıza göre çoğaltabilirsiniz.

Leave A Comment

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