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

Kayce Basques

Chrome 65'te DevTools'a eklenen yeni özelliklerden bazıları ş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
• İşçiler ve eşzamansız kodla güvenilir kod adımlama

Devamını okuyun veya aşağıdaki sürüm notlarının 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.

Ş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, değiştirilen dosyanın bir kopyası dizininize kaydedilir.
• Sayfayı yeniden yüklediğinizde Geliştirici Araçları, ağ kaynağı 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.

   

   Ş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. DevTools'a dizin için okuma ve yazma erişimi vermek üzere görüntü alanını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.

İlgili özellikler

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

Değişiklikler sekmesi

Yeni Değişiklikler sekmesi aracılığıyla DevTools'da yerel olarak yaptığınız değişiklikleri izleyin.

Şekil 3. 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 görme engeli veya renk körlüğü olan kullanıcıların erişebildiğ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.

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

Erişilebilirlik bölmesinin işleyiş şeklini görmek için Rob Dodson'un etiketlemeyle ilgili A11ycast videosuna göz atın.

Renk seçicideki kontrast oranı

Renk Seçici artık metin öğelerinin kontrast oranını gösterir. 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, metninizin arka planı beyaz ve metin griyse bu metni okumak zordur.

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

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

İlgili özellikler

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 için Denetim panelini nasıl kullanacağınızı öğrenmek üzere Chrome Geliştirme Araçları'nda Lighthouse'u çalıştırma başlıklı makaleyi inceleyin veya aşağıdaki A11ycast'i izleyin.

Yeni denetimler

Chrome 65, yepyeni bir SEO denetimi kategorisi ve birçok yeni performans denetimiyle birlikte sunulur.

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.

Ş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çirdi, %34 daha fazla sayfa görüntüledi, hemen çıkma oranları %24 düştü ve makale sayfası 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 Denetlemeler 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

• Yeni, manuel erişilebilirlik denetimleri
• Diğer yeni nesil resim biçimlerini daha kapsayıcı hale getirmek için WebP denetiminde yapılan güncellemeler
• Erişilebilirlik puanında yeniden yapılanma
• Bir sayfa için erişilebilirlik denetimi geçerli değilse bu denetim artık erişilebilirlik puanı için hesaba katılmaz.
• Performans, artık raporlardaki en üst bölüm

İşç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 düğmesinde güncellemeler sunar. Önceki adımlama davranışını istiyorsanız bunun yerine yeni Adım düğmesini kullanabilirsiniz.

İleti dizileri arasında ileti aktaran koda adım atma

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.

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

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

Zaman uyumsuz 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.

Ş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ı.

Şekil 11. Chrome 63'te zaman uyumsuz koda adım atma

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.

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

Bonus: Puppeteer 1.0 ile DevTools işlemlerini otomatikleştirme

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. Daha önce yalnızca DevTools üzerinden kullanılabilen birçok görevi (ör. ekran görüntüsü alma) otomatikleştirmek için Puppeteer'ı kullanabilirsiniz:

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, DevTools'u hiç açmadan tarama yaparken DevTools ö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ş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.

• crbug.com adresinden bize geri bildirim ve özellik isteği gönderin.
• Geliştirici Araçları'nda more_vert Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak bir Geliştirici Araçları sorununu bildirin.
• @ChromeDevTools hesabına tweet gönderin.
• Geliştirici Araçları'ndaki yenilikler veya Geliştirici Araçları'yla ilgili ipuçları konulu YouTube videolarına yorum bırakın.

Geliştirici Araçları'ndaki yenilikler

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