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

Kayce Basques

Tekrar hoş geldiniz! Chrome 63'te Geliştirici Araçları'na eklenen yeni özelliklerden bazıları şunlardır:

Daha fazla bilgi edinmek için okumaya devam edin veya aşağıdaki videoyu izleyin.

Çok istemcili uzaktan hata ayıklama desteği

VS Code veya WebStorm gibi bir IDE'den bir uygulamada hata ayıklamayı denediyseniz DevTools'u açmanın hata ayıklama oturumunuzu bozduğunu fark etmişsinizdir. Bu sorun, WebDriver testlerinde hata ayıklama için Geliştirici Araçları'nın kullanılamamasına da neden oldu.

Chrome 63'ten itibaren DevTools, varsayılan olarak birden fazla uzak hata ayıklama istemcisini destekler. Bu işlem için yapılandırma gerekmez.

Çok istemcili uzak hata ayıklama, crbug.com'daki en popüler 1. Geliştirici Araçları sorunu ve Chromium projesinin tamamında 3. sırada yer alıyordu. Çok müşterili destek, diğer araçları DevTools ile entegre etmek veya bu araçları yeni şekillerde kullanmak için oldukça ilginç fırsatlar da sunar. Örneğin:

  • ChromeDriver veya VS Code ve Webstorm için Chrome hata ayıklama uzantıları gibi protokol istemcileri ve Puppeteer gibi WebSocket istemcileri artık DevTools ile aynı anda çalışabilir.
  • Artık Puppeteer veya chrome-remote-interface gibi iki ayrı WebSocket protokolü istemcisi aynı sekmeye aynı anda bağlanabilir.
  • chrome.debugger API'yi kullanan Chrome uzantıları artık DevTools ile aynı anda çalışabilir.
  • Artık birden fazla farklı Chrome uzantısı aynı sekmede chrome.debugger API'yi aynı anda kullanabilir.

Workspaces 2.0

Çalışma alanları, Geliştirici Araçları'nda bir süredir kullanılıyor. Bu özellik, Geliştirici Araçları'nı IDE'niz olarak kullanmanıza olanak tanır. Geliştirici Araçları'nda kaynak kodunuzda bazı değişiklikler yaparsınız ve değişiklikler, dosya sisteminizde projenizin yerel sürümünde kalır.

Workspaces 2.0, 1.0'dan yararlanarak daha yararlı bir kullanıcı deneyimi ve derlenmiş kodun otomatik olarak haritalanmasını iyileştirdi. Bu özelliğin ilk olarak 2016 Chrome Geliştirici Zirvesi'nden (CDS) kısa bir süre sonra kullanıma sunulması planlanıyordu ancak ekip bazı sorunları çözmek için bu planı erteledi.

Workspaces 2.0'ın nasıl çalıştığını görmek için CDS 2016'daki DevTools konuşmasının "Yazarlık" bölümüne (yaklaşık 14:28) göz atın.

Dört yeni denetim

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

  • Resimleri WebP olarak sunun.
  • Uygun en boy oranına sahip resimler kullanın.
  • Bilinen güvenlik açıklarına sahip kullanıcı arabirimi JavaScript kitaplıklarından kaçının.
  • Tarayıcı hataları Konsola kaydedilir.

Sayfalarınızın kalitesini artırmak için Denetim panelini nasıl kullanacağınızı öğrenmek üzere Lighthouse'u Chrome Geliştirici Araçları'nda çalıştırma başlıklı makaleyi inceleyin.

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

Özel veri içeren push bildirimlerini simüle etme

DevTools'ta push bildirimlerini simüle etme özelliği bir süredir mevcuttur. Ancak bu özellikte bir sınırlama vardır: Özel veri gönderemezsiniz. Ancak Chrome 63'te Hizmet Çalışanı bölmesine eklenen yeni Push metin kutusu sayesinde artık bunu yapabilirsiniz. Hemen deneyin:

  1. Basit Push Demo'ya 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. Hizmet Çalışanları bölmesine gidin.

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

    Özel veri içeren bir push bildirimini simüle etme.

    Şekil 1. Hizmet Çalışanı bölmesinde bulunan Anında metin kutusu aracılığıyla özel verilerle bir anında bildirim simülasyonu

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

    Simüle edilen push bildirimi

    Şekil 2. Simüle edilen push bildirimi

Arka plan senkronizasyonu etkinliklerini özel etiketlerle tetikleme

Arka plan senkronizasyonu etkinliklerini tetikleme özelliği Hizmet Çalışanları bölmesinde bir süredir mevcuttur ancak artık özel etiketler gönderebilirsiniz:

  1. Geliştirici Araçları'nı açın.
  2. Hizmet Çalışanları bölmesine gidin.
  3. Senkronizasyon metin kutusuna metin girin.
  4. Senkronize et'i tıklayın.

Özel arka plan senkronizasyonu etkinliği tetikleme

Şekil 3. Senkronize et'i tıkladıktan sonra DevTools, özel etiket update-content ile hizmet çalışanına arka plan senkronizasyonu etkinliği gönderir.

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni Geliştirilenler veya Beta sürümünü kullanabilirsiniz. Bu önizleme kanalları, en son DevTools özelliklerine erişmenize, en yeni web platformu API'lerini test etmenize 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 başka herhangi bir konu hakkında konuşmak için aşağıdaki seçenekleri kullanın.

Geliştirici Araçları'ndaki yenilikler

DevTools'daki yenilikler serisinde ele alınan tüm konuların listesi.