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

Kayce Basques
Kayce Basques
X GitHub

Tekrar hoş geldiniz! Chrome 63'te Geliştirici Araçları'na eklenecek yeni özellikler:

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

Çok istemcili uzaktan hata ayıklama desteği

Daha önce 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ıklamak için Geliştirici Araçları'nın kullanılmasını da engelliyordu.

Chrome 63'ten itibaren DevTools, varsayılan olarak birden fazla uzaktan hata ayıklama istemcisini desteklemektedir. Yapılandırma gerekmez.

Çok istemcili uzaktan hata ayıklama, crbug.com'daki en popüler 1 numaralı Geliştirici Araçları sorunu ve tüm Chromium projesinde 3 numaralı sorundu. Çok istemcili destek, diğer araçları Geliştirici Araçları ile entegre etmek veya bu araçları yeni şekillerde kullanmak için de oldukça ilginç fırsatlar sunuyor. Ö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 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ğlanabilir.
  • chrome.debugger API'sini kullanan Chrome uzantıları artık Geliştirici Araçları ile aynı anda çalışabilir.
  • Artık birden fazla farklı Chrome uzantısı, aynı sekmede aynı anda chrome.debugger API'sini kullanabilir.

Çalışma Alanları 2.0

Çalışma alanları, Geliştirici Araçları'nda bir süredir kullanılmaktadır. Bu özellik, Geliştirici Araçları'nı IDE olarak kullanmanızı sağlar. Geliştirici Araçları'nda kaynak kodunuzda bazı değişiklikler yaptığınızda bu değişiklikler, dosya sisteminizdeki projenizin yerel sürümünde kalıcı olur.

Workspaces 2.0, 1.0'ın üzerine inşa edilmiştir. Daha faydalı bir kullanıcı deneyimi ve derlenmiş kodun otomatik olarak eşlenmesi gibi özellikler eklenmiştir. Bu özelliğin ilk olarak Chrome Developer Summit (CDS) 2016'dan kısa bir süre sonra kullanıma sunulması planlanıyordu ancak ekip, bazı sorunları çözmek için bu özelliği erteledi.

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

Dört yeni denetim

Chrome 63'teki Denetimler panelinde 4 yeni denetim var:

  • 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ından kaçının.
  • Tarayıcı hataları konsola kaydedildi.

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

Denetimler paneline güç veren proje hakkında daha fazla bilgi edinmek için Lighthouse'u inceleyin.

Özel verilerle push bildirimlerini simüle etme

Push bildirimlerini simüle etme özelliği, DevTools'ta bir süredir kullanılabiliyor ancak bir sınırlaması vardı: Özel veriler gönderemiyordunuz. Ancak Chrome 63'te Service Worker bölmesine eklenen yeni Push metin kutusu sayesinde artık bunu yapabilirsiniz. Hemen deneyin:

  1. Simple Push Demo'ya (Basit Push Demosu) 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 (Servis Çalışanları) paneline gidin.

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

    Özel verilerle push bildirimi simülasyonu yapma.

    Şekil 1. Service Worker bölmesindeki Push metin kutusunu kullanarak özel verilerle anında bildirim simülasyonu yapma

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

    Simüle edilmiş push bildirimi

    Şekil 2. Simüle edilmiş push bildirimi

Özel etiketlerle arka plan senkronizasyonu etkinliklerini tetikleme

Arka plan senkronizasyonu etkinliklerini tetikleme özelliği bir süredir Service Workers (Servis Çalışanları) panelinde yer alıyordu. Ancak artık özel etiketler gönderebilirsiniz:

  1. Geliştirici Araçları'nı açın.
  2. Service Workers (Servis Çalışanları) paneline gidin.
  3. Senkronize et metin kutusuna metin girin.
  4. Senkronize et'i tıklayın.

Özel bir arka plan senkronizasyonu etkinliğini tetikleme

Şekil 3. Senkronize et'i tıkladıktan sonra Geliştirici Araçları, özel etiketle birlikte bir arka plan senkronizasyon etkinliği gönderir update-content hizmet çalışanına

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Dev veya Beta'yı kullanmayı düşünebilirsiniz. Bu önizleme kanalları, en yeni DevTools özelliklerine erişmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır ve kullanıcılarınızdan önce sitenizdeki sorunları 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.

Geliştirici Araçları'ndaki yenilikler

DevTools'taki Yenilikler serisinde ele alınan her şeyin listesi.