Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

Kayce Basques

Chrome 65 sürümünde Geliştirici Araçları'na eklenecek yeni özellikler şunlardır:

Yerel Geçersiz Kılmalar
Yeni erişilebilirlik araçları
Değişiklikler sekmesi
Yeni SEO ve performans denetimleri
Performans panelinde birden fazla kayıt
Çalışanlar ve eşzamansız kodla güvenilir kod adımlama

Aşağıdaki sürüm notlarını okuyun veya video sürümünü izleyin.

Not: Chrome'un hangi sürümünü kullandığınızı chrome://version adresinden kontrol edin. Önceki bir sürümü kullanıyorsanız bu özellikler mevcut olmayacaktır. Daha yeni bir sürümü kullanıyorsanız bu özellikler değişmiş olabilir. Chrome, yaklaşık 6 haftada bir yeni ana sürüme otomatik olarak güncellenir.

Yerel Geçersiz Kılmalar

Yerel geçersiz kılmalar, Geliştirici Araçları'nda değişiklik yapmanıza ve bu değişiklikleri sayfa yüklemelerinde tutmanıza olanak tanır. Daha önce, Geliştirici Araçları'nda yaptığınız değişiklikler sayfayı yeniden yüklediğinizde kayboluyordu. Yerel geçersiz kılmalar, birkaç istisna dışında çoğu dosya türü için işe yarar. Sınırlamalar başlıklı makaleyi inceleyin.

Yerel Geçersiz Kılmalar ile sayfa yüklemelerinde bir CSS değişikliğinin sürdürülmesi.

Şekil 1. Yerel Geçersiz Kılmalar ile sayfa yüklemelerinde bir CSS değişikliğinin sürdürülmesi

İşleyiş şekli:

Geliştirici Araçları'nın değişiklikleri kaydetmesi gereken bir dizin belirtirsiniz.
Geliştirici Araçları'nda değişiklik yaptığınızda, Geliştirici Araçları, değiştirilen dosyanın bir kopyasını dizininize kaydeder.
Sayfayı yeniden yüklediğinizde Geliştirici Araçları, ağ kaynağını yerine yerel ve değiştirilmiş dosyayı sunar.

Yerel Geçersiz Kılmaları ayarlamak için:

Kaynaklar panelini açın.
Geçersiz kılmalar sekmesini açın.

2. Şekil. Geçersiz kılmalar sekmesi
Kurulum Geçersiz Kılmaları'nı tıklayın.
Değişikliklerinizi kaydetmek istediğiniz dizini seçin.
Geliştirici Araçları'na, dizine okuma ve yazma erişimi vermek için görüntü alanınızın üst kısmındaki İzin ver'i tıklayın.
Değişiklikleri yapın.

Sınırlamalar

Geliştirici Araçları, Öğeler panelinin DOM Ağacında yapılan değişiklikleri kaydetmez. Bunun yerine HTML'yi Kaynaklar panelinde düzenleyin.
Stiller bölmesinde CSS'yi düzenlerseniz ve bu CSS'nin kaynağı bir HTML dosyasıysa Geliştirici Araçları değişikliği kaydetmez. Bunun yerine Kaynaklar panelinde HTML dosyasını düzenleyin.

Çalışma alanları. Geliştirici Araçları, ağ kaynaklarını otomatik olarak yerel depoyla eşler. Geliştirici Araçları'nda her değişiklik yaptığınızda bu değişiklik yerel deponuza da kaydedilir.

Değişiklikler sekmesi

Geliştirici Araçları'nda yerel olarak yaptığınız değişiklikleri yeni Değişiklikler sekmesinden takip edin.

Değişiklikler sekmesi

3. Şekil. Değişiklikler sekmesi

Bir öğenin erişilebilirlik özelliklerini incelemek için yeni Erişilebilirlik bölmesini kullanın. Görme bozuklukları olan veya renk körlüğü olan kullanıcılar tarafından erişildiğinden emin olmak için Renk Seçici'deki metin öğelerinin kontrast oranını inceleyin.

Şu anda seçili olan öğenin erişilebilirlik özelliklerini incelemek için Öğeler panelindeki Erişilebilirlik bölmesini kullanın.

Erişilebilirlik bölmesi

4. Şekil. Erişilebilirlik bölmesinde, Öğeler panelindeki DOM Ağacı'nda seçili olarak seçili olan öğenin ARIA özellikleri ve hesaplanan özellikleri ile erişilebilirlik ağacındaki konumu gösterilir

Erişilebilirlik bölmesinin nasıl çalıştığını görmek için Rob Dodson'ın etiketleme hakkındaki A11ycast'ine göz atın.

Renk Seçici'deki kontrast oranı

Renk Seçici artık metin öğelerinin kontrast oranını gösteriyor. Metin öğelerinin kontrast oranını artırmak, sitenizi az görme veya renk görme bozuklukları olan kullanıcılar için daha erişilebilir hale getirir. Kontrast oranının erişilebilirliği nasıl etkilediği hakkında daha fazla bilgi edinmek için Renk ve kontrast bölümüne bakın.

Metin öğelerinizin renk kontrastını iyileştirmek, sitenizin tüm kullanıcılar için daha kullanışlı olmasını sağlar. Başka bir deyişle, metninizin arka planı beyazsa metni herkes okumakta zorlanır.

Vurgulanan H1 öğesinin kontrast oranı inceleniyor.

5. Şekil. Vurgulanan h1 öğesinin kontrast oranı inceleniyor

Şekil 5'te 4,61'in yanındaki iki onay işareti, bu öğenin geliştirilmiş önerilen kontrast oranını (AAA) karşıladığı anlamına gelir. Tek bir onay işareti olması, önerilen minimum kontrast oranını (AA) karşıladığı anlamına gelir.

Kontrast Oranı bölümünü genişletmek için Daha fazla göster'i tıklayın. Renk Spektrumu kutusundaki beyaz çizgi, önerilen kontrast oranını karşılayan ve karşılamayan renkler arasındaki sınırı temsil eder. Örneğin, Şekil 6'daki gri renk önerileri karşıladığı için beyaz çizginin altındaki tüm renkler de önerileri karşılar.

Genişletilmiş Kontrast Oranı bölümü.

6. Şekil. Genişletilmiş Kontrast Oranı bölümü

Denetimler panelinde, bir sayfadaki her metin öğesinin yeterli kontrast oranına sahip olduğundan emin olmak için otomatik bir erişilebilirlik denetimi bulunur.

Erişilebilirliği test etmek üzere Denetimler panelinin nasıl kullanılacağını öğrenmek için Chrome Geliştirici Araçları'nda Lighthouse'u çalıştırma konusuna bakın veya aşağıdaki A11ycast'i izleyin.

Yeni denetimler

Chrome 65'te tamamen yeni bir SEO denetimi kategorisi ve birçok yeni performans denetimi bulunmaktadır.

Yeni SEO denetimleri

Sayfalarınızın yeni SEO kategorisindeki denetimlerin her birini geçmesini sağlamak, arama motoru sıralamalarınızı iyileştirmeye yardımcı olabilir.

Yeni SEO denetimi kategorisi.

7. Şekil. Yeni SEO denetleme kategorisi

Yeni performans denetimleri

Chrome 65, pek çok yeni performans denetimi de içerir:

JavaScript başlatma süresi uzun
Statik öğelerde verimsiz önbellek politikası kullanıyor
Sayfa yönlendirmelerinden kaçınır
Doküman, eklenti kullanıyor
CSS'yi küçültün
JavaScript'i küçült

Performans önemlidir. Mynet, sayfa yükleme hızını 4 kat artırdıktan sonra kullanıcılar sitede% 43 daha fazla zaman geçirerek% 34 daha fazla sayfa görüntüledi, hemen çıkma oranları %24 azaldı ve makale sayfa görüntüleme başına gelir% 25 arttı. Daha fazla bilgi edinin.

İpucu: Sayfalarınızın yükleme performansını iyileştirmek istiyor ancak nereden başlayacağınızı bilmiyorsanız Denetimler panelini deneyin. Bu sayfaya bir URL verir ve söz konusu sayfayı iyileştirmenin pek çok farklı yolu hakkında ayrıntılı bir rapor sunar. Kullanmaya başlayın.

Diğer güncellemeler

Yeni, manuel erişilebilirlik denetimleri
Diğer yeni nesil resim biçimlerini daha kapsamlı hale getirmek için WebP denetiminde yapılan güncellemeler
Erişilebilirlik puanının yeniden düzenlenmesi
Bir sayfa için erişilebilirlik denetimi geçerli değilse bu denetim artık erişilebilirlik puanına dahil edilmez
Performans artık raporların en üst kısmında yer alıyor

Çalışanlar ve eşzamansız kodla güvenilir kod adımlama

Chrome 65, mesajları ileti dizileri ve eşzamansız kod arasında geçiren koda geçiş yaparken Adım Adım düğmesine güncellemeler getirir. Önceki adım davranışını istiyorsanız bunun yerine yeni Adım düğmesini kullanabilirsiniz.

Mesaj dizileri arasında mesaj ileten koda geçme

İleti dizileri arasında mesaj ileten bir kod girdiğinizde, Geliştirici Araçları artık her ileti dizisinde neler olduğunu size gösterir.

Örneğin, Şekil 8'deki uygulama, ana iş parçacığı ile çalışan iş parçacığı arasında bir mesaj iletir. Ana iş parçacığında postMessage() çağrısına girdikten sonra Geliştirici Araçları, çalışan iş parçacığındaki onmessage işleyicide duraklar. onmessage işleyicisinin kendisi ana iş parçacığına bir mesaj gönderir. Bu çağrıya girdiğinizde Geliştirici Araçları, ana ileti dizisinde tekrar duraklatılır.

Chrome 65'te mesaj iletme kodunu kullanma

8. Şekil. Chrome 65'te mesaj iletme kodunu kullanma

Chrome'un önceki sürümlerinde bu şekilde bir kod girdiğinizde, Şekil 9'da görebileceğiniz gibi Chrome size kodun yalnızca ana iş parçacığı tarafını gösterir.

Chrome 63'te mesaj iletme kodunu kullanma

9. Şekil. Chrome 63'te mesaj iletme kodunu kullanma

Eşzamansız koda geçme

Geliştirici Araçları, eşzamansız koda geçerken artık en sonunda çalışan eşzamansız kodda duraklamak istediğinizi varsaymaktadır.

Örneğin, Şekil 10'da Geliştirici Araçları, setTimeout() aracına girildikten sonra arka planda bu noktaya kadarki tüm kodu çalıştırır ve ardından setTimeout() öğesine aktarılan işlevde duraklar.

Chrome 65'te eşzamansız koda geçme.

10. Şekil. Chrome 65'te eşzamansız koda geçme

Chrome 63'te böyle bir kod kullandığınızda Geliştirici Araçları, kronolojik olarak çalıştığı için kodda durakladı. Şekil 11'de görebilirsiniz.

Chrome 63'te eşzamansız koda geçme.

Şekil 11. Chrome 63'te eşzamansız koda geçme

Performans panelinde birden fazla kayıt

Performans paneli artık 5 adede kadar kaydı geçici olarak saklamanıza olanak tanıyor. Geliştirici Araçları pencerenizi kapattığınızda kayıtlar silinir. Performans panelini rahatça kullanmak için Çalışma Zamanı Performansını Analiz Etmeye Başlama bölümüne bakın.

Performans panelinde birden fazla kayıt arasından seçim yapma.

Şekil 12. Performans panelinde birden fazla kayıt arasından seçim yapma

Bonus: Puppeteer 1.0 ile Geliştirici Araçları işlemlerini otomatikleştirin

Chrome Geliştirici Araçları ekibi tarafından yönetilen bir tarayıcı otomasyon aracı olan Puppeteer'ın 1.0 sürümü çıktı. Puppeteer'ı kullanarak daha önce yalnızca Geliştirici Araçları üzerinden kullanılabilen birçok görevi (ör. ekran görüntüsü alma) otomatikleştirebilirsiniz:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});
  await browser.close();
})();

Ayrıca, PDF oluşturma gibi genellikle yararlı birçok otomasyon görevi için API'leri vardır:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'hn.pdf', format: 'A4'});
  await browser.close();
})();

Daha fazla bilgi edinmek için Hızlı Başlangıç sayfasına göz atın.

Ayrıca, Geliştirici Araçları'nı hiç açmadan göz atarken Geliştirici Araçları özelliklerini göstermek için Puppeteer'ı da kullanabilirsiniz. Örnek için Geliştirici Araçları'nı Açmadan Geliştirici Araçları Özelliklerini Kullanma bölümüne bakın.

Ö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ı'ndaki Diğer seçenekler > Yardım > Geliştirici Araçları ile ilgili sorun bildir bölümüne giderek Geliştirici Araçları sorunlarını bildirin.
@ChromeDevTools adresinden tweet atabilirsiniz.
Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.