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

Kayce Basques

Chrome 65'te Geliştirici Araçları'na gelecek yeni özellikler şunlardır:

Aşağıda bu 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üklemeleri arasında tutmanıza olanak tanır. Önceden Geliştirici Araçları'nda yaptığınız değişiklikler sayfayı yeniden yüklediğinizde kaybolurdu. Yerel Geçersiz Kılmalar, birkaç istisna dışında çoğu dosya türü için çalışır. Sınırlamalar başlıklı bölümü inceleyin.

Bir CSS değişikliğini Yerel Geçersiz Kılmalar ile sayfa yüklemelerinde kalıcı hale getirme.

Şekil 1. Yerel Geçersiz Kılmalar ile sayfa yüklemeleri arasındaki bir CSS değişikliğini 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, 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ğı yerine yerel, 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

    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, dizin için okuma ve yazma erişimi vermek üzere görüntü alanınızın üst kısmında İzin ver'i tıklayın.

  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 bunun yerine Kaynaklar panelinde düzenleyin.
  • CSS'yi Stiller bölmesinde düzenlerseniz ve bu CSS'nin kaynağı bir HTML dosyasıysa Geliştirici Araçları değişikliği kaydetmez. Bunun yerine HTML dosyasını Kaynaklar panelinde düzenleyin.
  • Çalışma alanları. Geliştirici Araçları, ağ kaynaklarını otomatik olarak yerel bir depoyla eşler. Geliştirici Araçları'nda yaptığınız her değişiklik de yerel kod deponuza kaydedilir.

Değişiklikler sekmesi

Geliştirici Araçları'nda yerel olarak yaptığınız değişiklikleri yeni Değişiklikler sekmesi aracılığıyla izleyin.

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örme veya renk körlüğü olan kullanıcılar için erişilebilir olduklarından emin olmak amacıyla Renk Seçici'deki metin öğelerinin kontrast oranını inceleyin.

Erişilebilirlik bölmesi

Geçerli olarak 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ölmesi, Öğeler panelindeki DOM Ağacı'nda seçili olan öğenin ARIA özelliklerinin ve hesaplanan özelliklerinin yanı sıra erişilebilirlik ağacındaki konumunu gösterir.

Erişilebilirlik bölmesini çalışırken görmek için Rob Dodson'ın aşağıdaki etiketlemeyle ilgili A11ycast kanalına göz atın.

Renk Seçici'de 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 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 konusuna bakın.

Metin öğelerinizin renk kontrastını iyileştirmek, sitenizi tüm kullanıcılar için daha kullanışlı hale getirir. Başka bir deyişle, metniniz beyaz arka plan üzerinde griyse herkesin okuması zordur.

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 önerilen kontrast oranını (AAA) karşıladığı anlamına gelir. Tek bir onay işareti olması, önerilen minimum kontrast oranına (AA) ulaştığı 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 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şıladığı anlamına gelir.

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 panelini nasıl kullanacağınızı öğ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 yepyeni bir SEO denetimi kategorisi ve birçok yeni performans denetimi bulunur.

Yeni SEO denetimleri

Sayfalarınızın yeni SEO kategorisindeki her denetimden geçtiğinden emin olmak, arama motoru sıralamalarınızı iyileştirmeye yardımcı olabilir.

Yeni SEO denetim kategorisi.

7. Şekil. Yeni SEO denetim kategorisi

Yeni performans denetimleri

Chrome 65 ayrıca birçok yeni performans denetimiyle birlikte gelir:

  • 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'in sayfa yükleme hızını 4 kat artırmasının ardından, 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 başına sayfa görüntüleme başına gelir% 25 arttı. Daha fazla bilgi

İpucu: Sayfalarınızın yükleme performansını iyileştirmek istiyor ancak nereden başlayacağınızı bilmiyorsanız Denetimler panelini deneyin. Siteye bir URL verirsiniz ve söz konusu sayfayı geliştirebileceğiniz birçok farklı yöntem hakkında ayrıntılı bir rapor alırsınız. Kullanmaya başlayın.

Diğer güncellemeler

Çalışanlar ve eşzamansız kodla güvenilir kod adımı oluşturma

Chrome 65, ileti dizileri arasında mesaj ileten koda ve eşzamansız koda geçiş yaparken Adıma Adım Giriş yapın düğmesinde güncellemeler sunar. Önceki adım davranışını istiyorsanız bunun yerine yeni Adım Adım düğmesini kullanabilirsiniz.

İleti dizileri arasında mesaj ileten koda girme

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

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

Chrome 65'te mesaj geçirme kodu kullanıma sunuldu.

8. Şekil. Chrome 65'te mesaj iletme kodu adımına geçme

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

Chrome 63'te mesaj geçirme kodu kullanıma sunuldu.

9. Şekil. Chrome 63'te mesaj iletme kodu kapsamına giriliyor

Eşzamansız koda geçiş

Geliştirici Araçları artık eşzamansız koda giriş yaparken, sonunda çalışan eşzamansız kodda duraklamak istediğinizi varsayıyor.

Örneğin, Şekil 10'da setTimeout() adımına geçtikten sonra Geliştirici Araçları, sahne arkasında o noktaya kadar gelen tüm kodu çalıştırır ve ardından setTimeout() öğesine aktarılan işlevde duraklar.

Chrome 65'te eşzamansız kodu kullanma

Şekil 10. Chrome 65'te eşzamansız kodu kullanma

Chrome 63'te bu şekilde bir koda girdiğinizde, Şekil 11'de görebileceğiniz gibi DevTools kronolojik olarak çalışırken kodda duraklatıldı.

Chrome 63'te eşzamansız kodu kullanma

Şekil 11. Chrome 63'te eşzamansız kodu kullanma

Performans panelinde birden fazla kayıt

Performans paneli artık geçici olarak 5 adede kadar kaydı kaydetmenize olanak tanıyor. Geliştirici Araçları pencerenizi kapattığınızda kayıtlar silinir. Performans panelini nasıl kullanacağınızı öğrenmek için Çalışma Zamanı Performansını Analiz Etmeye Başlayın 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: Geliştirici Araçları işlemlerini Puppeteer 1.0 ile otomatikleştirin

Chrome DevTools ekibi tarafından yönetilen tarayıcı otomasyon aracı Puppeteer'ın 1.0 sürümü kullanıma sunuldu. Puppeteer'ı, daha önce yalnızca Geliştirici Araçları ile kullanılabilen ekran görüntüleri alma gibi birçok görevi otomatikleştirmek için 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ı birçok otomasyon görevi için API'ler de içerir:

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ıç başlıklı makaleyi inceleyin.

Ayrıca Puppeteer'ı, Geliştirici Araçları'nı açık bir şekilde açmadan göz atarken Geliştirici Araçları özelliklerini ortaya çıkarmak için de kullanabilirsiniz. Örnek için DevTools'u 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, Yeni geliştirilenler veya Beta'yı kullanmayı düşünün. Bu önizleme kanallarıyla Geliştirici Araçları'nın en yeni özelliklerine erişebilir, son teknoloji ürünü web platformu API'lerini test edebilir ve sitenizdeki sorunları kullanıcılarınızdan önce tespit edebilirsiniz!

Chrome Geliştirici Araçları ekibiyle iletişim kurma

Yayındaki yeni özellikler ve değişiklikler ya da Geliştirici Araçları ile ilgili diğer konular hakkında konuşmak için aşağıdaki seçenekleri kullanın.

  • crbug.com adresinden öneri veya geri bildirim gönderin.
  • Geliştirici Araçları'nda, Diğer seçenekler   Diğer > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunlarını bildirin.
  • @ChromeDevTools adresine tweet gönderin.
  • Geliştirici Araçları'ndaki YouTube videoları veya Geliştirici Araçları İpuçları YouTube videolarındaki yenilikler hakkındaki görüşlerinizi bizimle paylaşın.

Geliştirici Araçları'ndaki Yenilikler

DevTools'daki Yenilikler serisinde ele alınan her şeyin listesi.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 iptal edildi.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59