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:

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

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 korumanıza olanak tanır. Daha önce, DevTools'ta yaptığınız değişiklikler sayfayı yeniden yüklediğinizde kayboluyordu. Yerel geçersiz kılma, birkaç istisna dışında çoğu dosya türünde çalışır. Sınırlamalar bölümüne bakın.

Yerel geçersiz kılmalar ile CSS değişikliğini sayfa yüklemeleri arasında koruma

Şekil 1. Yerel geçersiz kılma ile CSS değişikliğini sayfa yüklemeleri arasında koruma

İş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, değiştirilmiş dosyayı sunar.

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

  1. Kaynaklar panelini açın.

  2. Üst Geçişler sekmesini açın.

    Geçersiz kılmalar sekmesi

    Şekil 2. Geçersiz kılmalar sekmesi

  3. Kurulum geçersiz kılma'yı tıklayın.

  4. Değişikliklerinizi kaydetmek istediğiniz dizini seçin.

  5. 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.

  6. Değişiklikleri yapın.

Sınırlamalar

  • DevTools, Öğ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 DevTools 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. DevTools'ta yaptığınız her 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

Yeni erişilebilirlik araçları

Bir öğenin erişilebilirlik özelliklerini incelemek için yeni Erişilebilirlik bölmesini kullanın ve az gören ya da 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.

Erişilebilirlik bölmesi

Seçili öğenin erişilebilirlik özelliklerini incelemek için Öğeler panelindeki Erişilebilirlik bölmesini kullanın.

Erişilebilirlik bölmesi

Şekil 4. Erişilebilirlik bölmesi, Öğeler panelindeki DOM Ağacı'nda seçili olan öğenin ARIA özelliklerini ve hesaplanmış özelliklerini, ayrıca erişilebilirlik ağacındaki konumunu gösterir.

Erişilebilirlik bölmesini çalışırken görmek için Rob Dodson'un etiketlemeyle ilgili 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ören veya renk körlüğü 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 başlıklı makaleyi inceleyin.

Metin öğelerinizin renk kontrastını iyileştirmek, sitenizi tüm kullanıcılar için daha kullanılabilir hale getirir. Başka bir deyişle, metniniz beyaz arka planlı gri renkteyse kimsenin okuması zor olur.

Vurgulanan H1 öğesinin kontrast oranı inceleniyor.

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

Şekil 5'te 4,61'in yanındaki iki onay işareti, bu öğenin gelişmiş önerilen kontrast oranını (AAA) karşıladığını gösterir. Yalnızca bir onay işareti varsa ö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 Daha Fazla Göster tıklayın. Renk spektrumu kutusunda yer alan beyaz çizgi, önerilen kontrast oranını karşılayan ve karşılamayan renkler arasındaki sınırı gösterir. Örneğin, Şekil 6'da gri renk önerilere uyduğundan beyaz çizginin altındaki tüm renkler de önerilere uyuyor demektir.

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

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

Denetlemeler panelinde, sayfadaki her metin öğesinin yeterli kontrast oranına sahip olmasını sağlayan 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, yepyeni bir SEO denetimi kategorisi ve birçok yeni performans denetimiyle birlikte kullanıma sunuldu.

Yeni SEO denetimleri

Sayfalarınızın yeni SEO kategorisindeki tüm denetlemelerden geçmesini sağlamak, arama motoru sıralamanızı iyileştirmeye yardımcı olabilir.

Yeni SEO denetleme kategorisi.

Şekil 7. Yeni SEO denetleme kategorisi

Yeni performans denetimleri

Chrome 65, birçok yeni performans denetimiyle de birlikte sunulur:

  • JavaScript'in açılış süresi uzun
  • Statik öğelerde verimsiz önbellek politikası kullanılıyor
  • Sayfa yönlendirmelerini önler
  • Doküman, eklenti kullanıyor
  • CSS'yi küçültün
  • JavaScript'i küçültün

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 istiyorsanız ancak nereden başlayacağınızı bilmiyorsanız Denetimler panelini deneyin. Bir URL girdiğinizde, bu sayfayı iyileştirebileceğiniz birçok farklı yöntemle ilgili ayrıntılı bir rapor alırsınız. Kullanmaya başlayın.

Diğer güncellemeler

İşçiler ve zaman uyumsuz kod ile güvenilir kod adımlama

Chrome 65, mesajları iş parçacıkları arasında aktaran kodlara ve asynkron koda adım atarken Adıma Gir Sonrakine Geç düğmesinde güncellemeler sunar. Önceki adımlama davranışını istiyorsanız bunun yerine yeni Adım Step düğmesini kullanabilirsiniz.

Mesaj dizileri arasında mesaj ileten koda geçme

Geliştirici Araçları, mesajları mesaj dizileri arasında aktaran koda adım attığınızda artık her mesaj dizisinde neler olduğunu gösterir.

Örneğin, Şekil 8'deki uygulama, ana iş parçacığı ile çalışan iş parçacığı arasında bir mesaj iletir. DevTools, ana iş parçacığındaki postMessage() çağrısına adım attıktan sonra, çalışan iş parçacığındaki onmessage işleyicisinde duraklar. onmessage işleyicisi, ana mesaj dizisine bir mesaj gönderir. Bu çağrıya adım atıldığında DevTools ana mesaj dizisinde duraklatılır.

Chrome 65'te mesaj iletme kodunu kullanma

Şekil 8. Chrome 65'te mesaj aktarma koduna adım atma

Chrome'un önceki sürümlerinde bu tür bir koda girdiğinizde Chrome, Şekil 9'da görebileceğiniz gibi size yalnızca kodun ana iş parçasını gösterirdi.

Chrome 63'te mesaj aktarma koduna adım atma.

Şekil 9. Chrome 63'te mesaj aktarma koduna girme

Eşzamansız koda adım atmak

DevTools, zaman uyumsuz koda adım atarken artık sonunda çalıştırılan zaman uyumsuz kodda duraklamak istediğinizi varsayıyor.

Örneğin, Şekil 10'da DevTools, setTimeout() işlevine adım attıktan sonra bu noktaya kadar gelen tüm kodu arka planda çalıştırır ve ardından setTimeout() işlevine iletilen işlevde duraklar.

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

Şekil 10. Chrome 65'te zaman uyumsuz koda adım atma

Chrome 63'te bu tür bir koda adım attığınızda, Şekil 11'de görebileceğiniz gibi, DevTools kodda kronolojik olarak çalıştırılırken duraklatılırdı.

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'e kadar kaydı geçici olarak kaydetmenize olanak tanır. Kayıtlar, DevTools pencerenizi kapattığınızda silinir. Performans panelini kullanmaya başlamak için Çalışma zamanı performansını analiz etmeye başlama başlıklı makaleyi inceleyin.

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ü kullanıma sunuldu. 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 genel olarak yararlı olan birçok otomasyon görevi için API'lere sahiptir:

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ıç bölümüne bakı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 başlıklı makaleyi inceleyin.

Ö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ş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 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.