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 nokta menüsünde gösteriliyor. Daha önce doğrudan gezinme bölmesinde gösteriliyordu.

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

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 izleri artık işlemin "tam hikayesini" anlatıyor. Önceden bu metrik, hikayenin yalnızca bir kısmını anlatıyordu.

Örneğin, bu demoyu açın ve artırma düğmesini tıklayın. Konsol'daki hata mesajını genişletin. Kaynak kodumuzda işlem, eşzamansız 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. İşlemin "temel nedeni" gösterilmedi.

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

DevTools, arka planda yeni bir "Async Stack Tagging" (Asenkron Yığın Etiketleme) özelliği kullanıma sundu. Yeni console.createTask() yöntemini kullanarak eşzamansız kodun her iki bölümünü birbirine 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. Çoğu zaman, kullandığınız çerçeve planlamayı ve eşzamansız yürütmeyi yönetir. Bu durumda, API'yi kullanmak çerçeveye 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 yoksayma

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

Bu demoyu 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). 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 izi, 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ürüyordu.

Geliştirici Araçları, arka planda kaynak eşlemelerindeki yeni x_google_ignoreList özelliğine göre üçüncü taraf komut dosyalarını yoksayar. Çerçeveler ve paketleyiciler bu bilgiyi sağlamalıdır. Örnek olay: Geliştirici Araçları ile daha iyi Angular hata ayıklama başlıklı makaleyi inceleyin.

İsteğe bağlı olarak, her zaman tam yığın izlemelerini 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 çağrı yığını iyileştirildi

Bilinen üçüncü taraf komut dosyalarını yoksayılanlar listesine otomatik olarak ekle ayarı etkinleştirildiğinde, çağrı yığını artık yalnızca kodunuzla alakalı çerçeveleri gösteriyor.

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ırma düğmesini tıklayın. Çağrı yığını yalnızca kodunuzdaki çerçeveleri (ör. app.component.ts ve button.component.ts) gösterir.

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

Chromium hatası: 1352488

Yoksayılanlar listesindeki kaynakları Kaynaklar panelinde gizleme

Gezinme bölmesinde alakasız dosyaları gizlemek için Yoksayılanlar listesindeki kaynakları gizle'yi 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 Yoksayma listesindeki kaynakları gizle'yi seçerek bu kaynakları bölmeden gizleyin.

Chromium hatası: 1352488

Yoksayılanlar listesindeki dosyaları komut menüsünde gizleme

Yoksayma listesindeki kaynakları gizle ayarıyla, Komut Menüsü'nü kullanarak dosyanızı daha hızlı bulabilirsiniz. Daha önce, Komut Menüsü'nde dosya aradığınızda sizinle alakalı olmayabilecek üçüncü taraf dosyaları döndürülüyordu.

Örneğin, Yoksayma 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ını içeriyordu. node_modules dosyalarından biri ilk sonuç olarak bile gösteriliyordu.

Chromium hatası: 1336604

Performans panelinde yeni Etkileşimler izi

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

Örneğin, bu demo sayfasında performans kaydı başlatın. Bir kahveye tıklayın ve kaydı durdurun. Etkileşimler parçasında iki etkileşim gösterilir. Her iki etkileşim de aynı kimliklere sahip. Bu, etkileşimlerin aynı kullanıcı etkileşiminden tetiklendiğini gösterir.

Chromium hatası: 1347390

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

Performans analizleri panelinde artık Largest Contentful Paint (LCP) değerinin zamanlama dökümü gösteriliyor. LCP performansını iyileştirme fırsatlarını anlamak ve belirlemek için bu zamanlama bilgilerini kullanın.

Chromium hatası: 1351735

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

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

Chromium hatası: 1351383

Diğer önemli noktalar

• Daha önce, Kaydedici uzantıları zaman zaman Kaydedici panelinde görünmüyordu. (1351416)
• Stiller bölmesinde artık SVG <stop> öğesinin stop-color özelliği 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österin. (1350390)

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Dev veya Beta'yı kullanmayı düşünebilirsiniz. Bu önizleme kanalları, en yeni DevTools özelliklerine erişmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır ve kullanıcılarınızdan önce sitenizdeki sorunları 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 diğer konuları tartışmak için aşağıdaki seçenekleri kullanın.

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

Geliştirici Araçları'ndaki yenilikler

Geliştirici Araçları'ndaki yenilikler serisinde ele alınan her şeyin listesi.