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

Jecelyn Yeen

Hata ayıklama sırasında çerçeveyi yeniden başlatma

Çerçeveyi yeniden başlat özelliği geri döndü. Bir işlevde duraklatıldığında önceki kodu yeniden çalıştırabilirsiniz. Bu özellik daha önce kararlılık sorunları nedeniyle Chrome 92'de kullanımdan kaldırılmıştı.

Bu örnekte, hata ayıklayıcı başlangıçta toggleColorScheme işlevinin sonuna yakın bir yerde bulunan kesme noktasında (343. satır) duraklatıldı. Hata ayıklamayı toggleColorScheme işlevinin başından yeniden başlatmak için Debugger (Hata Ayıklayıcı) bölmesinde Call stack (Çağrı yığını) bölümünü genişletin, toggleColorScheme işlevini sağ tıklayın ve Restart frame (Çerçeveyi yeniden başlat) seçeneğini belirleyin.

Chromium sorunu: 1303521

Recorder panelindeki yavaş oynatma seçenekleri

Artık kullanıcı akışlarını daha yavaş bir hızda (yavaş, çok yavaş ve son derece yavaş) tekrar oynatabilirsiniz. Bu seçenekler, ekranda her adımın tekrarını daha iyi gözlemlemenizi sağlar.

Kayıt Aracı panelini açın ve yeni bir kayıt başlatın. Kayıt tamamlandıktan sonra Yeniden Oynat açılır düğmesini tıklayın. Tekrar oynatmayı başlatmak için bir hız seçin.

Chromium sorunu: 1306756

Kaydedici paneli için uzantı oluşturma

Artık en sevdiğiniz biçimde tekrar oynatma senaryolarını dışa aktarmak için Chrome uzantısı oluşturabilir veya yükleyebilirsiniz. Nasıl oluşturulacağını öğrenmek için Kaydedici uzantısı API'si dokümanlarına bakın.

Bir demo uzantısı yüklemek için dokümanda belirtilen bu adımları uygulayın.

Chromium sorunu: 1325751

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

Kaynaklar panelindeki dosyalarınızı düzenlemek için yeni Dosyaları oluşturulma / dağıtılma bazında gruplandır seçeneğini etkinleştirin. Çerçevelerle (ör. React, Angular) web uygulamaları geliştirirken derleme araçları (ör. Webpack, Vite) tarafından oluşturulan küçültülmüş dosyalar nedeniyle kaynak dosyalar arasında gezinmek zor olabilir.

Bu onay kutusuyla, dosyaları daha hızlı aramak için 2 kategoride gruplandırabilirsiniz:

• Yazıldı. IDE'nizde görüntülediğiniz kaynak dosyalara benzer. Geliştirici Araçları, bu dosyaları kaynak eşlemelere (derleme araçlarınız tarafından sağlanır) göre oluşturur.
• Dağıtıldı. Tarayıcının okuduğu gerçek dosyalar. Bu dosyalar genellikle küçültülür.

Bu React demosunu kullanarak kendiniz deneyin.

Chromium sorunu: 960909

Performans analizleri panelinde yeni kullanıcı zamanlamaları izleme

Performans analizleri panelindeki yeni Kullanıcı Zamanlamaları parçasıyla kaydınızdaki performance.measure() işaretlerini görselleştirin.

Örneğin, bu web sayfası, metin yükleme süresini hesaplamak için performance.measure() yöntemini kullanır.

Sayfa yükleme süresini ölçmeye başladığınızda kayıtta Kullanıcı Zamanlamaları izi gösterilir. Yan bölmede ayrıntılarını görüntülemek için zamanlamalar öğesini tıklayın.

Chromium sorunu: 1322808

Bir öğenin atanmış yuvasını gösterme

Öğeler panelindeki yuvalı öğelerde yeni bir slot rozeti bulunur. Düzen sorunlarında hata ayıklarken bu özelliği kullanarak düğümün düzenini etkileyen öğeyi daha hızlı belirleyin.

Bu örnekte, adlandırılmış birkaç yuva içeren kartlar yer alıyor. Bir kartın person-occupation yuvasını inceleyin, atanan yuvasını göstermek için yanındaki slot rozetini tıklayın.

<template> ve <slot> öğelerini kullanarak, web bileşeninin gölge DOM'unu doldurmak için kullanılabilecek esnek bir şablon oluşturmayı öğrenin.

Chromium sorunu: 1018906

Performans kayıtları için donanım eşzamanlılığını simüle etme

Performans panelindeki yeni Donanım eşzamanlılığı ayarı, geliştiricilerin navigator.hardwareConcurrency tarafından bildirilen değeri yapılandırmasına olanak tanır.

Bazı uygulamalar, uygulamalarının paralellik derecesini kontrol etmek için navigator.hardwareConcurrency kullanır. Örneğin, Emscripten pthread havuz boyutunu kontrol etmek için bu işlevi kullanabilirler. Bu özellik sayesinde geliştiriciler, uygulama performanslarını farklı çekirdek sayılarıyla test edebilir.

Chromium sorunu: 1297439

CSS değişkenlerini otomatik tamamlarken renk dışı değerlerin önizlemesini görme

DevTools, CSS değişkenlerini otomatik tamamlarken artık renk içermeyen değişkeni anlamlı bir değerle dolduruyor. Böylece, değerin düğüm üzerinde ne tür bir değişiklik yapacağını önizleyebilirsiniz.

Chromium sorunu: 1285091

Geri/ileri önbellek bölmesinde engelleme karelerini belirleme

Uygulama panelindeki Geri/ileri önbelleği bölmesinde, sayfaların bfcache'e uygun olmasını engelleyebilecek, engellenen çerçeveleri belirlemenize yardımcı olacak yeni bir çerçeveler bölümü bulunur.

Chromium sorunu: 1288158

JavaScript nesneleri için iyileştirilmiş otomatik tamamlama önerileri

JavaScript nesne özelliklerinin otomatik tamamlanması artık şu sıraya göre gösteriliyor:

1. Own enumerable properties (Numaralandırılabilir kendi özellikleri)
2. Numaralandırılamayan kendi özellikleri
3. Devralınan numaralandırılabilir özellikler
4. Numaralandırılamayan devralınmış özellikler

Daha önce, öneri yalnızca devralınan mülkler yerine kendi mülklerini tercih ettiğinden ve devralınan tüm mülklere eşit öncelik verildiğinden geliştiriciler alakalı mülkleri bulmakta zorlanıyordu.

Chromium sorunu: 1299241

Kaynak eşlemeleriyle ilgili iyileştirmeler

Genel hata ayıklama deneyimini iyileştirmek için kaynak haritalarıyla ilgili birkaç düzeltme aşağıda verilmiştir:

• Kesme noktaları artık sourceURL notlarıyla birlikte satır içi <script> olarak çalışıyor.
• Hata ayıklayıcı artık Kapsam görünümündeki blok kapsamlı değişkenleri kaynak haritalarıyla çözüyor.
• Hata ayıklayıcı artık kaynak haritalarıyla Kapsam görünümündeki ok işlevlerinde değişkenleri çözüyor.

Chromium sorunları: 1329113, 1322115

Diğer önemli noktalar

Bu sürümdeki önemli düzeltmelerden bazıları şunlardır:

• Kaynaklar paneli için Otomatik tamamlama ayarı düzeltildi. Daha önce, ayar devre dışı olsa bile otomatik tamamlama her zaman açıktı. (1323286)
• En son renk şeması biçimini ayrıştırmak için Uygulama panelindeki Manifest sekmesi güncellendi. (1318305)
• Performans analizleri panelindeki <script async> oluşturmayı engelleyen sorunlarla ilgili öneriler iyileştirildi. Daha önce, komut dosyası zaten asenkron olarak işaretlenmiş olsa bile Geliştirici Araçları add async attribute to the script tag önerisinde bulunuyordu. (1334096)
• Performans bilgileri paneli artık düzen kaymalarının olası nedenleri olarak iFrame'leri algılıyor. Iframe ayrıntılarını Ayrıntılar panelinde görüntüleyebilirsiniz. (1328873)
• Komut menüsünde dosya aç seçildiğinde, yazılan dosyalar (kaynak haritaları tarafından oluşturulan dosyalar) artık daha üst sıralarda yer alıyor. Bu nedenle, benzer şekilde adlandırılmış dağıtılan komut dosyalarının üzerinde görünüyorlar. (1312929)

Ö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.