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

Kayce Basques

Konsol'da let ve class yeniden tanımlamaları için destek

Console artık let ve class ifadelerinin yeniden tanımlanmasını desteklemektedir. Yeni JavaScript kodlarıyla denemeler yapmak için Console'u kullanan web geliştiricileri, yeniden tanımlama özelliğinin olmaması nedeniyle sık sık sorun yaşıyordu.

Örneğin, daha önce yerel bir değişken let ile yeniden tanımlanırken Console bir hata veriyordu:

Chrome 78'deki Console'un, let yeniden tanımlamasının başarısız olduğunu gösteren ekran görüntüsü.

Console artık yeniden tanımlamaya izin veriyor:

Chrome 80'deki Console'un, let yeniden tanımlamasının başarılı olduğunu gösteren ekran görüntüsü.

Chromium sorunu #1004193

İyileştirilmiş WebAssembly hata ayıklama

DevTools, DWARF Hata Ayıklama Standardı'nı desteklemeye başladı. Bu sayede, DevTools'ta kaynak dillerinizde kod atlama, kesme noktası ayarlama ve yığın izlemelerini çözme için daha fazla destek sunulur. Konunun tamamı için Chrome Geliştirici Araçları'nda geliştirilmiş WebAssembly hata ayıklama başlıklı makaleye göz atın.

DWARF destekli yeni WebAssembly hata ayıklama özelliğinin ekran görüntüsü.

Ağ paneli güncellemeleri

İstem başlatıcı sekmesinde istem başlatma zincirleri isteme

Artık bir ağ isteğinin başlatıcılarını ve bağımlılıklarını iç içe yerleştirilmiş bir liste olarak görüntüleyebilirsiniz. Bu sayede, bir kaynağın neden istendiğini veya belirli bir kaynağın (ör. komut dosyası) hangi ağ etkinliğine neden olduğunu anlayabilirsiniz.

Başlatıcı sekmesindeki istek başlatma zincirinin ekran görüntüsü

Ağ panelinde ağ etkinliğini günlüğe kaydettikten sonra bir kaynağı tıklayın ve İstem Başlatıcı Zinciri'ni görüntülemek için Başlatıcı sekmesine gidin:

  • İncelenen kaynak kalın olarak gösterilir. Yukarıdaki ekran görüntüsünde https://web.dev/default-627898b5.js incelenen kaynaktır.
  • İncelenen kaynağın üzerindeki kaynaklar başlatıcılardır. Yukarıdaki ekran görüntüsünde https://web.dev/bootstrap.js, https://web.dev/default-627898b5.js'un başlatıcısıdır. Diğer bir deyişle, https://web.dev/bootstrap.js, https://web.dev/default-627898b5.js için ağ isteğine neden olmuştur.
  • İncelenen kaynağın altındaki kaynaklar bağımlılıklardır. Yukarıdaki ekran görüntüsünde https://web.dev/chunk-f34f99f7.js, https://web.dev/default-627898b5.js'un bağımlılığıdır. Diğer bir deyişle, https://web.dev/default-627898b5.js, https://web.dev/chunk-f34f99f7.js için ağ isteğine neden oldu.

Chromium sorunu #842488

Genel bakış bölümünde seçili ağ isteğini vurgulama

Bir ağ kaynağını incelemek için tıkladıktan sonra Ağ paneli, Genel Bakış bölümünde bu kaynağın etrafına mavi bir kenar çizgisi yerleştirir. Bu, ağ isteğinin beklenenden daha erken mi yoksa daha geç mi gerçekleştiğini belirlemenize yardımcı olabilir.

İncelenen kaynağın vurgulandığı Genel Bakış bölmesinin ekran görüntüsü.

Chromium sorunu #988253

Ağ panelindeki URL ve yol sütunları

Her ağ kaynağının mutlak yolunu veya tam URL'sini görmek için Ağ panelindeki yeni Yol ve URL sütunlarını kullanın.

Ağ panelindeki yeni Yol ve URL sütunlarının ekran görüntüsü.

Yeni sütunları göstermek için Şelale tablo başlığını sağ tıklayın ve Yol veya URL'yi seçin.

Chromium sorunu #993366

Güncellenen User-Agent dizeleri

DevTools, Ağ Koşulları sekmesi aracılığıyla özel bir User-Agent dizesi ayarlamanızı destekler. User-Agent dizesi, ağ kaynaklarına eklenen User-Agent HTTP üst bilgisini ve navigator.userAgent değerini etkiler.

Önceden tanımlanmış User-Agent dizeleri, modern tarayıcı sürümlerini yansıtacak şekilde güncellendi.

Ağ Koşulları sekmesindeki Kullanıcı Aracısı menüsünün ekran görüntüsü.

Ağ Koşulları'na erişmek için Komut Menüsü'nü açın ve Show Network Conditions komutunu çalıştırın.

Chromium sorunu #1029031

Denetimler paneli güncellemeleri

Yeni yapılandırma kullanıcı arayüzü

Yapılandırma kullanıcı arayüzünde yeni ve duyarlı bir tasarıma geçildi ve akış kısıtlaması yapılandırma seçenekleri basitleştirildi. Denetimler panelinde yapılan akış kısıtlaması kullanıcı arayüzü değişiklikleri hakkında daha fazla bilgi için Denetimler panelinde akış kısıtlaması başlıklı makaleyi inceleyin.

Yeni yapılandırma kullanıcı arayüzü.

Kapsam sekmesi güncellemeleri

İşlev başına veya blok başına kapsama modları

Kapsam sekmesinde, kod kapsamı verilerinin işlev başına mı yoksa blok başına mı toplanacağını belirtmenize olanak tanıyan yeni bir açılır menü bulunur. Blok başına kapsam daha ayrıntılı olsa da verilerin toplanması çok daha pahalıdır. Geliştirici Araçları artık varsayılan olarak işlev başına kapsamı kullanıyor.

Kapsama modu açılır menüsü.

Kapsam artık sayfanın yeniden yüklenmesi ile başlatılmalıdır.

Kapsam verileri güvenilir olmadığı için sayfayı yeniden yüklemeden kod kapsamını değiştirme özelliği kaldırıldı. Örneğin, uzun zaman önce yürütülmüş ve V8'in çöp toplayıcısı tarafından temizlenmiş bir işlev kullanılmamış olarak raporlanabilir.

Chromium sorunu #1004203

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