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

Kayce Basques

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

CSS değerleriyle otomatik tamamlama

Bir DOM düğümüne stil bildirimleri eklerken bazen bildirim değerini hatırlamak bildirim adını hatırlamaktan daha kolaydır. Örneğin, bir <p> düğümünü kalın yaparken bold değerini hatırlamak, font-weight adını hatırlamaktan daha kolay olabilir. Stil panelinin 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ırlamıyorsanız değeri yazmayı deneyin. Otomatik tamamlama, aradığınız adı bulmanıza yardımcı olacaktır.

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

Bu yeni özellikle ilgili geri bildirimlerinizi Chromium sorun #931145 sayfasına 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çeneklere erişilememesiyle ilgili bir kullanılabilirlik sorunu vardı. Bu sorunu düzeltmek ve Ağ panelini daha düzenli hale getirmek için daha az kullanılan birkaç seçenek yeni Ağ Ayarları panelinin arkasına taşındı.

2. şekil. Ağ Ayarları.

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

3. şekil Eski konumları yenileriyle eşleme

Bu kullanıcı arayüzü değişikliğiyle ilgili geri bildirimlerinizi Chromium sorun #892969 adresine 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 aktardığınızda HAR dosyanız artık WebSocket mesajlarını da içerir. _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!"
  }
]
...

Bu yeni özellikle ilgili geri bildirimlerinizi Chromium sorun #496006 adresine gönderin.

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

Yeni Tümünü İçerikle Birlikte 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 mevcuttu. Daha kolay bulunabilen düğmeler yeni bir değişikliktir.

4. şekil Yeni HAR düğmeleri.

Bu kullanıcı arayüzü değişikliğiyle ilgili geri bildirimlerinizi Chromium sorunu #904585'e gönderin.

Gerçek zamanlı toplam bellek kullanımı

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

5. şekil 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 göz atın.

Bu yeni özellikle ilgili geri bildirimlerinizi Chromium sorun #958177 sayfasına gönderebilirsiniz.

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

Hizmet Çalışanları panelinin başlıklarında artık bağlantı noktası numaraları yer alıyor. Bu sayede, hangi hizmet çalışanında hata ayıklama yaptığınızı daha kolay takip edebilirsiniz.

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

Bu kullanıcı arayüzü değişikliğiyle ilgili geri bildirimlerinizi Chromium sorun #601286 adresine 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 etkinlikleri arka planda gerçekleştiğinden, Geliştirici Araçları'nın yalnızca Geliştirici Araçları açıkken Arka Planda Getirme ve Arka Planda Senkronizasyon etkinliklerini kaydetmesi pek kullanışlı olmaz. Yani kaydetmeye başladıktan sonra, sekmeyi ve hatta 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 günlüğe kaydetmeye başlamak için Kaydet'i tıklayın. Bir etkinliği tıklayarak etkinlik hakkında daha fazla bilgi edinebilirsiniz.

Ş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 bildirimlerinizi Chromium sorun #927726 adresine gönderin.

Firefox için Puppeteer

Firefox için Puppeteer, Firefox'u Puppeteer API ile otomatikleştirmenizi sağlayan 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 komutu ç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 isterseniz Google I/O 2019'da Joel ve Andrey'in Puppeteer konuşmasını izleyin. Firefox duyurusu 4:05 civarında yapılıyor.

Ö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 sağlar, en yeni web platformu API'lerini test etmenize olanak tanır 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 diğer konuları tartışmak için aşağıdaki seçenekleri kullanın.

• Geri bildirimlerinizi ve özellik isteklerinizi crbug.com adresinden bize gönderebilirsiniz.
• Geliştirici Araçları'nda more_vert Diğer seçenekler > Yardım > Geliştirici Araçları ile ilgili sorun bildir'i kullanarak Geliştirici Araçları ile ilgili sorun bildirin.
• @ChromeDevTools hesabına tweet atın.
• Geliştirici Araçları'ndaki yenilikler YouTube videolarına veya Geliştirici Araçları İpuçları YouTube videolarına yorum bırakın.

Geliştirici Araçları'ndaki yenilikler

Geliştirici Araçları'ndaki yenilikler serisinde ele alınan her şeyin listesi.