Ders 02F12'ye bastığımızda karşımıza çıkan dünyaKonu ve yapılacaklar

DevTools tarayıcının içindeki atölyedir. Elements sayfanın o anki canlı halini (DOM), Console JavaScript mesajlarını, Network gidip gelen istekleri, Sources yüklenen dosyaları, Application ise tarayıcıda saklanan çerez ve depolama verilerini gösterir. "Sayfa kaynağını görüntüle" sunucudan gelen ilk HTML'dir; Elements ise JavaScript çalıştıktan sonraki halidir.

  1. Ctrl+U ile kaynağı açın, "karsilama" paragrafını ve boş listeyi bulun; sonra Elements'te aynı yere bakın.
  2. Console'daki log, uyarı, hata ve tablo mesajlarını okuyun.
  3. Application sekmesinde çerezi, localStorage ve sessionStorage kayıtlarını bulun.
  4. Cihaz araç çubuğu ile telefon genişliğine geçin, kırılım kutusunun değiştiğini görün.

Alıştırma · F12

DevTools'u bu sayfada deneyin

Bu sayfanın her bölümü DevTools'un bir sekmesi için hazırlandı. F12'ye (Mac'te ⌥⌘I) basın ve sırayla ilerleyin.

Elements: kaynak ile canlı sayfa aynı değil

Bu cümle sunucudan geldi.

    Ctrl+U ile sayfa kaynağına bakın: yukarıdaki cümle farklı, liste boş. Elements'te ise JavaScript'in değiştirdiği hali görürsünüz.

    Console: sayfanın günlüğü

    Sayfa açılırken Console'a dört farklı türde mesaj yazıldı. Düğme her basışta yenisini ekler.

    Application: tarayıcıda saklananlar

    Çerez
    sf_tercih_sehir (sunucu gönderdi)
    localStorage
    sf_ziyaret_sayisi = ?
    sessionStorage
    sf_oturum_baslangic = ?

    Sayfayı yenileyin: ziyaret sayısı artar. Sekmeyi kapatıp açın: oturum değeri sıfırlanır, ziyaret sayısı kalır.

    Cihaz görünümü

    Pencere genişliği: ? piksel

    Görünüm: ?

    Ctrl+Shift+M ile cihaz araç çubuğunu açıp farklı telefonları seçin.

    Sources: sayfanın dosyaları

    Bu sayfanın kodu assets/js/devtools.js dosyasında. Sources panelinde dosyayı açın, toplamHesapla fonksiyonunun içine kesme noktası koyun ve düğmeye basın.

    Toplam: —