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 bazında gruplandırın seçeneği artık 3 noktalı menünün altında gösteriliyor. Daha önce doğrudan gezinme bölmesinde gösteriliyordu.

Bu demoyu açın. Orijinal kaynak kodunuzu (Yazar) önce görüntülemek ve bunlara daha hızlı gitmek için Dosyaları Yazar / Yayınlanana göre gruplandır ayarını etkinleştirin.

Chromium hatası: 1352488

İyileştirilmiş yığın izleme

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

Bazı işlemler asenkron olarak gerçekleşecek şekilde planlandığında DevTools'taki yığın izlemeleri artık işlemin "tam hikayesini" anlatıyor. Daha önce, hikayenin yalnızca bir kısmını anlatıyordu.

Örneğin, bu demoyu açıp artı düğmesini tıklayın. Konsol'da hata mesajını genişletin. Kaynak kodumuzda işlem, bir async 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 nedenini" göstermedi.

En son değişikliklerle birlikte DevTools 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.

Arka planda DevTools, yeni bir "Asenkron Yığın Etiketleme" özelliğini kullanıma sundu. Asynkron kodun her iki parçasını da yeni console.createTask() yöntemiyle bağlayarak işlemin tamamını anlatabilirsiniz. Daha fazla bilgi edinmek için Geliştirici Araçları'nda modern hata ayıklama başlıklı makaleyi inceleyin.

Karmaşık mı görünüyor? Kesinlikle hayır. Planlama ve eşzamansız yürütme işlemlerini çoğu zaman kullandığınız çerçeve yönetir. Bu durumda, API'yi kullanma kararı çerçeveye aittir. Bu konuda endişelenmenize gerek yoktur. (ör. Angular bu değişiklikleri uyguladı)

Chromium hatası: 1334585

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

DevTools artık bilinen üçüncü taraf komut dosyalarını otomatik olarak yoksayılanlar listesine eklediği için hata ayıklama sırasında kodunuzdaki sorunları daha hızlı tespit edebilirsiniz.

Bu demo'yu açın ve artı düğmesini tıklayın. Konsol'da hata mesajını genişletin. Yığın izlemede yalnızca kodunuz gösterilir (ör. app.component.ts button.component.ts). Yığın izlemenin tamamını görüntülemek için Daha fazla çerçeve göster'i tıklayın.

Daha önce yığın izleme, 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ü.

Geliştirici Araçları, sahne arkasında kaynak haritalardaki yeni x_google_ignoreList mülküne dayalı üçüncü taraf komut dosyalarını yoksayar. Çerçevelerin ve paketleyicilerin bu bilgileri sağlaması gerekir. Örnek Olay: Geliştirici Araçları ile Daha İyi Angular Hata Ayıklama başlıklı makaleyi inceleyin.

İsteğe bağlı olarak, yığın izlemelerinin tamamını her zaman görüntülemeyi tercih ediyorsanız Ayarlar > Yoksayılanlar listesi > Bilinen üçüncü taraf komut dosyalarını yoksayılanlar listesine otomatik olarak ekle'yi seçerek ayarı devre dışı bırakabilirsiniz.

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ıyla birlikte, çağrı yığınında artık yalnızca kodunuzla alakalı çerçeveler gösterilir.

Bu demoyu açın ve app.component.ts içindeki increment() işlevinde bir kesme noktası ayarlayın. Kesme noktasını tetiklemek için sayfadaki artı düğmesini tıklayın. Çağrı yığınında yalnızca kodunuzdaki çerçeveler (ör. app.component.ts ve button.component.ts) gösterilir.

Tüm kareleri görüntülemek için Yoksayılanlar listesindeki kareleri göster'i etkinleştirin. Daha önce DevTools varsayılan olarak tüm kareleri gösteriyordu.

Chromium hatası: 1352488

Kaynaklar panelinde yoksayılanlar listesindeki kaynakları gizleme

Gezinme bölmesinde yoksayılanlar listesindeki kaynakları gizle seçeneğini etkinleştirerek alakasız dosyaları gizleyin. 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 ignore-listed sources (İçerikleri yoksay listesinde yer alan kaynakları gizle) seçeneğini belirleyerek bu kaynakları bölmeden gizleyin.

Chromium hatası: 1352488

Yoksayılanlar listesindeki dosyaları Komut Menüsü'nde gizleme

İçeriğini yoksayılan kaynakları gizle ayarıyla, Komut Menüsü'nü kullanarak dosyanızı daha hızlı bulabilirsiniz. Daha önce, Komut Menüsü'nde dosya araması yaptığınızda sizinle alakalı olmayabilecek üçüncü taraf dosyaları döndürülüyordu.

Örneğin, yoksayılanlar listesinde yer alan 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'deki dosyaları içeriyordu. node_modules dosyalarından biri ilk sonuç olarak bile gösteriliyordu.

Chromium hatası: 1336604

Performans panelinde yeni Etkileşimler kanalı

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

Örneğin, bu demo sayfasında performans kaydı başlatın. Bir kahveyi tıklayın ve kaydı durdurun. Etkileşimler kanalında iki etkileşim gösterilir. Her iki etkileşimin de aynı kimlikleri vardır. Bu, etkileşimlerin aynı kullanıcı etkileşimini tetiklediğini gösterir.

Chromium hatası: 1347390

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

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

Chromium hatası: 1351735

Kaydedici panelinde kayıtlar için varsayılan adı otomatik olarak oluşturma

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

Chromium hatası: 1351383

Diğer öne çıkan özellikler

• Önceden, Kaydedici uzantıları zaman zaman Kaydedici panelinde görünmüyordu. (1351416)
• Stiller bölmesinde artık SVG <stop> öğesinin stop-color mülkü için bir renk seçici gösteriliyor. (1351096)
• Performans Analizleri panelinde, düzen kaymalarının olası temel nedenleri olarak düzen karmaşası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, 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.

• crbug.com adresinden bize geri bildirim ve özellik isteği gönderin.
• Geliştirici Araçları'nda more_vert Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak bir Geliştirici Araçları sorununu bildirin.
• @ChromeDevTools hesabına tweet gönderin.
• Geliştirici Araçları'ndaki yenilikler veya Geliştirici Araçları'yla ilgili ipuçları konulu YouTube videolarına yorum bırakın.

Geliştirici Araçları'ndaki yenilikler

DevTools'daki yenilikler serisinde ele alınan tüm konuların listesi.