Yayınlanma tarihi: 19 Mayıs 2026
Yapay zeka kodlama araçları kod yazma konusunda inanılmaz derecede güçlü olsa da genellikle kodun yürütülmesinden bağımsızdır. Karmaşık bir web uygulaması oluşturabilirler ancak davranışını gözlemleyemez veya çıktısını canlı bir tarayıcıda inceleyemezler.
Ajanlar için Chrome Geliştirici Araçları, kodlama aracınıza kodu gerçek zamanlı olarak doğrulama, hatalarını ayıklama ve optimize etme için gereken görünürlüğü sağlar. Birkaç ay önce bu özelliği ilk kez göstermiştik. Şimdi ise aracıların Chrome Geliştirme Araçları'nın kararlı 1.0 sürümü olarak kullanıma sunulduğunu duyurmaktan heyecan duyuyoruz.
Aracınızı tarayıcıya bağlama
Temsilciler için Chrome Geliştirici Araçları, temsilcinizin sitenizi gerçek bir kullanıcı gibi deneyimlemesine olanak tanır. Bu kararlı sürüm, sizin ve temsilcinizin Chrome ile etkileşim kurması için çeşitli yöntemler içerir:
- Model Context Protocol (MCP) sunucusu: Büyük Dil Modelleri'ni (LLM'ler) Geliştirici Araçları hata ayıklama özelliklerine bağlayan bir sunucu.
- Komut satırı arayüzü (KSA): İşlemleri komut dosyalarında toplu olarak gerçekleştirmesine olanak tanıyan, jeton açısından verimli bir alternatiftir.
- Ajan becerileri: Ajanınıza erişilebilirlik veya performans hata ayıklama gibi görevler için belirli araçları nasıl ve ne zaman kullanacağını öğreten uzman talimatlarıdır.
Otomatik olarak hata ayıklama, emülasyon ve denetleme
1.0 sürümüyle birlikte, kodlama aracınız artık daha önce manuel olarak yapılan gelişmiş hata ayıklama görevlerini gerçekleştirebilir.
Kalite denetimlerini otomatikleştirme
Temsilciniz artık web sitesi kalitesini değerlendirmek için Lighthouse denetimleri çalıştırabilir. Erişilebilirlik, SEO, en iyi uygulamalar ve bağımsız gezinmeyle ilgili sorunları belirleyebilir. Bu, çalışma zamanını anlayan bir linter'a sahip olmaya benzer. Kalite kontrolü olarak kullanılan bu özellik, kodlama aracınızı üretim aşamasına ulaşmadan önce kritik engelleyici sorunları yakalayan bir uzmana dönüştürür.
Gerçek dünyadaki kullanıcı deneyimlerini taklit etme
Temsilciniz, emülasyon araçlarını kullanarak bir sitenin çeşitli cihazlarda veya farklı konumlarda nasıl göründüğünü ve performans gösterdiğini test etmek için temsilciler için geliştirici araçlarını kullanabilir. Pencereleri yeniden boyutlandırabilir, coğrafi konumları simüle edebilir ve gerçek dünya koşullarını taklit etmek için ağ ve CPU hızlarını sınırlayabilir. Bu sayede, tarayıcınızı manuel olarak yeniden boyutlandırmanıza gerek kalmadan temsilciniz hamburger menüler gibi mobil cihazlara özgü davranışları test edebilir.
Chrome uzantılarını geliştirme ve hatalarını ayıklama
Ayrıca, temsilcinizin yalnızca Chrome uzantıları geliştirmenize yardımcı olmasına değil, aynı zamanda bu uzantılarda hata ayıklamasına da izin verebilirsiniz. Temsilciniz, uzantı işlemlerini doğrudan yükleyebilir, yeniden yükleyebilir ve tetikleyebilir. Bu, geliştirme sırasında sıkça yapılan "kaydet ve yenile" döngüsünü otomatikleştirmenize yardımcı olur. Ayrıca, daha karmaşık tarayıcı kurulumlarındaki hataları düzeltmenize yardımcı olmak için arka plan komut dosyalarını ve uzantı sayfalarını da inceleyebilir.
WebMCP araçlarında hata ayıklama ve test etme
Bu yeni API'yi uygulamanıza yardımcı olmak için WebMCP (Web Model Context Protocol) deneme sürecine ayrıntılı görünürlük de kazandırıyoruz.
Aracınızın, DOM'da gezinme planı çıkarmak için sinyallere güvenmesi yerine, WebMCP kullanarak sunduğunuz yapılandırılmış araçlarla doğrudan etkileşim kurabilir. Bu sayede, bu araçları geliştirmek, test etmek ve hatalarını ayıklamak kolaylaşır. Aracınız, bu araçları listeleyebilir, programatik olarak çağırabilir ve doğruluklarını gerçek zamanlı olarak doğrulayabilir. Bu, WebMCP desteğini sitenize ekleme ve test etme sürecini kolaylaştırır.
Bellek sızıntılarını tespit etme ve hatalarını ayıklama
Ayrıca, bellek analizi için özel araçlar da ekledik. Aracınız artık ayrılmış DOM düğümleri gibi bellek sızıntılarını belirlemek için yığın anlık görüntüleri alabilir. Özel bellek sızıntısı hata ayıklama becerilerini kullanarak uygulamanızı yalın ve hızlı tutmanıza yardımcı olan bir performans uzmanı gibi hareket eder.
Oturumları otomatik bağlanma özelliğiyle devretme
Temsilcinin kendi korumalı alan tarayıcı örneğini açması yerine (temsilciler için Geliştirici Araçları'nın genellikle temsilcilere tarayıcıya erişim verdiği yöntem) mevcut tarayıcı bağlamınızı bir temsilciyle paylaşabilirsiniz. Bu özellik, kimliği doğrulanmış bir kontrol paneli gibi oturum açmayı gerektiren şeylerde hata ayıklamak için idealdir. Bu gibi durumlarda, her şeyi yeniden doğrulamanıza gerek kalmadan yapay zeka aracısının teknik incelemeyi devralmasını istersiniz.
Üçüncü taraf geliştirici araçlarıyla dahili durumu kullanıma sunma
Üçüncü taraf geliştirici araçları, web uygulamanızın dahili durumu ve bileşen ayrıntılarını doğrudan yapay zeka aracılarıyla paylaşmasına olanak tanır. Bu araçlar, genellikle standart analizden gizlenen verilere erişim sağlayarak temsilcilere karmaşık mantığı anlamaları için gereken bağlamı sunar. Bu sayede, uygulamanın tarayıcıdaki gerçek davranışına dayalı olarak daha doğru hata ayıklama önerileri elde edilir.
Başlayın
npm kullanarak kararlı sürümü yükleyebilir veya doğrudan tercih ettiğiniz aracınızda yapılandırabilirsiniz:
Antigravity
Temsilciler için Chrome Geliştirici Araçları, Antigravity 2.0 ile birlikte önceden paketlenmiş olarak gelir. Tarayıcı alt aracısı ile hemen kullanmaya başlayabilirsiniz. Aşağıdakilere benzer bir eğik çizgi komutu kullanmayı deneyin:
/browser Navigate to the Google homepage
Uzman aracı becerilerine erişmek için ilk kurulumun Google ile geliştirme adımında veya uygulama ayarlarında DevTools eklentisini yüklemenizi öneririz. Daha fazla bilgi için Antigravity Browser Subagent belgelerine göz atın.
Gemini CLI
MCP paketini ve becerilerini uzantı olarak yüklemek için aşağıdaki komutu kullanın:
$ gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp
Claude Code
Chrome Geliştirici Araçları'nı Claude Code eklentisi olarak yüklemek için Claude Code'da aşağıdaki eğik çizgi komutlarını kullanın. Pazar yeri kayıt defterini ekleyin:
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
Eklentiyi pazar yeri kayıt defterinden yükleyin:
/plugin install chrome-devtools-mcp@chrome-devtools-plugins
Daha ayrıntılı kılavuzlar ve örnek istemler için Chrome Geliştirici Araçları'nı kullanma dokümanımıza göz atın. Ayrıca GitHub'daki kaynak kodunu da inceleyebilirsiniz.