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.

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.

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

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.

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

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.

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.

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 Console artık kesme noktaları tarafından tetiklenen mesajları işaretliyor:

• console.* turuncu soru işareti içeren koşullu kesme noktalarındaki çağrılar ?
• Pembe iki nokta .. içeren günlük noktası mesajları

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.

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.

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

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 Profiler 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 bildirim gönderin.

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.

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.

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.

Chromium sorunu: 772558.

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

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

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

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 ayırt edici 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, doküman 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şletme. (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 more_vert Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunu bildirin.
• @ChromeDevTools'a tweet gönderin.
• Geliştirici Araçları'ndaki yenilikler YouTube videolarına 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.