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

Kayce Basques
Kayce Basques
X GitHub

Chrome 65'te DevTools'a eklenecek yeni özellikler:

Aşağıdaki sürüm notlarını okuyabilir veya video sürümünü izleyebilirsiniz.

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üklemeleri arasında korumanıza olanak tanır. Daha önce, sayfayı yeniden yüklediğinizde Geliştirici Araçları'nda yaptığınız tüm değişiklikler kayboluyordu. Yerel geçersiz kılmalar, birkaç istisna dışında çoğu dosya türünde çalışır. Sınırlamalar başlıklı makaleye bakın.

Yerel geçersiz kılmalarla CSS değişikliğini sayfa yüklemeleri arasında kalıcı hale getirme.

Şekil 1. Yerel geçersiz kılmalar ile CSS değişikliğini sayfa yüklemeleri arasında kalıcı hale getirme

İşleyiş şekli:

  • Geliştirici Araçları'nın değişiklikleri kaydedeceği 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 ve değiştirilmiş dosyayı sunar.

Yerel geçersiz kılmaları ayarlamak için:

  1. Kaynaklar panelini açın.

  2. Geçersiz kılmalar sekmesini açın.

    Geçersiz kılmalar sekmesi

    Şekil 2. Geçersiz kılmalar sekmesi

  3. Kurulumu Geçersiz Kılmalar'ı tıklayın.

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

  5. Görüntü alanınızın üst kısmında, Geliştirici Araçları'na dizine okuma ve yazma erişimi vermek için İ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. 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. HTML dosyasını bunun yerine Kaynaklar panelinde düzenleyin.
  • Çalışma alanları. Geliştirici Araçları, ağ kaynaklarını otomatik olarak yerel bir 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 sekmesi üzerinden takip edin.

Değişiklikler sekmesi

Ş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. Ayrıca, az gören 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

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

Erişilebilirlik bölmesi

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

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

Renk seçicideki kontrast oranı

Renk Seçici artık metin öğelerinin kontrast oranını gösteriyor. Metin öğelerinin kontrast oranını artırmak, sitenizi görme bozukluğu 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 hâle getirir. Diğer bir deyişle, metniniz beyaz arka plan üzerinde gri renkteyse bu metni okumak herkes için zordur.

Vurgulanan H1 öğesinin kontrast oranını inceleme.

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

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

Kontrast Oranı bölümünü genişletmek için Daha Fazla Göster'i Daha Fazla Göster tıklayın. Renk Spektrumu kutusundaki beyaz çizgi, önerilen kontrast oranını karşılayan ve karşılamayan renkler arasındaki sınırı gösterir. Örneğin, Şekil 6'daki gri renk önerilere uygun olduğundan beyaz çizginin altındaki tüm renkler de önerilere uygundur.

Genişletilmiş kontrast oranı bölümü.

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

Denetimler panelinde, bir sayfadaki her metin öğesinin yeterli kontrast oranına sahip olmasını sağlamak için otomatik bir erişilebilirlik denetimi bulunur.

Erişilebilirliği test etmek 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ı makaleye göz atın veya aşağıdaki A11ycast'i izleyin.

Yeni denetimler

Chrome 65, yepyeni bir SEO denetimleri kategorisi ve birçok yeni performans denetimiyle birlikte geliyor.

Yeni SEO denetimleri

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

Yeni SEO denetleme kategorisi.

Şekil 7 Yeni SEO denetleme kategorisi

Yeni performans denetimleri

Chrome 65'te birçok yeni performans denetimi de yer alıyor:

  • JavaScript başlatma süresi yüksek
  • Statik öğelerde verimsiz önbellek politikası kullanılıyor
  • Sayfa yönlendirmelerinden kaçınıyor
  • 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 sayfa görüntüleme başına gelir% 25 arttı. Daha fazla bilgi edinin.

İpucu! Sayfalarınızın yükleme performansını artırmak istiyor ancak nereden başlayacağınızı bilmiyorsanız Denetimler panelini deneyin. Bu araca bir URL verirsiniz ve o da size bu sayfayı iyileştirebileceğiniz birçok farklı yöntem hakkında ayrıntılı bir rapor sunar. Kullanmaya başlayın.

Diğer güncellemeler

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

Chrome 65, iş parçacıkları arasında mesaj ileten kod ve eşzamansız koda girerken Step Into Step Into düğmesinde güncellemeler sunar. Önceki adım adım ilerleme davranışını istiyorsanız bunun yerine yeni Adım Step düğmesini kullanabilirsiniz.

İletileri iş parçacıkları arasında ileten koda adım atma

İş parçacıkları arasında mesaj ileten koda girdiğinizde, DevTools artık her iş parçacığında ne olduğunu gösteriyor.

Örneğin, Şekil 8'deki uygulama, ana iş parçacığı ile çalışan iş parçacığı arasında mesaj iletir. Ana iş parçacığında postMessage() işlevine girildikten sonra DevTools, çalışan iş parçacığındaki onmessage işleyicisinde duraklatılır. onmessage işleyicisi, ana iş parçacığına geri bir ileti gönderir. Bu görüşmeye geçiş yaptığınızda ana iş parçacığında DevTools duraklatılır.

Chrome 65'te ileti geçirme koduna adım atma.

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

Chrome'un önceki sürümlerinde bu tür bir koda adım attığınızda Chrome yalnızca kodun ana iş parçacığı tarafını gösteriyordu. Bunu Şekil 9'da görebilirsiniz.

Chrome 63'te ileti geçirme koduna adım adım girme.

Şekil 9. Chrome 63'te ileti geçirme koduna adım adım girme

Zaman uyumsuz koda adım atma

DevTools, artık zaman uyumsuz koda adım atarken sonunda çalışacak zaman uyumsuz kodda duraklatmak istediğinizi varsayıyor.

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

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

Şekil 10. Chrome 65'te eşzamansız koda adım atma

Chrome 63'te bu tür bir koda girdiğinizde, Şekil 11'de görebileceğiniz gibi, Geliştirici Araçları, kod kronolojik olarak çalışırken kodu duraklatıyordu.

Chrome 63'te eşzamansız koda adım atma.

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

Performans panelinde birden fazla kayıt

Performans paneli artık 5 kaydı geçici olarak kaydetmenize olanak tanıyor. Kayıtlar, Geliştirici Araçları pencerenizi kapattığınızda silinir. Performans paneli hakkında bilgi edinmek için Çalışma Zamanı Performansını Analiz Etmeye Başlama başlıklı makaleyi inceleyin.

Performans panelinde birden fazla kayıt arasında 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ştirme

Chrome Geliştirici Araçları Ekibi tarafından desteklenen bir tarayıcı otomasyon aracı olan Puppeteer'ın 1.0 sürümü yayınlandı. Daha önce yalnızca Geliştirici Araçları ü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 faydalı 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ıç bölümüne bakın.

Geliştirici Araçları'nı açıkça açmadan göz atarken Geliştirici Araçları özelliklerini kullanmak 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, 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

Geliştirici Araçları'ndaki yenilikler serisinde ele alınan her şeyin listesi.