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

Kayce Basques

Console'da let ve class yeniden beyanları için destek

Console artık let ve class ifadelerinin yeniden beyanlarını desteklemektedir. Yeniden beyan edememe yeni JavaScript denemeleri yapmak için Console'u kullanan web geliştiricilerinin girin.

Örneğin, daha önce let ile bir yerel değişkeni yeniden bildirirken Konsol bir hata:

Chrome 78'deki Console'un, yeniden beyan işleminin başarısız olduğunu gösteren ekran görüntüsü.

Artık Console yeniden bildirime izin verir:

Chrome 80'deki Console'un, yeniden beyan işleminin başarılı olduğunu gösteren ekran görüntüsü.

Chromium sorunu #1004193

İyileştirilmiş WebAssembly hata ayıklaması

Geliştirici Araçları, DWARF Hata Ayıklama Standardı'nı desteklemeye başladı. Bu da, kaynak dillerinizde kodun üzerinden geçmek, ayrılma noktaları belirlemek ve yığın izlemeleri çözümlemek için Geliştirici Araçları'nı tıklayın. Yazının tamamı için Chrome Geliştirici Araçları'nda İyileştirilmiş WebAssembly hata ayıklama sayfasına göz atın.

DWARF destekli WebAssembly hata ayıklama işleminin ekran görüntüsü.

Ağ paneli güncellemeleri

Başlatıcı sekmesinde istek Başlatıcı Zincirleri

Artık bir ağ isteğinin başlatıcılarını ve bağımlılıklarını iç içe geçmiş bir liste olarak görüntüleyebilirsiniz. Bu bir kaynağın neden istendiğini veya belirli bir kaynağın hangi ağ etkinliğini (ör. (komut dosyası olarak) nedeniyle fark etmez.

Başlatıcı sekmesindeki bir İstek Başlatıcı Zinciri'nin ekran görüntüsü

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

  • İncelenen kaynak kalın harflerle gösterilmiştir. 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 yayınını başlatıyor. Başka sözcükler, https://web.dev/bootstrap.js şunun için ağ isteğine neden oldu: https://web.dev/default-627898b5.js.
  • İ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 öğesinin bir bağımlılığıdır. İçinde Yani https://web.dev/default-627898b5.js, şunun için ağ isteğine neden oldu: https://web.dev/chunk-f34f99f7.js.

Chromium sorunu #842488

Seçili ağ isteğini Genel Bakış'ta vurgula

İncelemek üzere bir ağ kaynağını tıkladığınızda Ağ paneline mavi bir kenarlık eklenir Genel Bakış'ta bu kaynakla ilgili bilgi edinebilirsiniz. Bu, ağ isteğinin gerçekleşebilecek görevleri belirleyebilirsiniz.

İncelenen kaynağı vurgulayan Genel Bakış penceresinin ekran görüntüsü.

Chromium sorunu #988253

Ağ panelindeki URL ve yol sütunları

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

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

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

Chromium sorunu #993366

Güncellenen Kullanıcı Aracısı dizeleri

Geliştirici Araçları, Ağ Koşulları sekmesi aracılığıyla özel bir User-Agent dizesi ayarlanmasını destekler. İlgili içeriği oluşturmak için kullanılan User-Agent dizesi, ağ kaynaklarına ekli User-Agent HTTP başlığını ve ayrıca navigator.userAgent değerine ayarlanır.

Ö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 kullanın.

Chromium sorunu #1029031

Denetimler paneli güncellemeleri

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

Yapılandırma kullanıcı arayüzünün yeni ve duyarlı bir tasarımı var ve kısıtlama yapılandırma seçenekleri basitleştirilmiştir. Kısıtlama kullanıcı arayüzü hakkında daha fazla bilgi için Denetim Bölmesi Kısıtlaması bölümüne bakın. anlamına gelir.

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

Kapsam sekmesi güncellemeleri

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

Kapsam sekmesinde, kod kapsamı verilerinin bulunup bulunmadığını belirtmenize olanak tanıyan yeni bir açılır menü bulunur. işlev başına veya blok başına toplanmalıdır. Blok başına kapsam daha ayrıntılıdır ancak çok daha pahalıya mal olabilir. Geliştirici Araçları artık varsayılan olarak işlev başına kapsamı kullanıyor.

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

Kapsam artık sayfanın yeniden yüklenmesiyle başlatılmalıdır

Kapsam verileri şu durumda olduğu için, sayfa yeniden yüklenmeden kod kapsamını açma/kapatma düğmesi kaldırıldı güvenilmez. Örneğin, yürütme uzun zaman önce yapılmış bir işlev, kullanılmıyor olarak raporlanabilir ve V8'in çöp toplayıcısı temizledi.

Chromium sorunu #1004203

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