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

Kayce Basques

Tekrar hoş geldiniz! Chrome 63 sürümünde Geliştirici Araçları'na eklenecek yeni özellikler şunlardır:

Daha fazla bilgi edinmek için aşağıdaki videoyu okuyun veya izleyin!

Çok istemcili uzaktan hata ayıklama desteği

VS Code veya WebStorm gibi bir IDE'den bir uygulamada hata ayıklamayı denediyseniz muhtemelen Geliştirici Araçları'nı açmanın hata ayıklama oturumunuzu bozduğunu fark ettiniz. Bu sorun proje yöneticisinin WebDriver testlerinde hata ayıklamak için Geliştirici Araçları'nı kullanın.

Geliştirici Araçları, Chrome 63'ten itibaren artık varsayılan olarak birden fazla uzaktan hata ayıklama istemcisini desteklemektedir. yapılandırma gerekiyor.

Çok istemcili uzaktan hata ayıklama, crbug.com'un en popüler 1 numaralı Geliştirici Araçları sorunudur ve 3 numara. Çok müşterili destek de Google Geliştirici Araçları ile diğer araçları entegre etmek veya bu araçları yeni yolları. Örneğin:

  • ChromeDriver veya VS Code ve WebMovie için Chrome hata ayıklama uzantıları gibi protokol istemcileri, ve Puppeteer gibi WebSocket istemcileri artık Geliştirici Araçları ile aynı anda çalışabilir.
  • Puppeteer veya chrome-remote-interface gibi iki ayrı WebSocket protokol istemcisi artık aynı sekmeye eş zamanlı olarak bağlanabiliyor.
  • chrome.debugger API kullanan Chrome uzantıları, artık Geliştirici Araçları ile aynı anda çalışabilir.
  • Aynı sekmede artık chrome.debugger API'yi birden fazla farklı Chrome Uzantısı kullanılabilir olanak tanır.

Çalışma Alanları 2.0

Geliştirici Araçları'nda çalışma alanları bir süredir kullanılıyor. Bu özellik, Geliştirici Araçları'nı geliştirmenizi sağlar. Geliştirici Araçları'nda kaynak kodunuzda bazı değişiklikler yapıyorsunuz. yerel sürümünü kullanabilirsiniz.

1.0 temel alınarak geliştirilen Workspaces 2.0, daha faydalı bir kullanıcı deneyimi sunar ve aktarılan verilerin otomatik olarak işlenmesini iyileştirir. girin. Bu özellik ilk olarak Chrome Geliştirici Zirvesi'nden kısa bir süre sonra yayınlanacak şekilde planlanmıştı (CDS) 2016'da yayınlamıştık. Ancak ekip, bazı sorunları çözmek için bu tarihi erteledi.

"Yazma" bölümüne göz atın Çalışma Alanları (CDS) 2016'daki Geliştirici Araçları konuşmasının bir bölümü (yaklaşık 14:28) 2.0 iş başında.

Dört yeni denetim

Chrome 63'te Denetimler panelinde 4 yeni denetim vardır:

  • Resimleri WebP olarak sunun.
  • Uygun en boy oranlarına sahip resimler kullanın.
  • Bilinen güvenlik açıklarına sahip ön uç JavaScript kitaplıklarını kullanmaktan kaçının.
  • Tarayıcı hataları Console'a kaydedildi.

Denetimler panelinin nasıl kullanılacağını öğrenmek için Chrome Geliştirici Araçları'nda Lighthouse'u çalıştırma başlıklı makaleye bakın. sayfaların kalitesini artırır.

Denetimler panelini destekleyen proje hakkında daha fazla bilgi edinmek için Lighthouse'a bakın.

Push bildirimlerini özel verilerle simüle edin

Geliştirici Araçları'nda push bildirimleri simüle etme özelliği bir süredir kullanılıyor. Tek bir kısıtlama var: özel veri gönderilemedi. Ancak yeni Push metin kutusu Hizmet Çalışanı bölmesine geliyor. ekleyebilirsiniz. Hemen deneyin:

  1. Basit Push Demosu'na gidin.
  2. Push Bildirimlerini Etkinleştir'i tıklayın.
  3. Chrome, bildirimlere izin vermenizi istediğinde İzin ver'i tıklayın.
  4. Geliştirici Araçları'nı açın.
  5. Service Workers (Hizmet Çalışanları) bölmesine gidin.

  6. Push metin kutusuna bir şey yazın.

    Özel verilerle push bildirimlerini simüle etme.

    Şekil 1. Push metin kutusu aracılığıyla özel verilerle bir push bildiriminin simülasyonunu Service Worker bölmesi

  7. Bildirimi göndermek için Push'u tıklayın.

    Simüle edilen push bildirimi

    2. Şekil. Simüle edilen push bildirimi

Arka plan senkronizasyonu etkinliklerini özel etiketlerle tetikleme

Arka planda senkronizasyon etkinliklerinin tetiklenmesi bir süredir Hizmet Çalışanları bölmesinde de bulunuyordu. artık özel etiketler gönderebilirsiniz:

  1. Geliştirici Araçları'nı açın.
  2. Service Workers (Hizmet Çalışanları) bölmesine gidin.
  3. Senkronizasyon metin kutusuna bir metin girin.
  4. Senkronizasyon'u tıklayın.

Özel bir arka plan senkronizasyonu etkinliğini tetikleme

3. Şekil. Geliştirici Araçları, Senkronizasyon'u tıkladıktan sonra özel etiketle bir arka plan senkronizasyon etkinliği gönderir Hizmet çalışanı için update-content

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