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

Kayce Basques

Merhaba! Chrome 76'daki Chrome Geliştirme Araçları'nda yapılan yenilikleri aşağıda bulabilirsiniz.

CSS değerleriyle otomatik tamamlama

Bir DOM düğümüne stil beyanları eklerken bazen beyan değerinin, beyan adından daha kolay hatırlanması mümkündür. Örneğin, <p> düğümünü kalınlaştırırken bold değerinin font-weight adından daha kolay hatırlanabileceğini düşünebilirsiniz. Stil bölmesinin otomatik tamamlama kullanıcı arayüzü artık CSS değerlerini destekliyor. İstediğiniz anahtar kelime değerini hatırlıyor ancak mülk adını hatırlamıyorsanız değeri yazmayı deneyin. Otomatik tamamlama özelliği, aradığınız adı bulmanıza yardımcı olur.

&quot;Kalın&quot; yazı tipini yazdıktan sonra Stil paneli, &quot;font-weight: bold&quot; olarak otomatik olarak tamamlanır.

Şekil 1. bold yazdıktan sonra Stiller bölmesi font-weight: bold ile otomatik olarak tamamlanır.

Bu yeni özellikle ilgili geri bildirimlerinizi Chromium sorunu 931145 için gönderebilirsiniz.

Ağ ayarları için yeni bir kullanıcı arayüzü

Ağ panelinde daha önce, DevTools penceresi dar olduğunda akış kısıtlama menüsü gibi seçeneklere erişilemediği bir kullanılabilirlik sorunu vardı. Bu sorunu düzeltmek ve Ağ panelinde yer açmak için daha az kullanılan birkaç seçenek yeni Ağ Ayarları Ağ Ayarları düğmesi paneline taşındı.

Ağ Ayarları

Şekil 2. Ağ Ayarları.

Aşağıdaki seçenekler Ağ Ayarları'na taşındı: Büyük İstek Satırları Kullan, Kare Bazında Gruplandır, Genel Bakış Göster, Ekran Görüntüsü Al. Şekil 3'te eski konumlar yeni konumlarla eşlenmiştir.

Eski konumları yeni konumlarla eşleme.

Şekil 3. Eski konumları yeni konumlarla eşleme.

Bu kullanıcı arayüzü değişikliğiyle ilgili geri bildiriminizi Chromium sorunu #892969 için gönderin.

HAR dışa aktarmalarında WebSocket mesajları

Ağ günlüklerini iş arkadaşlarınızla paylaşmak için Ağ panelinden HAR dosyası dışa aktarırken HAR dosyanız artık WebSocket mesajlarını içeriyor. _webSocketMessages mülkü, özel alan olduğunu belirtmek için alt çizgiyle başlar.

...
"_webSocketMessages": [
  {
    "type": "send",
    "time": 1558730482.5071473,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  },
  {
    "type": "receive",
    "time": 1558730482.5883863,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  }
]
...

Bu yeni özellikle ilgili geri bildirimlerinizi Chromium sorunu #496006 ileti dizisine gönderin.

HAR içe aktarma ve dışa aktarma düğmeleri

Yeni Tümünü İçerikle Birlikte HAR Olarak Dışa Aktar Dışa aktar ve HAR Dosyasını İçe Aktar İçe aktar düğmeleriyle ağ günlüklerini iş arkadaşlarınızla daha kolay paylaşın. HAR içe ve dışa aktarma işlemleri DevTools'da bir süredir mevcuttur. Daha kolay bulunabilen düğmeler yeni bir değişikliktir.

Yeni HAR düğmeleri.

Şekil 4. Yeni HAR düğmeleri.

Bu kullanıcı arayüzü değişikliğiyle ilgili geri bildiriminizi Chromium sorunu 904585 için gönderin.

Gerçek zamanlı toplam bellek kullanımı

Bellek paneli artık toplam bellek kullanımını gerçek zamanlı olarak gösterir.

Gerçek zamanlı toplam bellek kullanımı.

Şekil 5. Bellek panelinin alt kısmında, sayfanın toplamda 43,4 MB bellek kullandığı gösterilir. 209 KB/sn, toplam bellek kullanımının saniyede 209 KB arttığını gösterir.

Bellek kullanımını gerçek zamanlı olarak izlemek için Performans İzleyici'ye de bakın.

Bu yeni özellikle ilgili geri bildirimlerinizi Chromium sorunu 958177 için gönderin.

Hizmet çalışanı kayıt bağlantı noktası numaraları

Hata ayıkladığınız servis çalışanını daha kolay takip edebilmeniz için Servis Çalışanları bölmesinin başlıklarında artık bağlantı noktası numaraları yer alıyor.

Hizmet çalışanı bağlantı noktaları.

Şekil 6. Hizmet çalışanı bağlantı noktaları.

Bu kullanıcı arayüzü değişikliğiyle ilgili geri bildiriminizi Chromium sorunu 601286 için gönderin.

Arka planda getirme ve arka planda senkronizasyon etkinliklerini inceleme

Arka Planda Getirme ve Arka Planda Senkronizasyon etkinliklerini izlemek için Uygulama panelinin yeni Arka Plan Hizmetleri bölümünü kullanın. Arka planda getirme ve arka planda senkronizasyon etkinliklerinin arka planda gerçekleştiği göz önüne alındığında, DevTools yalnızca DevTools açıkken arka planda getirme ve arka planda senkronizasyon etkinliklerini kaydederse bu çok yararlı olmaz. Bu nedenle, kaydetmeye başladıktan sonra sekmeyi ve Chrome'u kapatsanız bile Arka Planda Getirme ve Arka Planda Senkronizasyon etkinlikleri kaydedilmeye devam eder.

Uygulama paneline gidin, Arka Planda Getirme veya Arka Planda Senkronizasyon sekmesini açın, ardından etkinlikleri kaydetmeye başlamak için Kaydet'i Kaydet tıklayın. Bir etkinlik hakkında daha fazla bilgi görüntülemek için etkinliği tıklayın.

Arka Planda Getirme bölmesi.

Şekil 7. Arka Planda Getirme bölmesi. Maxim Salnikov tarafından hazırlanan demo.

Arka Plan Senkronizasyonu bölmesi.

Şekil 8. Arka Plan Senkronizasyonu bölmesi.

Bu yeni özelliklerle ilgili geri bildirimlerinizi Chromium sorunu 927726 için gönderin.

Firefox için Puppeteer

Firefox için Puppeteer, Puppeteer API ile Firefox'u otomatikleştirmenizi sağlayan yeni bir deneysel projedir. Diğer bir deyişle, artık aşağıdaki videoda gösterildiği gibi Firefox ve Chromium'u aynı Node API ile otomatikleştirebilirsiniz.

node example.js çalıştırıldıktan sonra Firefox açılır ve Puppeteer'ın doküman sitesindeki arama kutusuna page metni eklenir. Ardından aynı görev Chromium'da tekrarlanır.

Puppeteer ve Firefox için Puppeteer hakkında daha fazla bilgi edinmek üzere Joel ve Andrey'in Google I/O 2019'daki konuşmasına göz atın. Firefox duyurusu 4:05 civarında gerçekleşir.

Ö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.