Chrome 144'te ekip, Chrome DevTools MCP sunucusuna çok beklenen bir özelliği, yeni İstek koşulları panelini ve yazı tiplerinde ve benimsenen stil sayfalarında hata ayıklamaya yönelik iyileştirmeleri ekledi.
2025 boyunca kullanıma sunduğumuz dikkat çekici özelliklerin listesini burada sonlandırıyoruz. Kaçırdığınız var mı? Ardından, aşağıdaki öne çıkan özellikleri inceleyin veya Geçmiş DevTools'taki Yenilikler sürümlerimize göz atın.
Geliştirici Araçları MCP sunucusu güncellemeleri
DevTools MCP sunucusu için çeşitli düzeltmeler yaptık ve v0.12.1'i yayınladık. Bu sürümde, mevcut bir tarayıcı oturumunu yeniden kullanmanızı sağlayan önemli bir yeni özellik olan otomatik bağlantı özelliği kullanıma sunuluyor. Otomatik bağlantı sayesinde Chrome'da kendi kendinize hata ayıklamaya başlayabilir, ardından kaldığınız yerden devam etmek için DevTools MCP'yi aynı Chrome örneğine yönlendirebilirsiniz.
Geliştirici Araçları MCP için otomatik bağlantı hakkında daha fazla bilgiyi ilgili blog yayınında bulabilirsiniz. Değişikliklerin ve hata düzeltmelerinin tam listesi için GitHub'daki herkese açık değişiklik günlüğüne bakın.
Bireysel ağ isteği sınırlaması
Ağ isteği engelleme panelinin adı İstek koşulları olarak değiştirildi. Bu panel, engelleme isteklerinin yanı sıra artık bağımsız istekleri sınırlandırmanıza da olanak tanıyor.
Paneli ⋮ > Diğer Araçlar > İstek Koşulları'ndan açın. İstek engellemeyi etkinleştirmek için Engellemeyi ve kısıtlamayı etkinleştir onay kutusunu işaretleyin. Yeni bir metin kalıbı eklemek için + düğmesini tıklayın. Tüm kuralları silmek için simgesini tıklayın.
Ağ isteklerinin sıklığını nasıl sınırlayacağınızı güncellenen dokümanlardan öğrenebilirsiniz.
@font-face ve @font-feature-values kurallarını düzenleme
@font-face ve @font-feature-values artık Stiller panelinde gösteriliyor
ve buradan düzenlenebiliyor.
Nesne panelindeki benimsenen stil sayfaları
Öğeler paneli artık gölge kökleri ve belge kökleri altında kullanılan stil sayfalarını gösteriyor. Bu sayede, oluşturulmuş stil sayfalarıyla çalışan kullanıcılar, öğelerini etkileyen stil sayfalarını daha kolay bulabilir ve stillerde hata ayıklayabilir. Özellikle de stiller beklenmedik bir şekilde uygulanmadığında bu özellikten yararlanabilirler.
DevTools 2025'teki yenilikler
Yapay zeka yenilikleri
Console insights ile başlayan yapay zeka yenilikleri, bağlama duyarlı yapay zeka destekli hata ayıklama için ana merkez olan Yapay Zeka Desteği paneliyle birlikte Chrome DevTools'un ayrılmaz bir parçası haline geldi. Konsol ve Kaynaklar panellerindeki kod önerileri ve Performans izlerinizdeki Gemini'dan gelen otomatik ek açıklamalar sayesinde DevTools, iş akışlarınızı kolaylaştırmak için kapsamlı bir yapay zeka destekli araç seti sunar.
- Uçtan uca stil düzeltmeleri: Gemini'dan CSS sorunlarını düzeltmesini isteyin ve Workspaces ile birlikte bu değişiklikleri doğrudan diskteki kaynak dosyalarınıza geri kaydedin.
- Performans hakkında soru sorma: Artık yapay zeka yardımıyla tam performans izi hakkında konuşabilir, herhangi bir performans analizini ayrıntılı olarak inceleyebilir veya Gemini'ı kullanarak izlere açıklama ekleyebilirsiniz.
- Görsel hata ayıklama: Yapay zeka yardım paneli çok formatlı hale geldi. Bu sayede, Gemini'ın görsel hataları anlamasına ve hata ayıklamanıza yardımcı olmak için resim yükleyebilir veya ekran görüntüsü alabilirsiniz.
Performans
Performans hata ayıklamayı daha az karmaşık ve daha uygulanabilir hale getirmek için Performans panelini yeniden tasarladık. Örneğin, kaydedilen bir izleme artık performans sorunlarını daha hızlı tespit etmenize ve izlemelerde daha hızlı gezinmenize yardımcı olan seçilmiş analizlerle birlikte gelir. Diğer iyileştirmeler şunlardır:
- Uygulanabilir analizler: Performans analizleri ile ilgili kapsamlı bir dizi özellik kullanıma sunduk. Bu özellikler, aşamaya göre en büyük içerik boyama süresi, düzen kaymasına neden olan öğeler ve belge isteği gecikmesi gibi belirli sorunları tanımlar.
- Gerçek dünya bağlamı: Alan verilerini ve CrUX verilerini doğrudan Performans paneline entegre ettik. Böylece laboratuvar sonuçlarını gerçek kullanıcı deneyimleriyle doğrulayabilirsiniz.
- Çerçeve bağlamı: Angular v20 ve React v19.2 artık Extensibility API'yi kullanıyor. Bileşen ağacınızın doğrudan görünümü sayesinde ana iş parçacığı darboğazlarını anlamak kolaylaşır. Angular ve React ekibiyle iş ortaklığımızdan bahsetmek istiyoruz.
- Geliştirilmiş iş birliği: İzleri paylaşmak kolaylaştı. İzlere açıklama ekleyebilir, kaynak içeriğini ve kaynak haritalarını dışa aktarabilirsiniz. Böylece, iş arkadaşlarınız veya gelecekteki siz, ihtiyaç duyduğunuz tüm bağlam bilgilerine sahip olursunuz.
Web Platformu
DevTools, gelişen web platformuna ayak uydurarak en yeni CSS spesifikasyonları için özel araçlar ekledi ve yerleşik özelliklerde geliştirici deneyimini iyileştirdi.
Karmaşık CSS değişken zincirleri için ayrıntılı izleme, özellik ipuçlarında Baseline kullanılabilirliği ekledik ve kısa süre önce @starting-style kuralını kullanan karmaşık giriş animasyonları için hata ayıklama desteğini ve yeni display: masonry düzeni için görsel düzenleyiciyi kullanıma sunduk.
Ö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 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ı veya Geliştirici Araçları İpuçları YouTube videoları'na yorum bırakın.