Haz.24

Google Developer Tools ile Web Programlamada Debug (Hata Ayıklama)

Günümüzde web arayüz programcılığında bir geliştiricinin belki de en büyük dostu, Google Chrome ile birlikte gelen Google Developer Tools’tur. Bu araç, arayüz üzerindeki elementlere erişebilmemizi, bir konsol yardımı ile kodlarımıza müdahale edebilmemizi, çeşitli kaynakların takibi, network analizi, hafıza yönetimi gibi kontrollerimizi yapabilmemizi sağlayan vazgeçilmez bir araçtır.

Bir web projesi yaparken mutlaka Google Chrome ile geliştirme yapılır. İş bitince veya iş yapım aşamasındayken de diğer tarayıcılarda da testler yapılmaktadır, ancak ilk olarak referans alınması gereken tarayıcı Google Chrome’dur. Google Chrome da biz geliştiricilere ücretsiz olarak bir araç sunmuştur. Bu araca, web sayfamız açıkken (o an hangi sayfayı geliştiriyorsak) CTRL + SHIFT + I kısayol tuşu ile veya Mouse ile sağ tıklayıp Inspect (İncele)’yi seçtiğimizde Google Developer Tools, varsayılan konum olarak sayfanın alt kısmında açılacaktır. Dilerseniz bu paneli tutup sürükleyerek sayfadan koparabilir veya panelin sağ üst köşesinde yer alan üç noktalı ikona tıklayıp Dock side kısmından istediğiniz konuma yerleşmesini de sağlayabilirsiniz.

Google Developer Tools’u inceleyebilmek için öncelikle bir geliştirme yaptığımız bir sayfaya ihtiyacımız olacak. Örnek olması amacı ile aşağıdaki gibi basit bir sayfa hazırladık. Bu sayfa içinde yer alan kodlar veya etiketler kafanızı şimdiden karıştırmasın (veya karışırsa ve merak ediyorsanız da ileriki bölümleri hızlıca bir inceleyip buraya geri dönün). Örnek sayfa üzerinden Google Developer Tools nasıl kullanılır, kısaca inceleyeceğiz. Zaten kitap boyunca da burada öğrendiğiniz temelleri kendiniz de pratik yaparak geliştireceksiniz.

Aşağıda yer alan kodları SublimeText veya Brackets (hatta isterseniz Notepad bile olabilir) ile yazın ve sayfayı index.html (dosyanın uzantısı .txt değil, .html olacak, buna dikkat edin) olarak kaydedin. Örnek sayfamızda hem HTML5, hem CSS3 hem de JAVASCRIPT kullandık.

<!DOCTYPE html>
<html>
     <head>
          <meta charset="utf-8" />
          <title>İlk HTML5 Sayfam</title>
          <style>
               h1{
                    color:red;
               }
               p{
                    font-size: 15px;
                    color: gray;
               }
               body{
                    padding: 10px;
               }
          </style>
     </head>
     <body>
          <h1>Google Developer Tools</h1>
          <p>Merhaba. Bu içerik bir paragraf metnidir.</p>
          <p>2+5 işlemi <span id="islemSonucu"></span> sayısını verir.</p>
     </body>
     <script>
          function hesapla(a,b){
               var c = a + b;
               console.log(c);
               document.getElementById("islemSonucu").innerHTML = c;
          }
          hesapla(2,5);
     </script>
</html>

Yazdığımız kodlara h1 etiketinde kırmızı renkli olarak Google Developer Tools yazdırıp, p etiketi ile bir satırlık bir cümle, ardından yeni bir satırda da matematiksel bir işlemi yazdırdık. Matematiksel işlemin sonucunu span etiketleri arasında JavaScript kodları kullanarak 2+5 toplama işlemini yapıp 7 sonucunu elde ederek yazdırdık. Detaylara çok takılmayın şimdilik…

Şimdi Elementler ve Stiller, Konsol, Kaynaklar ve Ağ kategorileri altında Google Developer Tools’u kullanmaya başlayalım.

Elementler ve Stiller (Elements)

Hazırlamış olduğumuz sayfayı Google Chrome’da açıp, ekranın boş bir yerinde Mouse ile sağ tıklayıp açılan menüden Inspect (İncele)’i seçelim. Varsayılan olarak Google Developer Tools ekranın alt kısmında açılacaktır. Varsayılan olarak ilk sekme, yani Elements aktif olarak görünecektir. Panelimiz açıkken Mouse ile sayfada herhangi bir elementi tıklarsak, panel kısmında da ilgili kod satırı aktif olacaktır. Mesela örneğimizde h1 etiketi gri zemin rengi ile gösteriliyor. Bunun anlamı, Inspect edilirken veya edildikten sonra Google Developer Tools yazısı üzerinde Mouse tıklanmış. Panelin sağ tarafında da o elemente ait olan CSS stilleri Styles sekmesinde gösteriliyor.

Elements sekmesindeyken sadece kodları görmekle kalmazsınız, kodlara da müdahale edebilirsiniz. Mesela gri zemin ile gösterilen h1 etiketinin alanına çift tıklarsanız, o metni veya etiketleri yeniden düzenleyebilirsiniz, hatta araya yeni etiketler girebilir veya silebilirsiniz.

Ayrıca Mouse ile kodların üzerinde sağ tıklayıp açılan menüden ilgili araçları seçerek kopyalama, silme, gizleme gibi işlemler de yapılabilir. Bunun amacı; o sayfayı kod editöründe düzenlemek yerine, anlık olarak sayfada düzenleme yapıp değişikliğin nasıl olacağını görebilmektir. Yazdığınız, eklediğiniz veya sildiğiniz değişiklikler kesinlikle orijinal dosya üzerine yazılmaz, sadece tarayıcıda kalır, sayfayı yenilediğinizde de tekrar orijinalini görebilirsiniz.

Panelin en sol üst köşesinde yer alan ok imlecini seçip Mouse imlecimizi sayfanın üzerinde gezdirirsek, elementlerin container alanlarını da görüp, istediğimiz elementi tıklayarak seçili hale getirebiliriz.

Panelin sağ tarafında da, o an seçili olan elemente ait CSS stilleri Styles sekmesinde görülür. Şu an h1 etiketi seçili olduğu için, CSS’te tanımlamış olduğumuz color:red; stili görülmektedir. Ek olarak tarayıcının kendi eklemiş olduğu varsayılan stiller de hemen altında görülmektedir. Bu alanda da değişiklikler yapabilirsiniz. Mesela kırmızı yerine mavi nasıl gider diye düşünmek yerine, Styles panelinde red’in üzerine çift tıklayıp düzenleyerek blue yazıp sonucu görebilir veya kırmızı kutuya tıklayıp açılan renk paletinden renk de seçebilirsiniz. Yine Styles panelindeyken h1 { } blokları arasında kalan beyaz alana bir kere Mouse ile tıkladığınızda size yeni bir alan daha açar ve oraya yeni bir stil daha ekleyebilirsiniz. Mesela font-variant stili ekleyip değerini de petite-caps olarak verelim. Sayfadaki Google Developer Tools yazısı mavi renkle ve değişik bir stille anında yazdırılacaktır.

Eğer responsive tasarım ile de uğraşıyorsanız (uğraşmanız da lazım), ekran çözünürlüklerini mobil cihazlara göre test etmeniz gerekir. Sol üst köşedeki ok ikonun yanında yer alan ekran ikonuna tıkladığınızda, sayfa mobil görünüme geçecektir, tekrar tıkladığınızda da normal haline dönecektir. Mobil görünümdeyken sayfanın üst kısmında istediğiniz mobil cihaz ekran şablonunu seçip tasarımınızı test edebilirsiniz.

Konsol (Console)

JavaScript kodlarımızın arasında console.log(c); şeklinde bir kod bulunmaktadır. Bu kod, Console panelinde mesaj yazdırmak için kullanılır. Genelde kodlama yaparken geliştirme aşamasında çokça kullanılırız. Mesela işlem yapılırken acaba toplama işlemini yapıp gerçekten c değişkenine atadı mı, atadıysa bu değer nedir derseniz, console.log() komutu ile, parametre olarak verdiğiniz değişkeni veya string’i konsolda yazdırabilirsiniz (ilerleyen konularda detaylıca göreceksiniz). Şimdi Google Developer Tools’ta Console sekmesine tıkladığımızda, konsol alanında 7 yazdığını göreceğiz.

Konsolda yazdırılan her bir değerin, sağ tarafında sayfa ismi : satır numarası formatında olacak şekilde o değerin nereden yazdırıldığı da gösterilmektedir. Bizde şu an index.html:28 yazıyor. Yani index.html dosyasının 28. satırındaki komut bu değeri yazdırmış demektir.

Console panelinin bir diğer güzel işlevi de, JavaScript komutlarını buradan çağırabiliyor olmamızdır. JavaScript komutlarımızın arasında hesapla(2,5); şeklinde bir komut göreceksiniz. Bu komut, hesapla isimli fonksiyona 2 ve 5 değerini gönderiyor. O fonksiyon da bu iki değeri a ve b değişkenlerine atayarak topluyor ve sonucu c değişkenine aktarıyor. c değişkeni de id ismi islemSonucu olan span etiketinin içinde yazdırılıyor. Şimdi şöyle bir şey yapalım…

Console panelinde 7 sayısının altında cursor’un yanıp söndüğünü göreceksiniz. Bunun anlamı, oraya bir şeyler yazılabiliyor demektir. Oraya hesapla(10,5) yazın ve klavyeden Enter tuşuna basın.

Evet, gördüğünüz üzere konsolda 15 değeri ve sayfada da “2+5 işlemi 15 sayısını verir.” yazdı. Peki, neden? HTML5 kodlarımızda işlem satırını şu şekilde tanımlamıştık.

<p>2+5 işlemi <span id="islemSonucu"></span> sayısını verir.</p>

Bu etiketler bize aşağıdaki gibi bir çıktı verir.

2+5 işlemi sayısını verir.

Burada görüldüğü üzere işlemin sonucu yok, işlemin sonucu JavaScript tarafından geliyor. Yani bu kısımlar statik olarak kalıyor. Biz, hesapla(10,5) yaparak 10 + 5 = 15 değerini elde edip, c değerine atamış olduk. Fonksiyonumuz da c değerini her zaman için konsolda yazdırdığından, 15 değerini tekrar konsolda görmüş olduk. Elde edilen yeni c değeri de islemSonucu id’li span etiketinin içine tekrar yazdırılıyor.

Siz de fonksiyonlarınızda console.log() komutlarını kullanıp işlemlerinizin sonuçlarını test edebilirsiniz. Ayrıca hazırladığınız fonksiyonları da manuel olarak tetikleyip sonuçlarını inceleyerek hata ayıklama işlemlerinizi de yapabilirsiniz.

Console, aslında en çok hata durumunuzu da görmeniz için size yardımcı olacak. Şu an kodlarımızda bir hata olmadığı için hata mesajı almıyoruz. Yazdığımız kodlarda basit bir düzenleme yapıp (daha doğrusu bozma) hata durumunu yakalayalım.

Yazdığımız kodlar içerisinde yer alan…

document.getElementById("islemSonucu").innerHTML = c; 

… satırında c değerine yerine d yazarak kaydedin. Ardından sayfayı tekrar Google Chrome’da açın.

Sayfayı tekrar Inspect edip Console sekmesine gelin. Gördüğünüz üzere kırmızı renklerle bir hata yazdırıldı. Hata; “d is not defined”, yani “d tanımlanmamış” şeklinde bir hata dönüyor ve hatanın da index.html’de 29. satırda olduğunu belirtiyor.

at hesapla(index.html:29) yazısına tıkladığınızda, direkt olarak Source sekmesi aktif olacak ve hatalı olan kodun olduğu yere odaklanacaktır.

Siz de bu gibi hata durumlarını Console sekmesinden kontrol edebilir, hatanın olduğu konuma da örnekte belirttiğimiz metotla ulaşabilirsiniz.

Kaynaklar (Sources)

Sources panelini az önce Console’da hata yakaladığımızda, hatanın kaynağına erişirken görmüştük. Sources, o an sayfa açıkken kullanılan sayfaların veya komut dosyaları listeler. Ayrıca asıl Debug işleminin yapıldığı alan burasıdır. Bu alanda, kodlarınıza breaktpoint’ler ekleyebilir ve satır satır kodlarınızın nasıl çalıştığını duraklatarak izleyebilir, analizler yapabilirsiniz.

Örneğimiz için sadece index.html kullanıldığı için tek bir kaynak gösteriyor. Şimdi basit bir Debug işlemi yapalım. İstiyorum ki a ve b değerlerine fonksiyondan doğru bir şekilde parametreler aktarılıyor mu, aktarılıyorsa da doğru bir şekilde toplanıyor mu… Saydığım bu iki işlemi yapabilmek için, işlemlerin yapıldığı satırlara birer breakpoint eklemem gerekiyor.

Sources panelindeyken ve index.html seçiliyken, a ve b değerlerinin okunduğu satır olan 27’ye, c değerinin de konsolda yazdırıldığı 28. satır numarasına bir kere Mouse ile tıklayıp aktif ediyorum. Aktif edildiğini, numaralar mavi renkli bir kutu ile işaretlendiğinde anlayabilirsiniz. Elimizde 2 adet breakpoint olmuş oldu.

Sayfayı F5 kısayolu ile tekrar açalım…

Sayfa açıldığında, kodlar otomatik olarak işlenecek ve 27. satıra gelip ilk duraklamaya takılacak. Duraklama olduğunda da sayfanın üst orta kısmında Pused in debugger yazacak ve yanında da bir devam ettir butonu olacak (üçgen ikon), sayfa da duraklandığı belli olsun diye gri şeffaf bir perde ile kapatılacak.

Ekranı bir inceleyelim…

26. satıra bir bakarsak, breakpoint olmamasına rağmen a = 2, b = 5 şeklinde bir ipucu metninin yazdığı görülüyor. Yani değerlerimiz doğru bir şekilde alınmış, bunu anlayabiliriz. Ekranın sağ tarafında da Local sekmesine bakarsanız a:2, b:5 ve c: undefined (tanımsız) olarak gösteriliyor. c tanımsız, çünkü 27. satırda durduk, daha işlemi yapmadı. Yine sağ tarafta Breakpoints sekmesinde de kaçıncı satırlarda hangi kodlarda duraklama yapılacağı satır satır gösteriliyor, o an bekleyen satır da sarı renkli olarak işaretleniyor. Call Stack sekmesinde de o an hangi fonksiyon çağırılmışsa o gösteriliyor.

Sayfanın üstündeki mavi oka bir kere tıklayıp bir sonraki breakpoint’e geçelim. Yani 27. satırdaki kod işlenecek ve 28’de bekleyecek.

Tekrar ekranı inceleyelim. İkinci breakpoint’e geçtiğimiz için Brekpoints sekmesinde bir sonraki breakpoint sarı renkle seçili halde gösteriliyor. 27. satırda da c = 7 değeri gösteriliyor, yani işlem doğru bir şekilde yapılmış. Local sekmesine de bakıldığında c: 7 değeri atanmış.

Tekrar ok butonuna tıklayıp devam ettirdiğinizde, daha fazla breakpoint olmadığı için sayfa normal haline dönecektir.

Ağ (Network)

Sayfaya yüklenecek olan kaynakların (html, css, js, jpg, medya, font gibi) dosyaların veya çeşitli web servislerinin HTTP Status kodlarını, ne kadar zamanda yüklendiğini, sayfanın veya web servisinin Header, Request ve Response verilerini de gösterir.

Ayrıca çeşitli ağ hızlarının simülasyonunu, bağlantının kesik olma durumunu ve cache işe önbellekleme sistemini de test edebilirsiniz.

Kullanması biraz kompleks olduğu için kitabımızın HTML5 API’lerini kullanırken Network sekmesinden faydalanacak ve detaylıca incelemesini yapacağız.

Örneğimiz için sayfanın tamamen render edilmesi 33 ms’de tamamlanmış, zaten çok da bir içerik yoktu. Eğer harici web servislerinden veri çekiliyor olsaydı süre uzayabilirdi. index.html dosyamız sadece yüklendiği için listede sadece o yer alıyor. index.html’in detayları da sağdaki panelde yer almaktadır. Özellikle web servisleriyle çalışırken Headers, Preview ve Response sekmeleri oldukça işimize yarayacak.

Orta kısımda bir Timeline yer alıyor. Burada yüklenen dosyaların ne kadar sürede yüklendiği ile ilgili bir grafik yer alacak. Bizim tek dosyamız 7ms olduğu için sol tarafta gri bir çizgi ile gösteriliyor. Bu zaman çizelgesinin de üst kısmında Filter kutucuğunda arama yapıp dosyalar arasında arama yapabilirsiniz (eğer çok fazla kaynak yükleniyorsa) veya Regex kullanabilir (hiç kullanma gereği duymadım) veya yüklenen dosyaları formatlarına göre de ilgili butonlara tıklayıp filtreleyebilirsiniz. Varsayılan olarak All ile bütün dosyaları gösteriyor. XHR, web servislerini temsil eder, diğerleri de zaten isimlerinden de anlaşılacağı üzere JavaScript, CSS, Resim gibi devam etmektedir.

En üst kısımda sol taraftaki kırmızı yuvarlak ikonuna tıkladığımızda, girmiş olduğunuz sayfadaki dosyaların ağ durumu analiz edilir, yani bu ikon kırmızı değilse, sayfadaki ağ analiz edilmez. Aktif etmek için bir kere tıklamanız yeterlidir (varsayılan olarak aktiftir). Onun solunda yer alan gri yuvarlak ikon da listeyi temizler. Önemli bir diğer araç da Preverse log’tur. Bu aktif olursa, sayfalar arasında geçiş yapsanız bile liste sıfırlanmaz. Eğer aktif değilse her sayfadan sayfaya geçişinizde liste sıfırlanır. Disable cache de eğer önbellekleme sistemini kullanıyorsanız onun test edilmesinde faydalı olacaktır. Bu araçların sağ tarafında Offline opsiyonu aktif edilirse, sanki internet bağlantısı kopmuş gibi davranış gösterecektir. Onun da sağında yer alan No throtting’e tıklayıp açılan menüden de internet hızınızı ayarlayabilirsiniz. Böylece düşük ve hızlı bağlantılarda sayfanız nasıl yükleniyor, ne gibi davranışlar gösteriyor test edebilirsiniz.

İçeriği paylaş:
  • facebook
  • twitter

Comments(2)

  1. Ertuğrul SAĞDIÇ
    123 days ago

    Hocam HTML5 Kitabınızı Uygulamasını Projeli Görsel Eğitim Olarak Udemy’den Bekliyoruz!

  2. Murat Aktaş
    138 days ago

    D. Tools kesinlikle müthiş bir şey. Özellikle yeni başlayan arkadaşlar öğrenme esnasında developer tools ile bol bol pratik yaparsa çok faydalı olacağını düşünüyorum. Teşekkürler Uğur hocam.

Leave a comment

Yorum