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ş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ş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ı 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.

Sahne arkasında DevTools yeni bir "Eş zamansız 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

Geliştirici Araçları 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 demoyu açın ve artırma 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ı, 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, yığın izlemelerinin tamamını her zaman görüntülemeyi tercih ederseniz Ayarlar > Yoksayılanlar listesi > Bilinen üçüncü taraf komut dosyalarını yoksayılanlar listesine otomatik olarak ekle'yi kullanarak 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 çerçeveleri 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 yok sayılanlar listesindeki kaynakları gizle'yi seçerek bölmede 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. Ö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. 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österilmektedir. 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

Çeşitli öne çıkan anlar

• Ö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şmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır 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 özellikleri, güncellemeleri veya Geliştirici Araçları ile ilgili diğer konuları görüşmek 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ı'ndaki more_vert Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir bölümüne giderek Geliştirici Araçları sorunlarını bildirin.
• @ChromeDevTools hesabına tweet gönderin.
• Geliştirici Araçları YouTube videolarındaki yenilikler veya Geliştirici Araçları İpuçları YouTube videolarına yorum yazın.

Geliştirici Araçları'ndaki yenilikler

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