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

Sofia Emelianova
Sofia Emelianova

Kaydedici güncellemeleri

Tekrar oynatma uzantıları desteği

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

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

Özel yeniden 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 keşfedin ve daha fazla uzantı örneğine göz atın.

Chromium sorunu: 1400243.

Delme seçicilerle kayıt yapma

Artık özel, CSS, ARIA, metin ve XPath seçicilerine ek olarak pierce seçicileri kullanarak da kayıt yapabilirsiniz. Bu seçiciler CSS seçicileri gibi çalışır ancak gölge kökleri de delebilir.

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

Kaydedici'yi, delme seçicileri kullanacak şekilde ayarlama; Delme seçicinin işleyişi.

Chromium sorunu: 1411188.

Lighthouse analizi içeren bir Puppeteer komut dosyası olarak dışa aktarma

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

Kaydınızı açın, Dışa aktar'ı tıklayı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ı biçiminde bir 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. Bir kayıtta Dışa aktar'ı tıklayın. Dışa aktar > Uzantı al'ı tıklayarak Kaydedici için uzantı alın.

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

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

Chromium sorunları: 1417104, 1413168.

Öğeler > Stiller güncellemeleri

CSS dokümanları

CSS özellikleriyle ilgili dokümanları günde kaç kez arıyorsunuz? Fareyle bir öğenin üzerine geldiğinizde Öğeler > Stiller bölmesinde kısa bir açıklama gösterilir.

CSS mülküyle ilgili dokümanları içeren ipucu.

İpucu, sizi bu mülkle ilgili bir MDN CSS Referansı'na yönlendiren bir Daha fazla bilgi bağlantısı da içerir.

CSS'yi iyi biliyorsanız ipuçları can sıkıcı olabilir. Tümünü devre dışı bırakmak için Onay kutusu. Gösterme'yi işaretleyin.

Bunları tekrar etkinleştirmek için Ayarlar'a dokunun. Ayarlar > Tercihler > Öğeler > Onay kutusu. CSS dokümanlarını ipucu olarak 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ır ve iç içe yerleştirilmiş stilleri doğru öğelere uygular.

Chromium sorunu: 1172985.

Konsolda günlük noktalarını 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'da, kesme noktaları tarafından tetiklenen mesajların görüntülenme şekli değişti: Simgelerle ve uygun kaynak bağlantısıyla gösteriliyor.

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

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

Bir günlük noktası mesajının yanındaki, kesme noktası düzenleyiciyi açan ana sayfa bağlantısı.

Chromium sorunu: 1027458.

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

Artık kodunuzun en önemli bölümlerine odaklanmanız için Kaynaklar > Sayfa bölmesinde bulunan dosya ağacından Yoksayılanlar Listesi'ne alakasız komut dosyaları ekleyebilirsiniz.

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 çağrı yığınında atlar.

Yoksaymayla ilgili seçenekler içeren bir klasör ve komut dosyasının bağlam menüleri.

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

Yoksayılanlar listesinde yer alan komut dosyaları ve klasörler devre dışıdır. 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&#39;a dokunun. Ayarlar > Yoksay Listesi'ne yönlendirir. Yoksayılan kaynakları, Üç noktalı menü. > Yoksayılanlar listesindeki kaynakları gizle Deneysel. seçeneğini kullanarak dosya ağacından da gizleyebilirsiniz.

Chromium sorunu: 883325.

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

Geliştirici Araçları ekibi, Chrome 58'den itibaren JavaScript Profilleyici'nin desteğini sonlandırmayı ve Node.js ile Deno geliştiricilerin JavaScript CPU performansını profillemek için Performans panelini kullanmasını planlıyordu.

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

Profilleyici&#39;nin üst kısmındaki desteği sonlandırılan özellikler banner&#39;ı.

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

Daha fazla bilgi edinmek ve geri bildirimde bulunmak için ilgili RFC'ye ve crbug.com/1354548 adresine gidin.

Chromium sorunu: 1417647.

Azaltılmış kontrast emülasyonu

Oluşturma sekmesinde, Görme kusurlarını taklit et listesine Azaltılmış kontrast adlı yeni bir seçenek eklendi. Bu seçenek sayesinde, web sitenizin kontrast hassasiyeti düşük kullanıcılara nasıl göründüğünü keşfedebilirsiniz.

&quot;Görme kusurlarını taklit et&quot; işlevi altında seçilen azaltılmış kontrast seçeneği.

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

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

Chromium sorunları: 1412719, 1412721.

Lighthouse 10

Lighthouse panelinde artık Lighthouse 10.0.1 sürümü kullanılıyor. Daha fazla bilgi için Lighthouse 10.0.1'deki yenilikler başlıklı makaleyi inceleyin.

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 > Ayarlar&#39;a dokunun. > Boş onay kutusu. 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'i kullanıyor. DevTools bu cihazı Ayarlar&#39;a dokunun. Ayarlar > Cihazlar'a ekledi.

Cihazlar listesinde Moto G Power.

Chromium sorunu: 772558.

İşlevsiz hizmet çalışanı getirme işleyicinizi kaldırmanızı isteyen bir konsol uyarısı

Chrome 112, gezinmeyi yavaşlatabilecek ancak bir amaca hizmet etmeyen iş yapmaz (işlem yok) hizmet çalışanı getirme işleyicilerini atlar. Web sitenizin Progresif Web Uygulaması olarak kabul edilmesi için artık bu tür işleyiciler gerekli değildir.

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

İşlevsiz bir getirme işleyici ve Console&#39;da ilgili uyarı.

Chromium sorunu: 1347319.

Diğer öne çıkan özellikler

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

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni Geliştirilenler veya Beta sürümünü kullanabilirsiniz. Bu önizleme kanalları, en son DevTools özelliklerine erişmenize, en yeni web platformu API'lerini test etmenize ve sitenizdeki sorunları kullanıcılarınızdan önce 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 başka herhangi bir konu hakkında konuşmak için aşağıdaki seçenekleri kullanın.

Geliştirici Araçları'ndaki yenilikler

DevTools'daki yenilikler serisinde ele alınan tüm konuların listesi.