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

Sofia Emelianova
Sofia Emelianova
GitHub
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 yeniden oynatma kullanıcı arayüzünü açmak için yeni özel yeniden 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ştirmeyi düşünebilirsiniz: chrome.devtools.recorder API'yi keşfedin ve daha fazla uzantı örneğine 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 seçicileri gibi çalışır ancak gölge kökleri 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 Onay kutusu. Pierce'i işaretleyin. Gölge DOM'daki öğelerle etkileşiminizi kaydedin ve ilgili adımı inceleyin.

Kaydedici'nin pierce seçicileri kullanacak şekilde ayarlanıyor; Pierce seçici iş başında.

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ı edinin

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

İ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 > 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ı yararlı 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 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 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

Kodunuzun en önemli bölümlerine odaklanmanıza yardımcı olması için artık doğrudan Kaynaklar > Sayfa bölmesindeki dosya ağacından Yoksayma 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ından çıkarır.

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ını seçerseniz Yapılandır düğmesi Ayarlar&#39;a dokunun. Ayarlar > Listeyi Yoksay bölümüne yönlendirir. Yoksayılan kaynakları, Üç nokta 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.

Profiler&#39;ın üst kısmındaki desteği sonlandırma 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'yi ve crbug.com/1354548 adresini ziyaret edin.

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çenekle, web sitenizin düşük kontrast hassasiyeti olan 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ı'nda Lighthouse panelini kullanmayla ilgili temel bilgileri öğrenmek için Lighthouse: Web sitesi hızını optimize etme konusuna bakın.

Lighthouse > Ayarlar&#39;a dokunun. > Boş onay kutusu. 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 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ı 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.

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

Chromium sorunu: 1347319.

Çeşitli öne çıkan anlar

Bu sürümde yer alan 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şmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır 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.