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 yenilikleri burada bulabilirsiniz.

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. İstediğiniz anahtar kelime değerini hatırlıyor ancak özellik adını hatırlayamıyorsanız değeri yazmayı deneyin. Otomatik tamamlama özelliği 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 otomatik olarak font-weight: bold şeklinde tamamlanır.

Chromium sorunu #931145'e bu yeni özellikle ilgili geri bildirim gönderin.

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

Daha önce Ağ panelinde, Geliştirici Araçları penceresi dar olduğunda kısıtlama menüsü gibi seçeneklere erişilememesine neden olan bir kullanılabilirlik sorunu vardı. Bu sorunu düzeltmek ve Ağ panelinde dağınıklığı gidermek için 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.

Şu seçenekler Ağ Ayarları'na taşındı: Büyük İstek Satırlarını Kullan, Çerçeveye Göre Gruplandır, Genel Bakışı Göster, Ekran Görüntüleri Yakala. Şekil 3'te eski konumlar yenileriyle eşleştirilmiştir.

Eski konumları yenilerle eşleme.

Şekil 3. Eski konumları yenilerle eşleme.

Chromium sorunu #892969 ile ilgili bu kullanıcı arayüzü değişikliğiyle ilgili geri bildirim gönderin.

HAR dışa aktarma işlemlerinde WebSocket mesajları

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ızda artık WebSocket mesajları bulunmaktadır. _webSocketMessages özelliği, ö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!"
  }
]
...

496006 numaralı Chromium sorununa 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üğmeleriyle ağ günlüklerini iş arkadaşlarınızla daha kolay paylaşın. HAR içe ve dışa aktarma işlemleri bir süredir Geliştirici Araçları'nda bulunuyor. Yeni değişiklik, daha kolay bulunabilir hale getirilmiş düğmelerdir.

Yeni HAR düğmeleri.

Şekil 4. Yeni HAR düğmeleri.

904585 numaralı Chromium sorunu ile ilgili bu kullanıcı arayüzü değişikliğiyle ilgili geri bildirim 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 toplam 43,4 MB bellek kullandığını gösterir. 209 KB/sn, toplam bellek kullanımının saniyede 209 KB arttığını gösterir.

Ayrıca, bellek kullanımını gerçek zamanlı olarak izlemek için Performans İzleyicisi'ne de bakın.

Chromium sorunu #958177'ye bu yeni özellikle ilgili geri bildirim gönderin.

Hizmet çalışanı kaydı bağlantı noktası numaraları

Hizmet Çalışanları bölmesinin başlıklarına bağlantı noktası numaraları eklendi. Bu sayede, hata ayıkladığınız hizmet çalışanının takibini daha kolay hale getirebilirsiniz.

Service Worker bağlantı noktaları.

Şekil 6. Service Worker bağlantı noktaları.

601286 numaralı Chromium sorunu ile ilgili bu kullanıcı arayüzü değişikliğiyle ilgili geri bildirim gönderin.

Arka Planda Getirme ve Arka Plan Senkronizasyonu etkinliklerini inceleme

Arka Plan 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 düşünüldüğünde, Geliştirici Araçları'nın yalnızca Arka Planda Getirme ve Arka Plan Senkronizasyonu etkinliklerini Geliştirici Araçları açıkken kaydetmesi çok faydalı olmazdı. Böylece, kaydı başlattıktan sonra Arka Planda Getirme ve Arka Plan Senkronizasyonu etkinlikleri, siz sekmeyi kapattıktan sonra ve Chrome'u kapattıktan sonra bile kaydedilmeye devam eder.

Uygulama paneline gidin, Arka Planda Getirme veya Arka Plan Senkronizasyonu sekmesini açın, ardından etkinlikleri günlüğe kaydetmeye başlamak için Kaydet'i 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.

Chromium sorunu #927726'ya bu yeni özelliklerle ilgili geri bildirim gönderin.

Firefox için Puppeteer

Firefox için Puppeteer, Firefox'u Puppeteer API ile otomatikleştirmenize olanak tanıyan yeni bir deneysel projedir. Başka bir deyişle, aşağıdaki videoda gösterildiği gibi artık Firefox ve Chromium'u aynı Node API ile otomatikleştirebilirsiniz.

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

Google I/O 2019'dan Joel ve Andrey'nin Puppeteer konuşmasını inceleyerek Firefox için Puppeteer ve Puppeteer hakkında daha fazla bilgi edinebilirsiniz. Firefox duyurusu 16:05 civarında yapılır.

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni geliştirilenler veya Beta'yı kullanmayı düşünün. Bu önizleme kanallarıyla Geliştirici Araçları'nın en yeni özelliklerine erişebilir, son teknoloji ürünü web platformu API'lerini test edebilir ve sitenizdeki sorunları kullanıcılarınızdan önce tespit edebilirsiniz!

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

Yayındaki yeni özellikler ve değişiklikler ya da Geliştirici Araçları ile ilgili diğer konular hakkında konuşmak için aşağıdaki seçenekleri kullanın.

crbug.com adresinden öneri veya geri bildirim gönderin.
Geliştirici Araçları'nda, Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunlarını bildirin.
@ChromeDevTools adresine tweet gönderin.
Geliştirici Araçları'ndaki YouTube videoları veya Geliştirici Araçları İpuçları YouTube videolarındaki yenilikler hakkındaki görüşlerinizi bizimle paylaşın.