Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

Kayce Basques

Merhaba! Chrome 76'da Chrome Geliştirici Araçları'ndaki yenilikler burada açıklanmıştır.

CSS değerleriyle otomatik tamamlama

Bir DOM düğümüne stil bildirimleri eklerken bazen bildirim değerinin hatırlanması, bildirim adından daha kolaydır. Örneğin, bir <p> düğümünü kalın hale getirirken bold değerinin hatırlanması, font-weight adından daha kolay olabilir. 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.

"Kalın" yazdıktan sonra Stiller bölmesi otomatik olarak "font-weight: bold" şeklinde tamamlanır.

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

Bu yeni özellikle ilgili geri bildiriminizi, Chromium sorun numarası 931145'e gönderin.

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çeneklere erişilemediği bir kullanılabilirlik sorunu vardı. Bu sorunu düzeltmek ve Ağ panelini sadeleştirmek için, daha az kullanılan birkaç seçenek yeni Ağ Ayarları bölmesinin arkasına taşındı.

Ağ Ayarları

Şekil 2. Ağ Ayarları'nı tıklayın.

Aşağıdaki seçenekler Ağ Ayarları'na taşındı: Büyük İstek Satırları Kullan, Çerçeve Ölçütü Gruplama, Genel Bakışı Göster, Ekran Görüntüleri Yakala. Şekil 3'te eski konumlar yenileriyle eşleştirilmektedir.

Eski konumların yenileriyle eşlenmesi.

Şekil 3. Eski konumların yenileriyle eşlenmesi.

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

HAR dışa aktarma işlemlerinde WebSocket iletileri

Ağ günlüklerini iş arkadaşlarınızla paylaşmak için Ağ panelinden bir HAR dosyasını dışa aktarırken HAR dosyanız artık WebSocket mesajlarını da içeriyor. _webSocketMessages özelliği, ö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!"
  }
]
...

Chromium sorunu #496006'ya bu yeni özellikle ilgili geri bildirim gönderin.

HAR içe 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şlemi, Geliştirici Araçları'nda bir süredir kullanılıyor. Yeni değişiklik, daha kolay bulunabilen düğmelerdir.

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 adresine gönderin.

Gerçek zamanlı toplam bellek kullanımı

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

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 İzleyicisi'ne de bakın.

Bu yeni özellikle ilgili geri bildiriminizi, Chromium sorun numarası 958177'ye gönderin.

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

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

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 adresine gönderin.

Arka Planda Getirme ve Arka Plan Senkronizasyonu 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. Dolayısıyla, kaydetmeye başladıktan sonra Arka Planda Getirme ve Arka Plan Senkronizasyonu etkinlikleri, sekme kapatıldıktan ve Chrome'u kapattıktan sonra bile 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. Hakkında daha fazla bilgi görüntülemek istediğiniz etkinliği tıklayın.

Arka Plan Getirme bölmesi.

Şekil 7. Arka Plan Getirme bölmesi. Maxim Salnikov'dan Demo.

Arka Plan Senkronizasyonu bölmesi.

Şekil 8. Arka Plan Senkronizasyonu bölmesi.

Bu yeni özelliklerle ilgili geri bildiriminizi, Chromium sorun numarası 927726'ya gönderin.

Firefox için Puppeteer

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

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

Google I/O 2019'da Joel ve Andrey'nin Puppeteer konuşmasına göz atarak Firefox için Puppeteer ve Puppeteer hakkında daha fazla bilgi edinin. Firefox duyurusu 4:05 civarında yapılır.

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