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

Kayce Basques

Chrome 66'da Geliştirici Araçları'na eklenen yeni özellikler ve yapılan önemli değişiklikler şunlardır:

Devamını okuyun veya aşağıdaki sürüm notlarının video sürümünü 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ütunu, isteğe neden olan JavaScript kodu satırını gösterir.

Daha önce, çerçeveniz ağ isteklerini bir sarmalayıcıya sardıysa Başlatıcı sütunu çok yararlı olmazdı. Tüm ağ istekleri aynı sarmalayıcı kodu satırını gösteriyordu.

Bu senaryoda asıl görmek istediğiniz, isteğe neden olan uygulama kodudur. Artık bunu yapabilirsiniz:

  1. Fareyle İlgili kişi sütununun üzerine gelin. İsteğe neden olan çağrı yığını bir pop-up'ta görünür.
  2. Başlatıcı sonuçlarında gizlemek istediğiniz görüşmeyi sağ tıklayın.
  3. Komut dosyasını yoksayılanlar listesine ekle'yi seçin. Başlatıcı sütunu artık komut dosyasından yoksaydığınız tüm çağrıları gizler.

"requests.js" yoksayılıyor.

Şekil 1. requests.js yoksayılsın mı?

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

Komut dosyalarını yok sayma hakkında daha fazla bilgi edinmek için Bir 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 içeriğini varsayılan olarak güzel bir şekilde yazdırır.

Şekil 2. Önizleme sekmesi, analytics.js içeriğini varsayılan olarak güzel bir şekilde yazdırıyor

Bir kaynağın sıkıştırılmamış 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 sekmesinden kaynakları manuel olarak güzel bir şekilde yazdırabilirsiniz.

Format düğmesi aracılığıyla analytics.js içeriğini manuel olarak güzel bir şekilde yazdırma.

Şekil 3. analytics.js içeriğini Biçimlendir düğmesi aracılığıyla manuel olarak güzel bir şekilde yazdırma

Ö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 her zaman HTML'yi temel düzeyde oluşturur. Tam bir tarayıcı olarak tasarlanmadığı için HTML'yi tam olarak beklediğiniz gibi göstermeyebilir. 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 modundayken Yakınlaştırma açılır menüsünü açıp Yakınlaştırmayı otomatik ayarla'yı seçerek cihaz yönünü değiştirdiğinizde görüntü alanını otomatik olarak yeniden boyutlandırabilirsiniz.

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

Geliştirici Araçları, Chrome 65'te yerel geçersiz kılma özelliğini kullanıma sunduğunda bu özelliğin bir sınırlaması, HTML'de tanımlanan stillerde yapılan değişiklikleri izleyememesiydi. Örneğin, Şekil 7'de, dokümanın head bölümünde h1 öğeleri için font-weight: bold değerini açıklayan bir stil kuralı vardır.

HTML'de tanımlanan stilleri gösteren örnek

Şekil 5. HTML içinde tanımlanan stilleri gösteren örnek

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

Bonus ipucu: Etkinlik İşleyici Ayrılma Noktalarını daha kullanışlı hale getirmek için çerçeve komut dosyalarını yoksayma

JavaScript'de Hata Ayıklama ile Başlayın videosunu oluşturduğum sırada bazı izleyiciler, etkinlik dinleyicileri genellikle çerçeve koduna sarmalandığı için etkinlik dinleyicisi kesme noktalarının, çerçeveler üzerine inşa edilmiş uygulamalar için yararlı olmadığını yorumlamıştı. Örneğin, Şekil 8'de Geliştirici Araçları'nda bir click kesme noktası oluşturdum. Demodaki düğmeyi tıkladığımda DevTools, dinleyici kodunun ilk satırında otomatik olarak duraklar. Bu durumda, Vue.js'in sarmalayıcı kodunda 1802. satırda duraklatılır. Bu pek faydalı değildir.

Tıklama durak noktası, Vue.js'in sarmalayıcı kodunda duraklatılır.

Şekil 6. click duraklatma noktası, Vue.js'in sarmalayıcı kodunda duraklatır

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

Çağrı yığını bölmesinde Vue.js komut dosyası yoksayılır.

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

Düğmeyi tekrar tıklayıp click kesme noktasını tetiklediğimde, Vue.js kodu duraklatılmaksızın yürütülür ve ardından uygulamamın dinleyicisindeki ilk kod satırında duraklatılır. Aslında duraklatılmasını istediğim yer de burasıydı.

Tıklama durak noktası artık uygulamanın dinleyici kodunda duraklatılır.

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

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni Geliştirilenler veya Beta sürümünü kullanabilirsiniz. Bu önizleme kanalları, en son DevTools özelliklerine erişmenize, en yeni web platformu API'lerini test etmenize ve sitenizdeki sorunları kullanıcılarınızdan önce 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 başka herhangi bir konu hakkında konuşmak için aşağıdaki seçenekleri kullanın.

Geliştirici Araçları'ndaki yenilikler

DevTools'daki yenilikler serisinde ele alınan tüm konuların listesi.