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 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ğ yerine yerel, değiştirilmiş dosyayı yayınlar gösterir.

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

    2. Şekil. Geçersiz kılmalar sekmesi

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

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

  5. Geliştirici Araçları'na, görüntü alanınızın üst kısmındaki İzin ver'i tıklayarak dizin.

  6. Değişiklikleri yapın.

Sınırlamalar

  • Geliştirici Araçları, Öğeler panelinin DOM Ağacında yapılan değişiklikleri kaydetmez. HTML’yi Kaynaklar panelini açın.
  • Stiller bölmesinde CSS'yi düzenlerseniz ve bu CSS'nin kaynağı bir HTML dosyasıysa Geliştirici Araçları ve değişikliği kaydedin. 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. İstediğiniz zaman Geliştirici Araçları'nda bir değişiklik yaparsanız 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

Yeni erişilebilirlik araçları

Bir öğenin erişilebilirlik özelliklerini incelemek için yeni Erişilebilirlik bölmesini kullanın ve Renk Seçici'deki metin öğelerinin kontrast oranını inceleyerek öğelerin ve renk körlüğü olan kullanıcılar için erişilebilir.

Erişilebilirlik bölmesi

Erişilebilirlik özelliklerini incelemek için Öğeler panelindeki Erişilebilirlik bölmesini kullanın. öğesine dokunun.

Erişilebilirlik bölmesi

4. Şekil. Erişilebilirlik bölmesinde öğesinin yanı sıra Öğeler panelindeki DOM Ağacı'nda seçili durumda olan öğe erişilebilirlik ağacındaki konumu

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. Kontrastı artırma Metin öğelerinin oranı, sitenizin az görme engeli olan veya bozuklukları söz konusu. Kontrast oranı hakkında daha fazla bilgi edinmek için Renk ve kontrast bölümüne bakın erişilebilirliği etkiler.

Metin öğelerinizin renk kontrastını iyileştirmek, sitenizin tüm kullanıcılar için daha kullanışlı olmasını sağlar. İçinde Diğer 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ı (AAA) Tek bir onay işareti varsa bu, önerilen minimum kontrast oranı (AA)

Kontrast'ı genişletmek için Daha fazla göster Daha Fazla Göster simgesini tıklayın. Oran bölümünü seçin. Renk Spektrumu kutusundaki beyaz çizgi, renkler arasındaki sınırı temsil eder önerilen kontrast oranını karşılayan ve karşılamayanlar arasında geçiş yapıyor. Örneğin, menüdeki gri renk Şekil 6, önerileri karşılar. Bu, beyaz çizginin altındaki tüm renklerin de uygun olduğu anlamına gelir öneriler.

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

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

Denetimler panelinde, web sitesindeki her metin öğesinin otomatik olarak Bir sayfanın yeterli kontrast oranına sahip olması gerekir.

Chrome Geliştirici Araçları'nda Lighthouse'u çalıştırma konusuna bakın veya aşağıdaki A11ycast'i izleyin. Erişilebilirliği test etmek için denetlemeler panelini kullanın.

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 başarıyla tamamladığından emin olmak, sıralamasını artırabilirsiniz.

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ün

Performans önemlidir. Mynet'in sayfa yükleme hızını 4 kat artırmasının ardından, kullanıcılar makale başına% 34 daha fazla sayfa görüntülendi, hemen çıkma oranları %24 azaldı ve gelir% 25 arttı Sayfa görüntüleme sayısı. Daha fazla bilgi edinin.

İpucu: Sayfalarınızın yükleme performansını artırmak istiyorsanız, ancak nereden başlayacağınızı bilmiyorsanız, Denetimler panelini deneyin. Bir URL veriyor ve birçok farklı konu hakkında nasıl iyileştirebileceğinizi göstereceğim. Kullanmaya başlayın.

Diğer güncellemeler

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

Chrome 65, Adım Adım giriş yaparken Adım Atın düğmesi ileti dizileri arasında mesaj ileten bir kod ve eşzamansız kod. Önceki adımın uygulanmasını istiyorsanız yeni Adım Step'nı kullanabilirsiniz 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.

Ö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ı, onmessage işleyicisi yer alır. onmessage işleyicisinin kendisi ana ekrana bir mesaj gönderir ileti dizisi. Bu çağrıya girdiğinizde Geliştirici Araçları, ana iş parçacığında 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 buna benzer bir kod kullandığınızda, Chrome size Şekil 9'da görebileceğiniz gibi, kodu ana iş parçacığı tarafına yerleştirin.

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çiş yaptığınızda artık eşzamansız kodlardan oluşur.

Örneğin, Şekil 10'da setTimeout() içine girildikten sonra Geliştirici Araçları tüm kodu çalıştırır. sahne arkasında bu noktaya kadar gider ve setTimeout().

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ı, kodu kronolojik olarak duraklatıyordu Şekil 11'de görebileceğiniz gibi çalıştırılmıştır.

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. Kayıtlar Geliştirici Araçları pencerenizi kapattığınızda silinir. Bkz. Çalışma Zamanını Analiz Etmeye Başlama Performans panelini kullanmaya başlayabilmeniz için Performans'ı seçin.

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 sağlanan bir tarayıcı otomasyon aracı olan Puppeteer'ın 1.0 sürümü çıkar. Daha önce yalnızca Geliştirici Araçları, Örneğin:

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, Puppeteer'ı kullanarak web'e göz atarken Geliştirici Araçları özelliklerini açıkça gösterebilirsiniz. Geliştirici Araçları'nı açın. Ö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ı sorunlarını bildirmek için Diğer seçenekler'i Daha fazla > Yardım > Geliştirici Araçları'nda Geliştirici Araçları ile ilgili sorunları bildirin.
  • @ChromeDevTools adresinden tweet atabilirsiniz.
  • Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.

Geliştirici Araçları'ndaki yenilikler

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