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

Kayce Basques

Chrome 66'da Geliştirici Araçları'nda sunulacak yeni özellikler ve önemli değişiklikler şunlardır:

Aşağıdaki sürüm notlarını okuyun veya video sürümünü izleyin.

Ağ panelinde komut dosyasını yoksay

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

Daha önce, çerçeveniz bir sarmalayıcı içinde sarmalanmış ağ istekleri olduğunda Initiator sütunu çok faydalı olmazdı. Tüm ağ istekleri, aynı sarmalayıcı kod satırını işaret ediyor.

Bu senaryoda asıl istediğiniz, isteğe neden olan uygulama kodunu görmektir. Bu artık mümkün:

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

"requests.js" yoksayılıyor.

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

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

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

Önizleme ve Yanıt sekmelerinde okunaklı şekilde yazdırma

Ağ panelindeki Önizleme sekmesi artık küçültülmüş olduğunu algıladığı kaynakları varsayılan olarak okunaklı şekilde yazdırıyor.

Önizleme sekmesi, analytics.js içeriğinin varsayılan olarak okunmasını sağlar.

2. Şekil. analytics.js içeriğinin varsayılan olarak yazdırıldığı Önizleme sekmesi

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

Biçim düğmesini kullanarak analytics.js içeriğini manuel olarak yazdırma.

3. Şekil. analytics.js içeriğini Biçim düğmesini kullanarak manuel olarak okunaklı hâle getirmek

Önizleme sekmesinde HTML içeriğini önizleme

Önceden, Ağ panelindeki Önizleme sekmesi belirli durumlarda bir HTML kaynağının kodunu gösterirken diğerlerinde HTML'nin önizlemesini oluşturuyordu. Önizleme sekmesi artık her zaman HTML'nin temel bir oluşturma işlemini yapıyor. Tam işlevli bir tarayıcı tasarlanmamıştır. Bu nedenle, 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 Kaynak panelinde aç'ı seçin.

Önizleme sekmesinde HTML önizlemesi.

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

Cihaz Modu'nda yakınlaştırmayı otomatik olarak ayarla

Cihaz Modu'ndayken Zum 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ı'nın Chrome 65'te Yerel Geçersiz Kılmalar'ı kullanıma sunmasıyla ilgili kısıtlamalardan biri, HTML içinde tanımlanan stillerdeki değişiklikleri izleyememesiydi. Örneğin, Şekil 7'de, dokümanın head bölümünde h1 öğeleri için font-weight: bold tanımlayan bir stil kuralı bulunmaktadır.

HTML'de tanımlanan stillere bir örnek

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

Chrome 65'te, Geliştirici Araçları Stil bölmesi aracılığıyla font-weight bildirimini değiştirdiyseniz Yerel Geçersiz Kılmalar bu değişikliği izlemez. Diğer bir deyişle, bir sonraki yeniden yüklemede stil tekrar font-weight: bold değerine geri döner. Ancak Chrome 66'da bunun gibi değişiklikler artık sayfa yüklemelerinde de devam ediyor.

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

JavaScript ile Hata Ayıklamaya Başlayın videosunu oluşturduğumda, bazı izleyiciler etkinlik işleyiciler genellikle çerçeve koduna sarmalandığından etkinlik işleyici ayrılma noktalarının çerçeveler üzerine oluşturulan uygulamalar için kullanışlı olmadığını söylüyordu. Örneğin, Şekil 8'de Geliştirici Araçları'nda bir click ayrılma noktası oluşturdum. Demoda düğmeyi tıkladığımda Geliştirici Araçları, dinleyici kodunun ilk satırında otomatik olarak duraklıyor. Bu durumda, Vue.js'nin sarmalayıcı kodunda 1802 numaralı satırda duraklar. Bu da pek faydalı değildir.

Vue.js'nin sarmalayıcı kodunda tıklama ayrılma noktası duraklar.

6. Şekil. Vue.js'nin sarmalayıcı kodunda click ayrılma noktası duraklıyor

Vue.js komut dosyası ayrı bir dosyada olduğundan, bu click ayrılma noktasını daha kullanışlı hale getirmek için söz konusu komut dosyasını Çağrı Grubu bölmesinden yok sayabilirim.

Çağrı Yığını bölmesindeki Vue.js komut dosyası yoksayılıyor.

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

Düğmeyi bir dahaki sefer tıklayıp click ayrılma noktasını tetiklediğimde, Vue.js kodunu duraklamadan yürütüyor ve uygulamamın dinleyicisindeki ilk kod satırında duraklıyor.

Tıklama ayrılma noktası artık uygulamanın işleyici kodunda duraklatılır.

8. Şekil. click ayrılma noktası artık uygulamanın işleyici kodunda duraklatılıyor

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Dev veya Beta'yı kullanabilirsiniz. Bu önizleme kanalları en yeni Geliştirici Araçları özelliklerine erişmenizi, son teknoloji ürünü web platformu API'lerini test etmenizi ve kullanıcılarınızdan önce sitenizdeki sorunları bulmanızı sağlar.

Chrome Geliştirici Araçları ekibiyle iletişim kurma

Yayındaki yeni özellikleri ve değişiklikleri ya da Geliştirici Araçları ile ilgili diğer her şeyi tartışmak için aşağıdaki seçenekleri kullanın.

  • Öneri veya geri bildirimlerinizi crbug.com adresinden bize iletebilirsiniz.
  • Geliştirici Araçları'ndaki Diğer seçenekler   Diğer > Yardım > Geliştirici Araçları ile ilgili sorun bildir bölümüne giderek Geliştirici Araçları sorunlarını bildirin.
  • @ChromeDevTools adresinden tweet atabilirsiniz.
  • Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.

Geliştirici Araçları'ndaki yenilikler

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

Chrome 127 sürümü

Chrome 126

Chrome 125 sürümü

Chrome 124 sürümü

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119 sürümü

Chrome 118 sürümü

Chrome 117 sürümü

Chrome 116

Chrome 115 sürümü

Chrome 114 sürümü

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109 sürümü

Chrome 108 sürümü

Chrome 107 sürümü

Chrome 106

Chrome 105 sürümü

Chrome 104 sürümü

Chrome 103 sürümü

Chrome 102 sürümü

Chrome 101

Chrome 100 sürümü

Chrome 99 sürümü

Chrome 98 sürümü

Chrome 97 sürümü

Chrome 96 sürümü

Chrome 95 sürümü

Chrome 94 sürümü

Chrome 93 sürümü

Chrome 92 sürümü

Chrome 91 sürümü

Chrome 90 sürümü

Chrome 89 sürümü

Chrome 88 sürümü

Chrome 87 sürümü

Chrome 86

Chrome 85 sürümü

Chrome 84

Chrome 83 sürümü

Chrome 82

Chrome 82 iptal edildi.

Chrome 81

Chrome 80 sürümü

Chrome 79 sürümü

Chrome 78 sürümü

Chrome 77

Chrome 76

Chrome 75 sürümü

Chrome 74 sürümü

Chrome 73

Chrome 72 sürümü

Chrome 71

Chrome 70

Chrome 68 sürümü

Chrome 67 sürümü

Chrome 66

Chrome 65 sürümü

Chrome 64 sürümü

Chrome 63 sürümü

Chrome 62 sürümü

Chrome 61 sürümü

Chrome 60 sürümü

Chrome 59 sürümü