Geliştirici Araçları'ndaki Yenilikler (Chrome 66)

Kayce Basques
Kayce Basques
X GitHub

Chrome 66'da Geliştirici Araçları'na eklenecek yeni özellikler ve önemli değişiklikler:

Devam edin veya aşağıdaki sürüm notlarının video versiyonunu izleyin.

Ağ panelinde komut dosyasını yoksayma

Ağ panelindeki Başlatıcı sütunu, bir kaynağın neden istendiğini gösterir. Örneğin, JavaScript bir resmin getirilmesine neden olursa Başlatan sütununda isteğe neden olan JavaScript kodu satırı gösterilir.

Daha önce, çerçeveniz ağ isteklerini bir sarmalayıcıya sarmalıyorsa Başlatan sütunu pek yararlı olmazdı. Tüm ağ istekleri, sarmalayıcı kodun aynı satırına yönlendiriliyordu.

Bu senaryoda asıl istediğiniz, isteğe neden olan uygulama kodunu görmektir. Artık şunları yapabilirsiniz:

  1. Fareyle Başlatan sütununun üzerine gelin. İsteğe neden olan çağrı yığını, pop-up pencerede gösterilir.
  2. Başlatan sonuçlarından gizlemek istediğiniz görüşmeyi sağ tıklayın.
  3. Komut dosyasını yoksayılanlar listesine ekle'yi seçin. Başlatan sütunu artık komut dosyasından gelen ve sizin yoksaydığınız tüm çağrıları gizliyor.

"requests.js" dosyası yoksayılıyor.

Şekil 1. requests.js yoksayılıyor

Yoksayılan komut dosyalarınızı Ayarlar'daki Yoksayılanlar Listesi sekmesinden yönetebilirsiniz.

Komut dosyalarını yok sayma hakkında daha fazla bilgi edinmek için Komut dosyasını veya komut dosyası kalıbını yok sayma başlıklı makaleyi inceleyin.

Önizleme ve Yanıt sekmelerinde güzel yazdırma

Ağ panelindeki Önizleme sekmesi, kaynakların küçültüldüğünü algıladığında artık varsayılan olarak kaynakları güzel bir şekilde yazdırır.

Önizleme sekmesi, analytics.js'nin içeriğini varsayılan olarak güzel biçimlendirir.

Şekil 2. Önizleme sekmesi, analytics.js içeriğini varsayılan olarak güzel biçimlendirir.

Bir kaynağın küçültülmemiş sürümünü görüntülemek için Yanıt sekmesini kullanın. Ayrıca, yeni Biçimlendir düğmesini kullanarak Yanıt sekmesindeki kaynakları manuel olarak da güzel yazdırabilirsiniz.

Biçimlendir düğmesini kullanarak analytics.js'nin içeriğini manuel olarak biçimlendirme.

Şekil 3. analytics.js içeriğini Biçim düğmesiyle manuel olarak biçimlendirme

Önizleme sekmesinde HTML içeriğini önizleme

Daha önce, Ağ panelindeki Önizleme sekmesi, belirli durumlarda bir HTML kaynağının kodunu gösterirken diğer durumlarda HTML'nin önizlemesini oluşturuyordu. Önizleme sekmesi artık HTML'nin temel bir oluşturma işlemini her zaman gerçekleştiriyor. Tam bir tarayıcı olarak tasarlanmadığından HTML'yi tam olarak beklediğiniz gibi görüntülemeyebilir. HTML kodunu görmek istiyorsanız Yanıt sekmesini tıklayın veya bir kaynağı sağ tıklayıp Kaynaklar panelinde aç'ı seçin.

Önizleme sekmesinde HTML'yi önizleme

Şekil 4. Önizleme sekmesinde HTML'yi önizleme

Cihaz modunda yakınlaştırmayı otomatik ayarlama

Cihaz Modu'ndayken Yakınlaştırma açılır listesini açın ve cihaz yönünü her değiştirdiğinizde görüntü alanını otomatik olarak yeniden boyutlandırmak için Yakınlaştırmayı otomatik ayarla'yı seçin.

Yerel geçersiz kılmalar artık HTML'de tanımlanan bazı stillerle çalışıyor

Geliştirici Araçları, Chrome 65'te Yerel Geçersiz Kılmalar'ı kullanıma sunduğunda HTML'de tanımlanan stillerdeki değişiklikleri izleyememesi bir sınırlamaydı. Örneğin, Şekil 7'de, belgenin head bölümünde h1 öğeleri için font-weight: bold bildiren bir stil kuralı vardır.

HTML'de tanımlanan stillere örnek

Şekil 5. HTML'de tanımlanan stillere örnek

Chrome 65'te, Geliştirici Araçları Stil bölmesi aracılığıyla font-weight bildirimini değiştirirseniz Yerel Geçersiz Kılmalar bu değişikliği izlemezdi. Başka bir deyişle, sonraki yeniden yüklemede stil font-weight: bold'ya geri döner. Ancak Chrome 66'da bu tür değişiklikler artık sayfa yüklemeleri arasında korunuyor.

Bonus ipucu: Etkinlik işleyici ayrılma noktalarını daha kullanışlı hale getirmek için çerçeve komut dosyalarını yoksayın

JavaScript'te Hata Ayıklamaya Başlama videosunu oluşturduğumda bazı izleyiciler, etkinlik dinleyici kesme noktalarının çerçeveler üzerine kurulu uygulamalarda yararlı olmadığını, çünkü etkinlik dinleyicilerin genellikle çerçeve koduyla sarmalandığını belirtmişti. Örneğin, Şekil 8'de Geliştirici Araçları'nda bir click kesme noktası ayarladım. Demodaki düğmeyi tıkladığımda Geliştirici Araçları, dinleyici kodunun ilk satırında otomatik olarak duraklıyor. Bu durumda, 1802. satırdaki Vue.js'in sarmalayıcı kodunda duraklatılıyor. Bu da pek yardımcı olmuyor.

Tıklama kesme noktası, Vue.js sarmalayıcı kodunda duraklatılır.

Şekil 6 click kesme noktası, Vue.js'nin sarmalayıcı kodunda duraklatılıyor

Vue.js komut dosyası ayrı bir dosyada olduğundan, bu click kesme noktasını daha kullanışlı hale getirmek için bu komut dosyasını Çağrı Yığını bölmesinde yoksayabilirim.

Call Stack (Çağrı Yığını) bölmesindeki Vue.js komut dosyasını yoksayma.

Şekil 7 Çağrı yığını bölmesindeki Vue.js komut dosyasını yoksayma

Bir sonraki sefer düğmeyi tıklayıp click kesme noktasını tetiklediğimde Vue.js kodu, duraklatılmadan yürütülüyor ve ardından uygulamamın dinleyicisindeki ilk kod satırında duraklatılıyor. Aslında en başından beri duraklatmak istediğim yer burasıydı.

Tıklama kesme noktası artık uygulamanın işleyici kodunda duraklatılıyor.

Şekil 8 click kesme noktası artık uygulamanın dinleyici kodunda duraklatılıyor

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Dev veya Beta'yı kullanmayı düşünebilirsiniz. Bu önizleme kanalları, en yeni DevTools özelliklerine erişmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır ve kullanıcılarınızdan önce sitenizdeki sorunları bulmanıza yardımcı olur.

Chrome Geliştirici Araçları Ekibi ile iletişime geçme

Yeni özellikler, güncellemeler veya Geliştirici Araçları ile ilgili diğer konuları tartışmak için aşağıdaki seçenekleri kullanın.

Geliştirici Araçları'ndaki yenilikler

Geliştirici Araçları'ndaki yenilikler serisinde ele alınan her şeyin listesi.