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

Sofia Emelianova
Sofia Emelianova
GitHub

Ağ paneli iyileştirmeleri

Web içeriğini yerel olarak daha da hızlı geçersiz kılma

Yerel geçersiz kılma özelliği artık basitleştirildi. Böylece, uzak kaynakların yanıt başlıklarını ve web içeriğini Ağ panelinden bunlara erişmeden kolayca taklit edebilirsiniz.

Web içeriğini geçersiz kılmak için Ağ panelini açın, bir isteği sağ tıklayın ve İçeriği geçersiz kıl'ı seçin.

Bir isteğin açılır menüsündeki geçersiz kılma seçenekleri.

Yerel geçersiz kılma ayarlarınız varsa ancak devre dışıysa DevTools bunları etkinleştirir. Henüz ayarlamadıysanız DevTools, üstteki işlem çubuğunda sizi uyarır. Geçersiz kılmaların saklanacağı bir klasör seçin ve DevTools'un bu klasöre erişmesine izin verin.

Bir klasör seçin ve üstteki işlem çubuğunda klasöre erişime izin verin.

DevTools, geçersiz kılma işlemleri ayarlandıktan sonra sizi web içeriğini geçersiz kılmanıza olanak tanımak için Kaynaklar > Geçersiz Kılmalar > Düzenleyici'ye yönlendirir.

Geçersiz kılınan kaynakların Ağ panelinde Kaydedildi. ile gösterildiğini unutmayın. Nelerin geçersiz kılındığını görmek için fareyle simgenin üzerine gelin.

Ağ panelinde bir isteğin yanındaki geçersiz kılma simgesi.

Chromium sorunları: 1465785, 1470532, 1469359.

XHR ve getirme isteklerinin içeriğini geçersiz kılma

Artık XHR'nin içeriğini geçersiz kılabilir ve isteklerin yanıt üst bilgilerine ek olarak istek getirebilirsiniz. Bu tür geçersiz kılma işlemleriyle, arka uç ve API'niz henüz hazır olmasa bile web sayfanızda hata ayıklama yapmak için API yanıtlarını taklit edebilirsiniz.

DevTools şu anda aşağıdaki istek türleri için içerik geçersiz kılma işlemlerini desteklemektedir: resimler (ör. avif, png), yazı tipleri, fetch ve XHR, komut dosyaları (css ve js) ve dokümanlar (html). DevTools artık desteklenmeyen türler için İçeriği geçersiz kıl seçeneğini devre dışı bırakır.

Chromium sorunları: 792101, 1469776.

Chrome uzantı isteklerini gizleme

Yazdığınız koda odaklanmanıza ve Chrome'a yüklemiş olabileceğiniz uzantılar tarafından gönderilen alakasız istekleri filtrelemenize yardımcı olmak için Ağ paneline yeni bir filtre eklendi.

chrome-extension:// URL'lerine gönderilen tüm istekleri filtrelemek için Onay kutusu. Uzantı URL'lerini gizle'yi işaretleyin.

İstekler tablosunda gizlenen uzantı URL'leri.

Chromium sorunları: 1257885, 1458803.

İnsan tarafından okunabilen HTTP durum kodları

İsteğin başlığındaki Durum Kodu, HTTP durum kodlarının yanında artık kullanıcı tarafından okunabilir metin gösteriyor. Böylece istekle ilgili durumu daha hızlı anlayabilirsiniz.

Kullanıcıların okuyabileceği HTTP durum kodlarını gösteren "önce" ve "sonra".

Aynı metni görmek için fareyle istek tablosundaki durum kodunun üzerine de gelebilirsiniz.

Chromium sorunu: 1153956.

JSON alt türleri için yanıtları güzel bir şekilde yazdırma

application/[subtype]+json MIME alt türüne (örneğin, ld+json, hal+json ve diğerleri) sahip bir istek için Yanıt sekmesi artık yanıtı doğru şekilde ayrıştırıyor ve güzelleştirmenize olanak tanıyor.

Bir ağ yanıtı önizlemesinde application/json alt türünü ayrıştırmadan önce ve sonra.

Chromium sorunu: 406900.

Performans: Ağ etkinlikleri için getirme önceliğindeki değişiklikleri görün

Performans panelinde artık Ağ kanalındaki bir etkinliğin Özeti bölümünde tek bir Öncelik yerine iki öncelik alanı gösteriliyor: Başlangıç Önceliği ve (nihai) Öncelik. Bu ek alan sayesinde artık etkinliğin getirme önceliğinin değişip değişmediğini görebilir ve indirmelerin sırasını değiştirebilirsiniz. Daha fazla bilgi için Fetch Priority API ile kaynak yüklemeyi optimize etme başlıklı makaleyi inceleyin.

Getirme önceliğindeki değişiklikleri göstermeden önce ve sonra.

Ayrıca, aynı bilgileri Onay kutusu. Büyük istek satırları ayarı etkinken Ağ panelinin Öncelik sütununda da bulabilirsiniz.

Ağ panelindeki Öncelik sütunu.

Chromium sorunları: 1463901, 1380964.

Varsayılan olarak etkinleştirilen kaynak ayarları: Kod katlama ve otomatik dosya gösterme

Ayarlar'a dokunun. Ayarlar > Tercihler > Onay kutusu. Kod katlama seçeneği artık varsayılan olarak etkindir. Bu seçenek, kod bloklarını katlamanıza olanak tanır.

Bir kod bloğunu daraltmak için fareyle bloğun başlangıcındaki satır numarasının üzerine gelip Daralt. daraltma simgesini tıklayın. Bloğu tekrar genişletmek için {...} simgesini tıklayın.

Ayrıca, Ayarlar'a dokunun. Ayarlar > Tercihler > Onay kutusu. Kenar çubuğunda dosyaları otomatik olarak göster seçeneği artık varsayılan olarak etkinleştirilmiştir.

Bu ayar, sekme değiştirdiğinizde Kaynaklar > Sayfa bölümündeki dosya ağacının Düzenleyici'de açık olan mevcut dosyayı seçmesini sağlar.

Chromium sorunları: 1459193, 1336599.

Üçüncü taraf çerez sorunlarının hata ayıklama işlemi iyileştirildi

Daha gizli bir web oluşturmaya yardımcı olmak amacıyla ve diğer tarayıcıların yaptığı güncellemelere paralel olarak Chrome, Özel Korumalı Alan girişimini kullanıma sundu. Bu girişim, web'de gizliliği temelden iyileştirir ve üçüncü taraf çerezlerini geçersiz kılacak şekilde sağlıklı, reklam destekli bir web'i sürdürebilir. Özel Korumalı Alan'ın, değişikliklere rahatça uyum sağlamanızı sağlayan kademeli kullanımdan kaldırma zaman çizelgesi vardır.

Chrome'un üçüncü taraf çerezlerini aşamalı olarak kullanımdan kaldırma işleminin sonrasında nasıl davranacağını test edebilirsiniz. Bunu yapmak için --test-third-party-cookies-phaseout işaretiyle Chrome'u komut satırından çalıştırın. Bu işaretin ne işe yaradığını öğrenmek için Çerezlerde hata ayıklama başlıklı makaleyi inceleyin.

Chrome'u çalıştırma şeklinizden (işaretle veya işaretsiz) bağımsız olarak, Sorunlar sekmesinde artık tüm yeni Chrome kullanıcıları için varsayılan olarak Onay kutusu. Üçüncü taraf çerez sorunlarını dahil et onay kutusu etkinleştirildi. Bu nedenle, aşağıdakiler raporlanır:

  • Yaklaşan kullanımdan kaldırmayla ilgili önemli bir değişiklik uyarısı.
  • Üçüncü taraf çerezleriyle ilgili sorunlar.

Mevcut bir Chrome kullanıcısı olarak yakında kullanımdan kaldırılacak çerezlerle ilgili uyarıları görmek istiyorsanız bu onay kutusunu işaretlediğinizden emin olun.

Bunu test etmek için bu demo sayfasında çerezleri inceleyin.

Sorunlar sekmesinde bildirilen üçüncü taraf çerez sorunları.

Ayrıca, Ağ panelindeki Onay kutusu. Engellenen yanıt çerezleri filtresi, yalnızca engellenen yanıt çerezlerini gösterdiğini açıkça belirtecek şekilde yeniden ifade edildi.

Onay kutusu etkindir ve yalnızca engellenen yanıt çerezlerine sahip istekleri gösterir.

Chromium sorunları: 1458839, 1462693, 1466310.

Uygulama panelinde önceden yükleme işleminde hata ayıklama

Chrome ekibi, kullanıcının büyük olasılıkla gideceği gelecekteki sayfaların tam ön oluşturma özelliğini geri getiriyor. Geliştirici Araçları, bu konuda hata ayıklamanıza olanak tanımak için Uygulama paneline Ön yükleme bölümünü ekler. Yeni ön getirme ve ön oluşturma (toplu olarak "gezinme ön getirme" olarak bilinir) özelliği, bağlantı tabanlı kaynak ipuçları yerine Tahmin Kuralları API'sini kullanır.

Bu demo sayfasında, Uygulama > Ön yükleme bölümünde şunları inceleyebilirsiniz:

  • Geçerli sayfada bulunan tüm kural kümelerini listeleyen Spekülasyon Kuralları.
  • Kural gruplarındaki önceden getirilen ve önceden oluşturulan tüm URL'leri listeleyen Önceden yüklemeler.
  • Mevcut sayfanın önceden oluşturulmuş durumunu listeleyen Bu Sayfa.

Daha fazla bilgi için tahmin kurallarıyla ilgili hata ayıklamayla ilgili özel yayına bakın.

Chromium sorunu: 1410709.

Yeni renkler

Geliştirici Araçları'nın artık Chrome ile daha uyumlu yeni bir görünüme kavuştuğunu fark etmiş olabilirsiniz. Buna katkıda bulunan faktörlerden biri yeni renk şemasıdır.

Yeni renklerin uygulanmasından önceki ve sonraki durum.

Bu sürümde (117), daha önce bahsedilen ve aşağıda listelenen kullanıcı deneyimi iyileştirmelerinin yanı sıra iyileştirilmiş kullanıcı arayüzü metinleri de DevTools'a eklendi.

Chromium sorunu: 1456677.

Lighthouse 10.4.0

Lighthouse panelinde artık Lighthouse 10.4.0 sürümü kullanılıyor. Bu sürümde en dikkat çeken özellik, aşağıdakiler için yeni erişilebilirlik denetimleri eklenmesidir:

Örneğin:

Bağlantıların ayırt edilemez hale getiren rengi kontrol edilemedi.

Değişikliklerin tam listesini de inceleyin. Geliştirici Araçları'ndaki Lighthouse panelini kullanmayla ilgili temel bilgileri öğrenmek için Lighthouse: Web sitesi hızını optimize etme başlıklı makaleyi inceleyin.

Chromium sorunu: 772558.

Geliştirici Araçları için C/C++ WebAssembly hata ayıklama uzantısı artık açık kaynak

Geliştirici Araçları için C/C++ WebAssembly hata ayıklama uzantısı artık açık kaynaktır ve Geliştirici Araçları ön uç veri havuzunda bulunur. Bu uzantı, WebAssembly olarak derlenen C++ programları için Geliştirici Araçları'nda hata ayıklama özelliklerini etkinleştirir. Daha fazla bilgi için C/C++ WebAssembly'de hata ayıklama başlıklı makaleyi inceleyin.

Uzantıyı nasıl oluşturacağınızı, çalıştıracağınızı ve test edeceğinizi öğrenin ve katkıda bulunmaya çekinmeyin.

Chromium sorunu: 1410709.

Diğer öne çıkan özellikler

Bu sürümdeki dikkate değer düzeltme ve iyileştirmelerden bazıları şunlardır:

Yeni deneysel özellikler

Yeni oluşturma emülasyonu: prefers-reduced-transparency

Web sitenizin kullanıcıları, şeffaf efektleri azaltma tercihlerini belirtmek için cihazlarında yeni deneysel prefers-reduced-transparency CSS medya özelliğini etkinleştirmeye başlayabilir. Web sitenizin erişilebilirliğini artırmak için bu tercihi göz önünde bulundurabilirsiniz. Size yardımcı olmak için Oluşturma çekmece sekmesi artık prefers-reduced-transparency: reduce ayarını taklit edebilir. Böylece bir çözümün prototipini oluşturabilir ve web sitenizin bu durumda nasıl davrandığını test edebilirsiniz.

Chrome'da bu özelliği test etmek için chrome://flags'de Deneysel Web Platformu özelliklerini etkinleştirin.

Chromium sorunu: 1424879.

Gelişmiş protokol izleyici

Chrome Geliştirici Araçları, Chrome tarayıcılarını ayarlamak, incelemek, hata ayıklamak ve profillemek için Chrome Geliştirici Araçları Protokolü'nü (CDP) kullanır. Chromium veya DevTools geliştiricisiyseniz Protokol İzleyici, DevTools tarafından yapılan tüm CDP isteklerini ve yanıtlarını görüntülemenize ve CDP komutları göndermenize olanak tanır.

Protokol İzleyici, CDP komutlarını daha kolay oluşturmanıza ve göndermenize olanak tanıyan yeni bir arayüze kavuştu. Artık komutları ve parametrelerini dokümanda aramak zorunda değilsiniz. Geliştirici Araçları bunları size önerir.

Protokol İzleyici çekmece sekmesinin sağ alt köşesinde Sol panel açık. CDP komut düzenleyicisini göster'i tıklayın, bir hedef seçin, komut yazmaya başlayın, önerilenlerden birini seçin, gerekirse parametre değerlerini belirtin ve Gönder'i tıklayın. Komut gönder'i (Ctrl/Cmd + Enter) tıklayın.

CDP komutu belirleme ve gönderme.

Chromium sorunu: 1469345.

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

Geliştirici Araçları'ndaki yenilikler

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