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

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

Jecelyn Yeen

Dosyaları, Kaynaklar panelinde Yazma / Dağıtılma ölçütüne 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 demoyu 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 (stack trace) artık işlemin "tüm hikayesini" anlatmaktadır. Önceden, hikayenin yalnızca bir kısmını anlatıyordu.

Örneğin, bu demoyu 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 programlama 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 demoyu açın ve artırma düğmesini tıklayın. Konsol'daki hata mesajını genişletin. Yığın izleme (stack trace) yalnızca kodunuzu (ör. app.component.ts button.component.ts) gösterir. 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 izlemeleri her zaman görüntülemeyi tercih ederseniz Ayarlar > Listeyi yoksay > Bilinen üçüncü taraf komut dosyalarını yoksayılanlar listesine otomatik olarak ekle seçeneğinden 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ı seçildiğinde çağrı yığını artık yalnızca kodunuzla alakalı kareleri gösterir.

Bu demoyu 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 demoyu 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

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

Yoksayılanlar listesindeki kaynakları gizle ayarı sayesinde, 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ı'ndaki Diğer seçenekler > Yardım > Geliştirici Araçları ile ilgili sorun bildir bölümüne giderek Geliştirici Araçları sorunlarını bildirin.
@ChromeDevTools adresinden tweet atabilirsiniz.
Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.