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

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

Sofia Emelianova

Jecelyn Yeen

Kaydedici güncellemeleri

Tekrar oynatma uzantıları desteği

Kaydedici, bir uzantıyla Geliştirici Araçları'na yerleştirebileceğiniz özel tekrar oynatma seçenekleri için destek sunar.

Örnek uzantıyı deneyin. Özel tekrar kullanıcı arayüzünü açmak için yeni özel tekrar seçeneğini belirleyin.

Özel tekrar oynatma kullanıcı arayüzü.

Kaydedici'yi ihtiyaçlarınıza göre özelleştirmek ve araçlarınızla entegre etmek için kendi uzantınızı geliştirmeyi düşünebilirsiniz: chrome.devtools.recorder API'yi inceleyin ve diğer uzantı örneklerine göz atın.

Chromium sorunu: 1400243.

Delme seçicilerle kaydetme

Özel, CSS, ARIA, metin ve XPath seçicilere ek olarak artık pierce seçicileri kullanarak da kayıt yapabilirsiniz. Bu seçiciler CSS seçiciler gibi davranır ancak gölge köklerine de nüfuz edebilir.

Shadow DOM içeren bir sayfada yeni bir kayıt başlatın ve Kaydedilecek seçici türleri bölümünde Pierce'ı işaretleyin. Gölge DOM'daki öğelerle etkileşiminizi kaydedin ve ilgili adımı inceleyin.

Kaydedici'yi pierce seçicileri kullanacak şekilde ayarlama; Pierce seçiciyi kullanma.

Chromium sorunu: 1411188.

Lighthouse analiziyle Puppeteer komut dosyası olarak dışa aktarma

Kaydedici, yeni bir dışa aktarma seçeneği sunuyor: Puppeteer (Lighthouse analizi dahil). Puppeteer ile Chrome'u otomatikleştirebilir ve kontrol edebilirsiniz. Lighthouse ile web sitenizin performansını yakalayabilir ve iyileştirebilirsiniz.

Kaydınızı açın, Dışa aktar'ı tıklayın, yeni seçeneği belirleyin ve .js dosyasını kaydedin.

Puppeteer'ı (Lighthouse analizi dahil) dışa aktarın.

flow.report.html dosyasında Lighthouse raporu almak için Puppeteer komut dosyasını çalıştırın.

Lighthouse raporu Chrome'da açıldı.

Uzantıları edinme

Özel dışa aktarma seçenekleri gibi kaydedici deneyiminizi özelleştirme seçeneklerini keşfedin. Kaydedilen bir videoda Dışa aktar > Uzantıları edin'i tıklayarak Kaydedici için uzantılar edinin.

Dışa aktar açılır menüsündeki Uzantıları edin seçeneği.

Kaydedici Uzantıları listesine kendi uzantınızı ekleyebilirsiniz. Sizin içeriğinizi de listede görmek için sabırsızlanıyoruz.

Chromium sorunları: 1417104, 1413168.

Öğeler > Stil güncellemeleri

CSS dokümanları

CSS özellikleri ile ilgili dokümanlara günde kaç kez bakarsınız? Öğeler > Stiller bölmesi, artık bir özelliğin üzerine geldiğinizde kısa bir açıklama gösteriyor.

CSS özelliğiyle ilgili doküman içeren ipucu.

Ayrıca, bu özellik hakkında MDN CSS Referansı'na yönlendiren bir Daha fazla bilgi bağlantısı da bulunur.

CSS'yi iyi biliyorsanız ipuçlarını rahatsız edici bulabilirsiniz. Tümünü devre dışı bırakmak için Gösterme'yi işaretleyin.

Bu ipuçlarını tekrar etkinleştirmek için Ayarlar > Tercihler > Öğeler > CSS dokümanı ipucunu göster'i işaretleyin.

Chromium sorunu: 1401107.

CSS iç içe yerleştirme desteği

Öğeler > Stiller bölmesi artık CSS iç içe yerleştirme söz dizimini tanıyor ve iç içe yerleştirilmiş stilleri doğru öğelere uyguluyor.

Chromium sorunu: 1172985.

Konsolda logpoint'leri ve koşullu kesme noktalarını işaretleme

Gelişmiş kesme noktası kullanıcı deneyimini daha da iyileştiren Konsol artık kesme noktaları tarafından tetiklenen mesajları işaretliyor:

console.* turuncu soru işaretiyle koşullu kesme noktalarında yapılan aramalar ?
Pembe iki nokta .. içeren günlük noktası mesajları

Console'un artık kesme noktaları tarafından tetiklenen mesajları simgeler ve uygun kaynak bağlantısıyla göstermesi sağlandı.

Konsol artık V8'de herhangi bir JavaScript parçasını çalıştırmak için Chrome'un oluşturduğu VM<number> komut dosyaları yerine kaynak dosyalardaki kesme noktalarına uygun bağlantılar veriyor.

Doğrudan kesme noktası düzenleyicisine gitmek için kesme noktası mesajının yanındaki bağlantıyı tıklayın.

Kesme noktası düzenleyiciyi açan bir günlük noktası mesajının yanındaki bağlantı.

Chromium sorunu: 1027458.

Hata ayıklama sırasında alakasız komut dosyalarını yoksayma

Kodunuzun en önemli kısımlarına odaklanmanıza yardımcı olmak için artık Kaynaklar > Sayfa bölmesindeki dosya ağacından doğrudan alakasız komut dosyalarını Yoksayılanlar Listesi'ne ekleyebilirsiniz.

Herhangi bir komut dosyasını veya klasörü sağ tıklayın ve yoksaymayla ilgili seçeneklerden birini belirleyin. Komut dosyasını veya klasörü listeye ekleme ya da listeden kaldırma seçeneklerini görebilirsiniz. Hata ayıklayıcı, listeye eklenen komut dosyalarını yoksayar ve bunları çağrı yığınında atlar.

Yoksaymayla ilgili seçeneklerin bulunduğu bir klasörün ve komut dosyasının bağlam menüleri.

Yoksayılanlar listesindeki tüm komut dosyaları ve klasörler, dosya ağacında gri renkte gösterilir.

Yoksayma listesindeki komut dosyaları ve klasörler gri renkte gösterilir. Bunları, Diğer seçenekler açılır menüsündeki deneysel bir seçenekle gizleyebilirsiniz.

Yoksayılan bir komut dosyası seçerseniz Yapılandır düğmesi sizi Ayarlar > Yoksayma Listesi'ne yönlendirir. Ayrıca, > Yoksayılanlar listesindeki kaynakları gizle seçeneğini kullanarak yoksayılan kaynakları dosya ağacından gizleyebilirsiniz.

Chromium sorunu: 883325.

JavaScript Profil Aracı desteği sonlandırıldı

Geliştirici Araçları Ekibi, Chrome 58'den itibaren JavaScript Profiler'ın desteğini sonlandırmayı ve Node.js ile Deno geliştiricilerinin JavaScript CPU performansını profillemek için Performans panelini kullanmasını planlamıştı.

Bu DevTools sürümü (112), dört aşamalı JavaScript Profiler desteğinin sonlandırılmasını başlatır. JavaScript Profil Aracı paneli artık ilgili uyarı banner'ını gösteriyor.

CPU'yu profillemek için Profiler yerine Performans panelini kullanın.

Daha fazla bilgi edinin ve ilgili RFC ile crbug.com/1354548 adresinden geri bildirimde bulunun.

Chromium sorunu: 1417647.

Azaltılmış kontrast emülasyonu

Oluşturma sekmesi, Görsel eksiklikleri taklit et listesine yeni bir seçenek ekler: Azaltılmış kontrast. Bu seçenekle, web sitenizin kontrast hassasiyeti azalmış kullanıcılara nasıl göründüğünü öğrenebilirsiniz.

"Görsel eksiklikleri taklit et" işlevi altında seçilen azaltılmış kontrast seçeneği.

Liste seçeneklerinin, hangi renk duyarsızlığını temsil ettiklerini belirtecek şekilde güncellendiğini unutmayın.

Geliştirici Araçları ile tüm kontrast sorunlarını aynı anda bulup düzeltebilirsiniz. Daha fazla bilgi için Web sitenizi daha okunabilir hale getirme başlıklı makaleyi inceleyin.

Chromium sorunları: 1412719, 1412721.

Lighthouse 10

Lighthouse paneli artık Lighthouse 10.0.1'i çalıştırıyor. Daha fazla bilgi için Lighthouse 10.0.1'deki yenilikler başlıklı makaleyi inceleyin.

Geliştirici Araçları'nda Lighthouse panelini kullanmanın temel bilgileri için Lighthouse: Web sitesi hızını optimize etme başlıklı makaleyi inceleyin.

Lighthouse > > Eski gezinme özelliği artık varsayılan olarak devre dışıdır. Bu seçenek, gezinme modunda eski Lighthouse yapılandırmasını kullanır.

Eski gezinme devre dışı bırakıldı.

Lighthouse 10 artık varsayılan emülasyon cihazı olarak Moto G Power'ı kullanıyor. Geliştirici Araçları bu cihazı Ayarlar > Cihazlar'a ekledi.

Cihaz listesinde Moto G Power

Chromium sorunu: 772558.

No-op hizmet çalışanı getirme işleyicinizi kaldırmanız için Konsol uyarısı

Chrome 112, gezinmeyi yavaşlatabilecekleri ancak bir amaca hizmet etmedikleri için no-op (işlem yok) hizmet çalışanı getirme işleyicilerini atlar. Web sitenizin Progresif Web Uygulaması olarak nitelendirilmesi için artık bu tür işleyiciler gerekmiyor.

Konsol, web sitenizde no-op getirme işleyicisi bulursa artık uyarı gösteriyor. Kaldırmayı düşünebilirsiniz.

İşlem yapmayan bir getirme işleyicisi ve Console'daki ilgili uyarı.

Chromium sorunu: 1347319.

Diğer önemli noktalar

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

Kaynaklar > Kesme Noktaları bölmesi artık belirsiz dosya adlarının (1403924) yanında farklılaştırıcı dosya yollarını gösteriyor.
Performans panelinin alev grafiğindeki Ana bölümü artık CpuProfiler::StartProfiling öğesini Profiler Overhead olarak gösteriyor (1358602).
Geliştirici Araçları'nda geliştirilmiş otomatik tamamlama:
- Kaynaklar: Herhangi bir kelimenin tutarlı şekilde tamamlanması (1320204).
- Konsol: Arrow down ilk öneriyi seçer ve öneriler Tab ipuçları alır (1276960).
DevTools, belge pencere içinde pencere penceresi açtığınızda duraklatmanıza olanak tanıyan bir event listener kesme noktası ekledi (1315352).
DevTools, Vue2 webpack yapılarını JavaScript olarak düzgün şekilde görüntüleyen bir geçici çözüm oluşturdu (1416562).
Bir Console ayarı daha iyi bir ad alıyor: console.trace() mesajlarını otomatik olarak genişletin. (1139616).

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