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, Geliştirici Araçları'na bir uzantıyla yerleştirebileceğiniz özel tekrar oynatma seçenekleri için destek sunar.

Örnek uzantıyı deneyin. Özel tekrar oynatma arayüzünü açmak için yeni özel tekrar oynatma 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ştirebilirsiniz: chrome.devtools.recorder API'yi keşfedin ve diğer uzantı örneklerine göz atın.

Chromium sorunu: 1400243.

Pierce seçicilerle kaydet

Özel, CSS, ARIA, metin ve XPath seçicilere ek olarak artık pierce seçiciler kullanarak da kayıt yapabilirsiniz. Bu seçiciler CSS'ler gibi davranır ancak gölge köklerini de delebilir.

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

Kaydedici'yi pierce seçicileri kullanacak şekilde ayarlama; Pierce seçici iş başında.

Chromium sorunu: 1411188.

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

Recorder, yeni bir dışa aktarma seçeneği sunar: 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'ı dışa aktarın (Lighthouse analizi dahil).

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

Lighthouse raporu Chrome'da açıldı.

Uzantıları edinin

Kaydedici deneyiminizi özelleştirme seçeneklerini (ör. özel dışa aktarma seçenekleriyle) keşfedin. Kaydedici için uzantıları almak üzere Dışa aktar > Kayıtlara uzantılar ekleyin.

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

İsterseniz kendi uzantınızı Kaydedici Uzantıları listesine ekleyebilirsiniz. Sizinkini de listede görmek için sabırsızlanıyoruz.

Chromium sorunları: 1417104, 1413168.

Öğeler > Stil güncellemeleri

CSS dokümanları

CSS özellikleriyle ilgili belgeleri günde kaç kez arıyorsunuz? Öğeler > Stiller bölmesinde artık bir mülkün üzerine geldiğinizde kısa bir açıklama gösteriliyor.

CSS mülkündeki belgeleri içeren ipucu.

İpucunda, sizi bu mülkteki MDN CSS Referansı'na yönlendiren bir Daha fazla bilgi bağlantısı da bulunur.

CSS'yi iyi biliyorsanız ipuçları yararlı olabilir. Tümünü kapatmak için Gösterme seçeneğini işaretleyin.

Bildirimleri tekrar açmak için Ayarlar > Tercihler > Öğeler > CSS dokümanları ipucunu göster.

Chromium sorunu: 1401107.

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

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

Chromium sorunu: 1172985.

Console'da günlük noktalarını ve koşullu ayrılma noktalarını işaretleme

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

Koşullu ayrılma noktalarında turuncu soru işareti (?) bulunan console.* çağrıları
Pembe iki noktalı .. günlük noktası mesajları

Console'un ayrılma noktaları tarafından tetiklenen mesajları artık simgeler ve uygun kaynak bağlantılarıyla görüntüleme şeklinde değişiklikler yapıldı.

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

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

Kesme noktası düzenleyicisini açan günlük noktası mesajının yanındaki yer işareti bağlantısı.

Chromium sorunu: 1027458.

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

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

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çenekleri görebilirsiniz. Hata ayıklayıcı, listeye eklenen komut dosyalarını yoksayar ve bunları çağrı yığınına çıkarır.

Bir klasörün veya komut dosyasının yoksaymayla ilgili seçeneklerini içeren içerik menüleri.

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

Yoksayılanlar listesindeki komut dosyaları ve klasörler gri renkli; diğer seçenekler açılır menüsündeki deneysel bir seçenekle bunları gizleyebilirsiniz.

Yoksayılan bir komut dosyası seçerseniz Yapılandır düğmesi sizi Ayarlar > Yoksayma Listesi. Yoksayan kaynakları ile dosya ağacında da gizleyebilirsiniz > Yoksayılanlar listesindeki kaynakları gizle .

Chromium sorunu: 883325.

JavaScript Profil Aracı desteğinin sonlandırılması başladı

Chrome 58'in başlarında, Geliştirici Araçları ekibi, JavaScript Profiler'ı kullanımdan kaldırmayı ve Node.js ile Deno geliştiricilerin, JavaScript CPU performansının profilini çıkarmak için Performans panelini kullanmalarını sağlamayı planladı.

Bu Geliştirici Araçları sürümü (112), JavaScript Profiler için dört aşamalı desteğin sonlandırılmasını başlatıyor. JavaScript Profiler panelinde artık ilgili uyarı banner'ı gösteriliyor.

CPU profili için Profiler yerine Performans panelini kullanın.

İlgili RFC ve crbug.com/1354548 sayfalarında daha fazla bilgi edinin ve geri bildirim gönderin.

Chromium sorunu: 1417647.

Azaltılmış kontrast emülasyonu

Oluşturma sekmesi, Görme eksikliklerini emülasyonu listesine yeni bir seçenek olan Azaltılmış kontrast ekler. Bu seçenekle, web sitenizin düşük kontrast hassasiyeti olan kullanıcılara nasıl göründüğünü keşfedebilirsiniz.

"Görme bozuklukları emülasyonu" altında belirlenen azaltılmış kontrast seçeneği işlevi görür.

Liste seçeneklerinin, seçeneklerin hangi renge duyarlılığı temsil ettiğini size bildirecek şekilde güncellendiğini unutmayın.

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

Chromium sorunları: 1412719, 1412721.

Deniz Feneri 10

Lighthouse paneli artık Lighthouse 10.0.1'i çalıştırıyor. Daha ayrıntılı bilgi için Lighthouse 10.0.1'deki yenilikler bölümüne bakın.

Geliştirici Araçları'nda Lighthouse panelini kullanmayla ilgili temel bilgileri öğrenmek için Lighthouse: Web sitesi hızını optimize etme konusuna bakın.

Lighthouse > Eski gezinme 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.

Cihazlar listesinde Moto G Power.

Chromium sorunu: 772558.

İşlemsiz hizmet çalışanı getirme işleyicinizi kaldırmanız için Console uyarısı

Chrome 112, gezinmeyi yavaşlatabileceği ancak bir amaca hizmet etmedikleri için işlemsiz (işlem yok) hizmet çalışanı getirme işleyicilerini atlar. Web sitenizin Progresif Web Uygulaması statüsüne uygun olması için artık bu tür işleyiciler gerekli değildir.

Konsol, web sitenizde işlemsiz getirme işleyici bulursa artık bir uyarı gösteriyor. Kaldırmayı düşünebilirsiniz.

İşlemsiz bir getirme işleyici ve Console'daki ilgili uyarı.

Chromium sorunu: 1347319.

Çeşitli öne çıkan anlar

Bu sürümde yer alan bazı önemli düzeltmeler şunlardır:

Kaynaklar > Ayrılma noktaları bölmesinde artık belirsiz dosya adlarının (1403924) yanında ayırt edici dosya yolları gösterilmektedir.
Performans panelinin flame grafiğindeki Ana bölümde CpuProfiler::StartProfiling, artık Profiler Overhead (1358602) olarak tanımlanıyor.
Geliştirici Araçları otomatik tamamlama özelliğini iyileştirdi:
- Kaynaklar: Herhangi bir kelimenin tutarlı bir şekilde tamamlanması (1320204).
- Konsol: Arrow down ilk öneriyi seçer ve öneriler Tab ipucu (1276960) alır.
Geliştirici Araçları, Pencere İçinde Pencere penceresi (1315352) açtığınızda duraklatmanıza olanak tanımak için bir etkinlik işleyici ayrılma noktası ekledi.
Geliştirici Araçları, Vue2 web paketi yapılarını JavaScript (1416562) olarak düzgün şekilde görüntüleyen bir geçici çözüm oluşturur.
Konsol ayarı daha iyi bir ada dönüşür: console.trace() iletilerini otomatik olarak genişletir. (1139616).

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Dev veya Beta'yı kullanabilirsiniz. Bu önizleme kanalları en yeni Geliştirici Araçları özelliklerine erişmenizi, son teknoloji ürünü web platformu API'lerini test etmenizi ve kullanıcılarınızdan önce sitenizdeki sorunları bulmanızı sağlar.

Chrome Geliştirici Araçları ekibiyle iletişim kurma

Yayındaki yeni özellikleri ve değişiklikleri ya da Geliştirici Araçları ile ilgili diğer her şeyi tartışmak için aşağıdaki seçenekleri kullanın.

Öneri veya geri bildirimlerinizi crbug.com adresinden bize iletebilirsiniz.
Geliştirici Araçları sorunlarını bildirmek için Diğer seçenekler'i > Yardım > Geliştirici Araçları'nda Geliştirici Araçları ile ilgili sorunları bildirin.
@ChromeDevTools adresinden tweet atabilirsiniz.
Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.