Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

Jecelyn Yeen

Kaynaklar panelinde dosyaları oluşturulma / dağıtılma bazında gruplandırma

Dosyaları Oluşturulma / Dağıtılma ölçütüne göre gruplandır artık 3 noktalı menüde gösterilmektedir. Önceden, bu özellik doğrudan gezinme bölmesinde gösteriliyordu.

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

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

Chromium hatası: 1352488

İyileştirilmiş yığın izlemeler

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

Bazı işlemler eşzamansız olarak gerçekleşecek şekilde planlandığında, DevTools'daki yığın izlemeler artık işlemin "tüm hikayesini" anlatmaktadır. Daha önce hikayenin yalnızca bir kısmını anlatıyordu.

Örneğin, bu demoyu açın ve artır düğmesini tıklayın. Console'da 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 izleme yalnızca zaman aşımı işlemini gösteriyordu. Raporda, işlemin "kök nedeni" gösterilmiyordu.

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

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

Geliştirici Araçları, perde arkasında 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 sayfasına göz atı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 çerçeveye bağlıdır ve bu konuda endişelenmeniz gerekmez. (ö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ı tanımlayın.

Bu demoyu açın ve artır düğmesini tıklayın. Console'da 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 izleme (stack trace), zone.js ve core.mjs gibi üçüncü taraf komut dosyalarını içeriyordu. 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 eşlemelerindeki yeni x_google_ignoreList özelliğini temel alarak üçüncü taraf komut dosyalarını yok sayar. Bu bilgiyi çerçevelerin ve paketleyicilerin sağlaması gerekir. Örnek Olay: Geliştirici Araçları ile Better Angular Hata Ayıklama'ya göz atın.

İsteğe bağlı olarak, her zaman tam yığın izlemeleri (stack trace) görüntülemeyi tercih ederseniz Ayarlar > Yoksayma listesi > Bilinen üçüncü taraf komut dosyalarını yoksayılanlar listesine otomatik olarak ekle bölümünden bu ayarı devre dışı bırakabilirsiniz.

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ı sayesinde, çağrı yığını artık yalnızca kodunuzla alakalı kareleri gösterir.

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

Tüm kareleri görüntülemek için Yoksayılanlar listesindeki kareleri 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

Yoksayılanlar listesine eklenen kaynakları Kaynaklar panelinde gizleme

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

Bu demoyu açın. Kaynaklar panelinde. node_modules ve webpack, üçüncü taraf komut dosyalarıdır. 3 noktalı menüyü tıklayın ve bölmede gizlemek için yoksayılanlar listesindeki kaynakları gizle'yi seçin.

Yoksayılanlar listesine eklenen kaynakları Kaynaklar panelinde gizleme

Chromium hatası: 1352488

Yoksayılanlar listesine eklenen dosyaları Komut Menüsünde gizleme

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

Örneğin, yoksayılanlar listesindeki kaynakları gizle ayarını etkinleştirin ve 3 noktalı menüyü tıklayın. Dosya aç'ı seçin. Düğme bileşenlerini aramak için “ton” yazın. Daha önce sonuçlar, node_modules dosyalarından biri ve hatta ilk sonuç olarak gösterilen node_modules dosyalarını içeriyordu.

Yoksayılanlar listesine eklenen dosyaları Komut Menüsünde gizleme

Chromium hatası: 1336604

Performans panelinde yeni Etkileşimler kanalı

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

Örneğin, bu demo sayfasında performans kaydı başlatabilirsiniz. Kahveyi tıklayıp kaydı durdurun. Etkileşimler kanalında iki etkileşim gösterilir. Her iki etkileşim de aynı kimliklere sahiptir. Bu, etkileşimlerin aynı kullanıcı etkileşiminden tetiklendiğini gösterir.

Performans panelinde etkileşimler kanalı

Chromium hatası: 1347390

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

Performans Analizleri panelinde artık Largest Contentful Paint (LCP) işleminin zamanlama dökümü gösterilmektedir. LCP performansını iyileştirme fırsatlarını anlamak ve tanımlamak için bu zamanlama bilgilerini kullanın.

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

Chromium hatası: 1351735

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

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

Kaydedici panelindeki kayıtların varsayılan adı

Chromium hatası: 1351383

Öne çıkan çeşitli unsurlar

Önceden Kaydedici uzantıları Kaydedici panelinde zaman zaman gösterilmiyordu. (1351416)
Stiller bölmesinde şimdi SVG <stop> öğesinin stop-color özelliği için bir renk seçici görüntülenir. (1351096)
Performans Analizleri panelinde düzen kaymalarının olası temel nedenleri olarak düzenlerin çökmesine 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, 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 > 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.