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 oynatma arayüzünü açmak için yeni özel tekrar oynatma seçeneğini belirleyin.

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

Recorder'ı ihtiyaçlarınıza göre özelleştirmek ve araçlarınızla entegre etmek için kendi uzantınızı geliştirmeyi düşünün: chrome.devtools.recorder API'sini keşfedin ve diğer uzantı örneklerini inceleyin.

Chromium sorunu: 1400243.

Pierce seçicilerle kaydet

Özel, CSS, ARIA, metin ve XPath seçicilere ek olarak artık parça seçicileri kullanarak kayıt yapabilirsiniz. Bu seçiciler, CSS seçicileri gibi davransa da gölge kökleri arasında de gezinebilir.

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

Kaydedici, pierce seçicileri kullanacak şekilde ayarlanıyor; Pierce seçici çalışırken.

Chromium sorunu: 1411188.

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

Kaydedici, 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 (Lighthouse analizi dahil).

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

Chrome'da Lighthouse raporu açıldı.

Uzantıları edinin

Kaydedici deneyiminizi özelleştirme seçeneklerini (ör. özel dışa aktarma seçenekleriyle) keşfedin. Bir kayıtta Dışa aktar > Uzantıları al'ı tıklayarak Kaydedici uzantılarını edinin.

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

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

Chromium sorunları: 1417104, 1413168.

Öğeler > Stil güncellemeleri

CSS dokümanları

CSS mülkleriyle ilgili dokümanları günde kaç kez arıyorsunuz? Artık fareyle bir mülkün üzerine geldiğinizde Öğeler > Stiller bölmesinde kısa bir açıklama gösterilir.

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ını rahatsız edici bulabilirsiniz. Hepsini devre dışı bırakmak için Gösterme seçeneğini işaretleyin.

Tekrar etkinleştirmek için Ayarlar > Tercihler > Öğeler > CSS dokümanları ipucunu göster'i kontrol edin.

Chromium sorunu: 1401107.

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

Öğeler > Stiller bölmesi artık CSS İç İçe Yerleştirme 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 kesme noktalarını işaretleme

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

Koşullu ayrılma noktalarında turuncu bir soru işareti ? ile console.* çağrı
Pembe iki noktalı .. 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örüntüleme biçiminde yapılan değişiklikler.

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

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üzenleyicisini açan günlük noktası mesajının yanındaki bağlayıcı bağlantısı.

Chromium sorunu: 1027458.

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

Kodunuzun en önemli bölümlerine odaklanmanıza yardımcı olması için artık Kaynaklar > Sayfa bölmesindeki dosya ağacından Yoksayılanlar Listesi'ne alakasız komut dosyaları ekleyebilirsiniz.

Herhangi bir komut dosyasını veya klasörü sağ tıklayın ve yoksayma ile ilgili seçeneklerden birini belirleyin. Komut dosyasını veya klasörü listeye ekleme ya da listeden kaldırmaya ilişkin seçenekler görebilirsiniz. Hata Ayıklayıcı, listeye eklenen komut dosyalarını yoksayar ve çağrı yığınına atlar.

Bir klasörün ve komut dosyasının içerik menüleri ile yoksayılmayla ilgili seçenekler.

Yoksayılanlar listesindeki tüm komut dosyaları ve klasörler, dosya ağacında devre dışıdır.

Yoksayılanlar listesine eklenen komut dosyaları ve klasörler gri renktedir. Diğer seçenekler açılır menüsündeki deneysel bir seçeneği kullanarak bunları gizleyebilirsiniz.

Yoksayılan bir komut dosyasını seçerseniz Yapılandır düğmesi sizi Ayarlar > Yoksay Listesi sayfasına yönlendirir. Ayrıca > Yoksayılanlar listesindeki kaynakları gizle düğmesini kullanarak yok sayılan kaynakları dosya ağacında gizleyebilirsiniz.

Chromium sorunu: 883325.

JavaScript Profiler'in kullanımdan kaldırılması işlemi başlatıldı

Chrome 58'den itibaren, Geliştirici Araçları ekibi JavaScript Profil Aracı'nı kullanımdan kaldırmayı ve JavaScript CPU performansının profilini çıkarmak için Node.js ve Deno geliştiricilerinin Performans panelini kullanmasını sağlamayı planlıyordu.

Bu Geliştirici Araçları sürümü (112), JavaScript Profil Aracı'nın (Dört aşamalı) kullanımdan kaldırılmasını başlatır. JavaScript Profil Aracı panelinde artık ilgili uyarı banner'ı gösteriliyor.

CPU'yu profil oluşturmak için Profiler yerine Performans panelini kullanın.

İlgili RFC ve crbug.com/1354548 adresinden daha fazla bilgi edinebilir ve geri bildirimde bulunabilirsiniz.

Chromium sorunu: 1417647.

Azaltılmış kontrast emülasyonu

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

"Görme bozukluklarını emüle et" işlevi altında azaltılmış kontrast seçeneği.

Liste seçeneklerinin, seçeneklerin hangi renk duyarlılığını temsil ettiğini gösterecek ş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.

Deniz Feneri 10

Lighthouse paneli artık Lighthouse 10.0.1'i çalıştırmaktadır. Daha ayrıntılı bilgi için Lighthouse 10.0.1'deki yenilikler konusuna bakın.

Geliştirici Araçları'ndaki Lighthouse panelini kullanmayla ilgili temel bilgileri öğrenmek için Lighthouse: Web sitesi hızını optimize etme başlıklı makaleyi inceleyin.

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

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

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

Cihazlar listesinde Moto G Power.

Chromium sorunu: 772558.

İşlemsiz hizmet çalışanı getirme işleyicinizin kaldırılmasına ilişkin Console uyarısı

Chrome 112, gezinmeyi yavaşlatabileceği ancak bir amaca hizmet etmediği için işlemsiz (işlem yok) hizmet çalışanı getirme işleyicilerini atlar. Web sitenizin Progresif Web Uygulaması olarak nitelendirilmesi için bu tür işleyicilere artık gerek yoktur.

Konsol, web sitenizde işlemsiz bir getirme işleyici bulursa artık bir uyarı gösterir. Bunları kaldırabilirsiniz.

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

Chromium sorunu: 1347319.

Öne çıkan çeşitli unsurlar

Bu sürümde yapılan bazı dikkate değer düzeltmeler şunlardır:

Kaynaklar > Ayrılma noktaları bölmesinde artık belirsiz dosya adlarının (1403924) yanında farklı dosya yolları gösterilmektedir.
Performans panelinin gösterge grafiğindeki Ana bölümde CpuProfiler::StartProfiling artık Profiler Overhead (1358602) olarak gösteriliyor.
DevTools iyileştirilmiş otomatik tamamlama:
- Kaynaklar: Herhangi bir kelimenin tutarlı tamamlamaları (1320204).
- Konsol: Arrow down ilk öneriyi seçer ve öneriler Tab ipucu alır (1276960).
DevTools, Belge Pencere İçinde Pencere penceresi açtığınızda duraklamanızı sağlayan bir etkinlik işleyici ayrılma noktası ekledi (1315352).
Geliştirici Araçları, Vue2 web paketi yapılarını JavaScript olarak düzgün bir şekilde görüntüleyen bir geçici çözüm belirler (1416562).
Bir Console ayarı daha iyi bir ada sahip: console.trace() iletilerini otomatik olarak genişlet. (1139616).

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni geliştirilenler veya Beta'yı kullanmayı düşünün. Bu önizleme kanallarıyla Geliştirici Araçları'nın en yeni özelliklerine erişebilir, son teknoloji ürünü web platformu API'lerini test edebilir ve sitenizdeki sorunları kullanıcılarınızdan önce tespit edebilirsiniz!

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

Yayındaki yeni özellikler ve değişiklikler ya da Geliştirici Araçları ile ilgili diğer konular hakkında konuşmak için aşağıdaki seçenekleri kullanın.

crbug.com adresinden öneri veya geri bildirim gönderin.
Geliştirici Araçları'nda, Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunlarını bildirin.
@ChromeDevTools adresine tweet gönderin.
Geliştirici Araçları'ndaki YouTube videoları veya Geliştirici Araçları İpuçları YouTube videolarındaki yenilikler hakkındaki görüşlerinizi bizimle paylaşın.