Geliştirici Araçları ve Chrome 143'teki yenilikler

Geliştirici Araçları MCP sunucusu güncellemeleri

Geliştirici Araçları MCP sunucusu için çeşitli iyileştirmeler yaptık ve v0.11.0'ı yayınladık.

  • MCP istemcinizde (Gemini CLI, Cursor, ...) istem oluştururken artık Öğeler ve Ağ panellerinde seçilen öğelere ve ağ isteklerine referans verebilirsiniz.
  • list_console_messages aracı artık Sorunlar panelinde ortaya çıkan sorunları da içeriyor.
  • Yeni press_key aracı artık form öğeleriyle ilgili olmayan klavye etkinliklerinde hata ayıklamak için kullanılabiliyor.
  • Erişilebilirlik ağacı anlık görüntüleri artık diske kaydedilebilir
  • Artık sayfalar, önbellek isteğe bağlı olarak yoksayılarak yeniden yüklenebiliyor.
  • Mevcut bir Chrome profilini kullanmak için --user-data-dir flag'ini yapılandırma

Değişikliklerin ve hata düzeltmelerinin tam listesi için GitHub'daki herkese açık değişiklik günlüğüne göz atın. DevTools MCP sunucusu hakkında daha fazla bilgiyi duyuru blog yayınında bulabilirsiniz.

İyileştirilmiş iz paylaşımı

Performans panelindeki iz paylaşımı iletişim kutusu

Artık bir performans izini dışa aktarırken, gelecekteki kendiniz veya bir iş arkadaşınız için daha fazla hata ayıklamayı kolaylaştırmak amacıyla dışa aktarılan dosyaya ek veriler ekleyebilirsiniz. Artık aşağıdakileri eklemeyi seçebilirsiniz:

  • Kaynak içeriği: Tüm HTML, CSS ve JavaScript dosyalarının bir kopyası (uzantı komut dosyaları hariç)
  • Komut dosyası kaynak haritaları: Yazılan kodla eşlemelerdir. Orijinal işlev adlarını ve kaynak dosyaları görmenizi sağlar.

Neleri paylaşacağınız ve neleri gizli tutmanız gerektiği hakkında güncellenmiş belgelerimizden bilgi edinin.

Bu çalışmanın hayata geçirilmesinde işbirliği yapan ve bu konudaki ilk çalışmaları yürüten Microsoft'taki meslektaşlarımıza teşekkür ederiz.

@starting-style desteği

Öğeler paneli artık giriş animasyonları oluşturmak için gerekli olan yeni CSS @starting-style kuralının hata ayıklanmasını destekliyor.

Artık Öğeler ağacında alakalı öğelerin yanında starting-style süsleme öğesini görebilir, hapı tıklayarak öğenin starting-style durumunu değiştirebilir ve Stiller sekmesinde @starting-style bloğunu inceleyip hatalarını ayıklayabilirsiniz.

Görüntüleme için düzenleyici widget'ı: duvar

CSS Masonry düzeni ile deneme yapıyorsanız artık display: flex ve grid düzenlerinden tanıdığınız düzenleyici widget'ını kullanarak masonry düzenlerindeki çeşitli hizalama seçenekleri arasında hızlıca geçiş yapabilirsiniz.

Lighthouse 13

Lighthouse paneli artık Lighthouse 13'ü çalıştırıyor. Bu kilometre taşıyla birlikte, DevTools ve Lighthouse'taki performans analizlerini birleştirme çalışması tamamlanmış oldu.

Daha fazla bilgiyi duyuru blog yayınında bulabilirsiniz. Lighthouse'un ne için kullanıldığını ve DevTools'daki Performans paneline nasıl bağlandığını öğrenmek için Lighthouse: Web sitenizi optimize edin başlıklı makaleyi inceleyin.

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

Geliştirici Araçları'ndaki yenilikler

Geliştirici Araçları'ndaki yenilikler serisinde ele alınan her şeyin listesi.