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

Dosyaları, Kaynaklar panelinde Yazılan / Dağıtılanlara göre gruplandırın

Dosyaları Oluşturulan / Dağıtılanlar ölçütüne göre gruplandır seçeneği artık 3 noktalı menü altında gösteriliyor. Daha önce doğrudan gezinme bölmesinde gösteriliyordu.

Bu demo açın. Önce orijinal kaynak kodunuzu (Yazar) görüntülemek ve bu kodlara daha hızlı gitmek için Dosyaları Yazıldığı / Dağıtıldığına göre gruplandır ayarını etkinleştirin.

Dosyaları oluşturulma / dağıtılma bazında gruplandırın

Chromium hatası: 1352488

İyileştirilmiş yığın izlemeler

Eşzamansız işlemler için bağlı yığın izlemeler

Bazı işlemlerin eşzamansız olarak gerçekleşmesi planlandığında, Geliştirici Araçları'ndaki yığın izlemeler artık işlemin "tüm hikayesini" anlatmaktadır. Önceden, hikayenin yalnızca bir kısmını anlatıyordu.

Örneğin, bu demo açıp artırma düğmesini tıklayın. Konsol'daki hata mesajını genişletin. Kaynak kodumuzda, işlem eşzamansız bir timeout işlemi içeriyor.

// application.component.ts

async increment() {
    await Promise.resolve().then(() => timeout(100));
    …
}

Daha önce, yığın izlemede yalnızca zaman aşımı işlemi gösteriliyordu. İşlemin "temel nedeni" gösterilmiyordu.

Geliştirici Araçları, son değişikliklerle birlikte artık işlemin düğme bileşenindeki onClick etkinliğinden, ardından increment işlevinden ve ardından zaman aşımı işleminden kaynaklandığını gösteriyor.

Eşzamansız işlemler için bağlı yığın izlemeler

Sahne arkasında DevTools yeni bir "Eş zamansız Yığın Etiketleme" özelliğini kullanıma sundu. Eş zamansız kodun her iki parçasını yeni console.createTask() yöntemiyle birbirine bağlayarak işlemin tüm hikayesini anlatabilirsiniz. Daha fazla bilgi edinmek için Geliştirici Araçları'nda modern hata ayıklama bölümüne bakın.

Karmaşık mı görünüyor? Kesinlikle hayır. Çoğu zaman, kullandığınız çerçeve planlama ve eşzamansız yürütme işlemlerini gerçekleştirir. Bu durumda, API'yi kullanmak için gereken çerçeve size bağlıdır. Bu konuda endişelenmenize gerek yoktur. (ör. Angular bu değişiklikleri uyguladı)

Chromium hatası: 1334585

Bilinen üçüncü taraf komut dosyalarını otomatik olarak yoksay

Geliştirici Araçları artık bilinen üçüncü taraf komut dosyalarını yoksayılanlar listesine otomatik olarak eklediğinden hata ayıklama sırasında kodunuzdaki sorunları daha hızlı tespit edin.

Bu demo açın ve artırma düğmesini tıklayın. Konsol'daki hata mesajını genişletin. Yığın izleme, yalnızca kodunuzu gösterir (ör. app.component.ts button.component.ts). Tam yığın izlemeyi görüntülemek için Daha fazla kare göster'i tıklayın.

Önceden, yığın izlemede zone.js ve core.mjs gibi üçüncü taraf komut dosyaları bulunuyordu. Bunlar kaynak kodunuz değildir, paketleyiciler (ör. webpack) veya çerçeveler (ör. Angular) tarafından oluşturulur. Bir hatanın temel nedenini belirlemek daha uzun sürdü.

Yığın izlemedeki bilinen üçüncü taraf komut dosyalarını otomatik olarak yoksay

Geliştirici Araçları, perde arkasında kaynak haritalarındaki yeni x_google_ignoreList özelliğini temel alarak üçüncü taraf komut dosyalarını göz ardı eder. Çerçevelerin ve paketleyicilerin bu bilgileri sağlaması gerekir. Örnek Olay: Geliştirici Araçları ile Daha İyi Açısal Hata Ayıklama bölümüne bakın.

İsteğe bağlı olarak, tam yığın izlemeyi her zaman görüntülemeyi tercih ederseniz Ayarlar > Yoksayılanlar listesi > Bilinen üçüncü taraf komut dosyalarını yoksayılanlar listesine otomatik olarak ekleyin.

Bilinen üçüncü taraf komut dosyalarını yoksayılanlar listesine otomatik olarak ekleme ayarı

Chromium hatası: 1323199

Hata ayıklama sırasında iyileştirilmiş çağrı yığını

Bilinen üçüncü taraf komut dosyalarını yoksayılanlar listesine otomatik olarak ekle ayarı seçildiğinde çağrı yığını artık yalnızca kodunuzla alakalı kareleri gösterir.

Bu demo açın ve app.component.ts öğesindeki increment() işlevinde bir ayrılma noktası belirleyin. Kesme noktasını tetiklemek için sayfadaki artım düğmesini tıklayın. Çağrı yığını, yalnızca kodunuzdaki kareleri (ör. app.component.ts ve button.component.ts) gösterir.

Tüm kareleri görüntülemek için Yoksayılanlar listesindeki çerçeveleri göster'i etkinleştirin. Daha önce Geliştirici Araçları, varsayılan olarak tüm kareleri gösteriyordu.

Hata ayıklama sırasında iyileştirilmiş çağrı yığını

Chromium hatası: 1352488

Kaynaklar panelinde yoksayılanlar listesindeki kaynakları gizleme

Gezinme bölmesinde, alakasız dosyaları gizlemek için Yoksayılanlar listesindeki kaynakları gizle seçeneğini etkinleştirin. Bu sayede yalnızca kodunuza odaklanabilirsiniz.

Bu demo açın. Kaynaklar panelinde. node_modules ve webpack üçüncü taraf komut dosyalarıdır. 3 noktalı menüyü tıklayın ve yok sayılanlar listesindeki kaynakları gizle'yi seçerek bölmede gizleyin.

Kaynaklar panelinde yoksayılanlar listesindeki kaynakları gizleme

Chromium hatası: 1352488

Yoksayılanlar listesindeki kaynakları gizle ayarıyla, dosyanızı Komut Menüsü ile daha hızlı bulabilirsiniz. Önceden, Komut Menüsü'nde dosya araması yapmak sizinle alakalı olmayabilecek üçüncü taraf dosyalarını döndürüyordu.

Örneğin, yoksayılanlar listesindeki kaynakları gizle ayarını etkinleştirip 3 noktalı menüyü tıklayın. Dosya aç'ı seçin. Düğme bileşenlerini aramak için "ton" yazın. Önceden, sonuçlar node_modules dosyalarını içeriyordu. node_modules dosyalarından biri de ilk sonuç olarak gösteriliyordu.

Komut menüsünde yoksayılanlar listesindeki dosyalar gizleniyor

Chromium hatası: 1336604

Performans panelinde yeni Etkileşimler kanalı

Etkileşimleri görselleştirmek ve olası yanıt verme sorunlarını izlemek için Performans panelindeki yeni Etkileşimler kanalını kullanın.

Örneğin, bu tanıtım sayfasında bir performans kaydı başlatın. Bir kahveyi tıklayıp kaydı durdurun. Etkileşimler kanalında iki etkileşim gösterilir. Her iki etkileşim de aynı kimliklere sahiptir, bu da etkileşimlerin aynı kullanıcı etkileşiminden tetiklendiğini gösterir.

Performans panelinde etkileşimleri izleme

Chromium hatası: 1347390

Performans Analizleri panelinde LCP zamanlamaları dökümü

Performans Analizleri paneli artık Largest Contentful Paint (LCP) zamanlama dökümü'nü gösteriyor. LCP performansını iyileştirme fırsatını anlamak ve belirlemek için bu zamanlama bilgilerini kullanın.

Performans Analizleri panelinde LCP zamanlamaları dökümü

Chromium hatası: 1351735

Kaydedici panelindeki kayıtlar için varsayılan adı otomatik olarak oluşturun

Kaydedici paneli artık yeni kayıtlar için otomatik olarak bir ad oluşturur.

Kaydedici panelindeki kayıtlar için varsayılan ad

Chromium hatası: 1351383

Çeşitli öne çıkan anlar

  • Önceden Kaydedici uzantıları, Kaydedici panelinde zaman zaman görünmüyor. (1351416)
  • Stiller bölmesinde artık SVG <stop> öğesinin stop-color özelliği için bir renk seçici görüntüleniyor. (1351096)
  • Performans Analizleri panelinde, düzen kaymalarının olası temel nedenleri olarak düzenin bozulmasına neden olan komut dosyalarını belirleyin. (1343019)
  • Performans Analizleri panelinde LCP web yazı tipleri için kritik yolu görüntüleyin. (1350390)

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