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ırlanabileceğini unutmayın. Ö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. Hangi anahtar kelime değerini istediğinizi hatırlıyor ancak mülk adını hatırlayamıyorsanız değeri yazmayı deneyin. Otomatik tamamlama, aradığınız adı bulmanıza yardımcı olacaktı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, Geliştirici Araçları penceresi dar olduğunda kısıtlama menüsü gibi seçeneklerin kullanılamadığına dair 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ı paneline taşındı.

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

Ş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 bir 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 HAR Olarak Dışa Aktar ve HAR Dosyasını İçe Aktar düğmelerini kullanarak 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.

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

Ş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ı

Hizmet Çalışanları bölmesi, hata ayıkladığınız hizmet çalışanının takibini kolaylaştırmak için artık başlıklarına bağlantı noktası numaraları ekliyor.

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

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

Arka planda getirme ve arka planda senkronizasyon etkinliklerini inceleme

Arka Planda Getirme ve Arka Plan Senkronizasyonu etkinliklerini izlemek için Uygulama panelinin yeni Arka Plan Hizmetleri bölümünü kullanın. Arka Planda Getirme ve Arka Plan Senkronizasyonu etkinliklerinin arka planda gerçekleştiği göz önünde bulundurulduğunda, Geliştirici Araçları yalnızca Arka Planda Getirme ve Arka Plan Senkronizasyonu etkinliklerini Geliştirici Araçları açıkken kaydetmişse bu pek kullanışlı 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 Getir veya Arka Plan Senkronizasyonu sekmesini açın, ardından etkinlikleri günlüğe kaydetmeye başlamak için Kaydet simgesini tıklayın. Bir etkinliğin ayrıntılarını görüntülemek için etkinliği tıklayın.

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

Şekil 8. Arka Plan Senkronizasyonu bölmesi.

Bu yeni özelliklerle ilgili geri bildiriminizi, Chromium sorun numarası 927726'ya 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 yeni Geliştirici Araçları özelliklerine erişmenizi, son teknoloji web platformu API'lerini test etmenizi ve sitenizdeki sorunları kullanıcılarınızdan önce bulmanızı sağlar.

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

Yeni özellikleri, güncellemeleri veya Geliştirici Araçları ile ilgili diğer konuları görüşmek için aşağıdaki seçenekleri kullanın.

• crbug.com adresinden bize geri bildirim ve özellik isteği gönderin.
• Geliştirici Araçları'ndaki more_vert Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir bölümüne giderek Geliştirici Araçları sorunlarını bildirin.
• @ChromeDevTools hesabına tweet gönderin.
• Geliştirici Araçları YouTube videolarındaki yenilikler veya Geliştirici Araçları İpuçları YouTube videolarına yorum yazın.

Geliştirici Araçları'ndaki yenilikler

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