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

DOM düğümüne stil bildirimleri eklerken bazen bildirim değerinin hatırlanması daha kolaydır değil. Örneğin, bir <p> düğümünü kalın hale getirirken bold değeri şöyle olabilir: hatırlaması font-weight adından daha kolaydır. Stil bölmesinin otomatik tamamlama kullanıcı arayüzü artık CSS'yi destekliyor değerler. İstediğiniz anahtar kelime değerini hatırlıyorsanız ancak özellik adını hatırlayamıyorsanız Değerin ve otomatik tamamlamanın yazılması, aradığınız adı bulmanıza yardımcı olacaktı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 kısıtlama menüsü gibi seçeneklerin kullanıldığı bir kullanılabilirlik sorunu vardı Penceresi daraltıldığından erişilemez. Bu sorunu düzeltmek ve Ağ panelini sadeleştirmek için: daha az kullanılan birkaç seçenek yeni Ağ Ayarları'nın arkasına taşındı bölmesini de kullanabilirsiniz.

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

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

Ş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ı içeriyor. _webSocketMessages özelliği alt çizgi kullanın.

...
"_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 özelliğiyle ağ günlüklerini iş arkadaşlarınızla daha kolay paylaşın ve HAR Dosyasını İçe Aktar düğmeleri. HAR içe ve dışa aktarma Geliştirici Araçları'ndan bir süredir. Yeni değişiklik, daha kolay bulunabilen düğmelerdir.

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

Şekil 5. Bellek panelinin alt kısmında sayfanın 43,4 MB boyutunda bellek kullandığını gösterir. toplamıdır. 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 Worker (Hizmet Çalışanları) bölmesi, takibi kolaylaştırmak için başlıklarına artık bağlantı noktası numaraları ekliyor. hakkında daha fazla bilgi edinin.

Ş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

Uygulama panelinin yeni Arka Plan Hizmetleri bölümünü kullanarak Arka plan hizmetlerini Getirme ve Arka Plan Senkronizasyonu etkinlikleri. Arka Planda Getirme ve Arka Plan Senkronizasyonu etkinlikleri arka planda gerçekleştiğinden, Geliştirici Araçları yalnızca Arka Plan'da bir Geliştirici Araçları açıkken getirme ve arka plan senkronizasyonu etkinlikleri. Kaydetmeye başladıktan sonra, Sekmeyi kapattıktan sonra da Getirme ve Arka Plan Senkronizasyonu etkinlikleri kaydedilmeye devam eder ve ve Chrome'u kapattıktan sonra bile.

Uygulama paneline gidin, Arka Planda Getir veya Arka Plan Senkronizasyonu sekmesini açın, ardından Günlüğe kaydetmeye başlamak için Kaydet'i tıklayın etkinlikler. Hakkında daha fazla bilgi görüntülemek istediğiniz etkinliği tıklayın.

Şekil 7. Arka Plan Getirme bölmesi. Maxim Salnikov'dan 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

Puppeteer for Firefox, Firefox'u kullanarak programları otomatikleştirmek için yeni bir deneysel Puppeteer API. Başka bir deyişle, artık Firefox ve Chromium'u aynı Node API ile görebilirsiniz.

node example.js çalıştırıldıktan sonra, Firefox açılır ve arama kutusuna page metni eklenir göz atabilirsiniz. Daha sonra aynı görev Chromium'da tekrarlanır.

Google I/O 2019'da Joel ve Andrey'nin Puppeteer konuşmasına göz atın. Firefox için Puppeteer ve Puppeteer. 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ı sorunlarını bildirmek için Diğer seçenekler'i > Yardım > Geliştirici Araçları'nda Geliştirici Araçları ile ilgili sorunları 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.