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 gösterilen 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
  • Sayfalar artık isteğe bağlı olarak önbellek yok sayı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

Performans izini dışa aktarırken, gelecekteki kendiniz veya bir iş arkadaşınız için daha kolay hata ayıklama yapabilmek 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 için destek

Öğ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 bir starting-style süsleme 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ığı ve Geliştirici Araçları'ndaki Performans paneliyle nasıl bağlantı kurduğu hakkında bilgi edinmek 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

DevTools'taki Yenilikler serisinde ele alınan her şeyin listesi.