Çalışma zamanı analizlerini kullanma: Chrome Geliştirici Araçları'nda aracıların kullanabileceği üçüncü taraf geliştirici araçları

Wolfgang Beyer

Yayınlanma tarihi: 18 Haziran 2026

Modern bir web uygulamasında etkili bir şekilde hata ayıklamak için yapay zeka aracısının kaynak kodunuzdan daha fazlasına ihtiyacı vardır. Uygulamanın çalışma zamanında nasıl davrandığını anlaması gerekir.

Aracılar için Chrome Geliştirici Araçları'nda üçüncü taraf geliştirici araçlarını kullanıma sunmaktan heyecan duyuyoruz. Artık uygulamalarınız ve çerçeveleriniz, yapay zeka aracılarına kendi iç durumlarına doğrudan bakma olanağı sunabilir. Bu sayede temsilciler, ekranda olanlarla perde arkasında çalışan mantık arasında bağlantı kurabilir.

Hedef: Statik analizin ötesinde

Modern web geliştirme, soyutlamalar üzerine kuruludur: Angular, React veya Vue gibi çerçeveler; WordPress ya da Shopify gibi içerik yönetim sistemi platformları ve CSS, 3D grafikler ya da animasyonlar için kitaplıklar. Geliştirici Araçları, son oluşturulan DOM'a doğrudan erişebilse de bir uygulamanın"gerçeği" genellikle çerçevelerin dahili durumunda (bileşen hiyerarşileri, JavaScript sinyalleri veya arka uç durumu) bulunur.

Üçüncü taraf geliştirici araçlarıyla amacımız, herhangi bir kitaplığın bu zengin ve uygulanabilir bağlamı yapay zeka aracılarıyla paylaşmasını sağlamaktır. Bu sayede, daha önce "görünmez" olan sorunları (ör. aşağıdaki sorunlar) hata ayıklama aracıyla inceleyebilirler:

• Bileşen hiyerarşileri: Sayfadaki bir DOM öğesini doğrudan karşılık gelen çerçeve bileşenine ve dahili duruma eşleyin.
• Dahili durum denetimi: Sunucu tarafı durumuna veya veritabanı içeriğine doğrudan hata ayıklama oturumundan erişin.

İşleyiş şekli: Discovery API

Üçüncü taraf geliştirici araçları, etkinliğe dayalı bir JavaScript API'si kullanır. Chrome DevTools MCP sunucusu, global window nesnesinde devtoolstooldiscovery etkinliği göndererek bu araçları keşfeder. devtoolstooldiscovery etkinliği, her sayfa gezinme işleminde veya seçilen sayfa değiştirildiğinde otomatik olarak gönderilir ve list_3p_developer_tools MCP aracı kullanılarak açıkça gönderilebilir.

Kendi araçlarınızı uygulama

Kitaplığınızdaki veya uygulamanızdaki araçları kullanıma sunmak için bu keşif etkinliğini dinlemeniz ve ToolGroup ile yanıt vermeniz gerekir.

window.addEventListener('devtoolstooldiscovery', (event) => {
  event.respondWith({
    name: "My Library Tools",
    description: "Tools for inspecting internal library state",
    tools: [
      {
        name: "getInternalState",
        description: "Returns the current internal state of the framework.",
        inputSchema: {
          type: "object",
          properties: {
            componentId: { type: "string" }
          }
        },
        execute: async (input) => {
          // Access your framework's internal registry
          return myFramework.getState(input.componentId);
        }
      }
    ]
  });
});

Uygulama şu şekildedir:

1. Şemayı tanımlayın: Aracınızın beklediği girişi tanımlamak için JSON şemasını kullanın.
2. Mantığı yönetin: Sayfanın bağlamında çalışan ve serileştirilebilir veriler döndüren bir execute işlevi uygulayın.
3. DOM öğeleri: Serileştirilemeyen nesneler, sayfa ile geliştirici araçları arasında aracı için gönderilemez. DOM öğeleri istisnadır. Araçlarınız DOM öğeleri döndürdüğünde, aracılar için Geliştirici Araçları bunları take_snapshot aracı tarafından kullanılan aynı UID'lere otomatik olarak eşler. Bu sayede temsilciniz, tüm sayfa öğeleriyle (bir çerçeveden veya sayfa anlık görüntüsünden gelmeleri fark etmeksizin) aynı şekilde etkileşimde bulunabilir.

MCP'yi kullanarak araçlarla etkileşim kurma

Araçlarınızı kaydettikten sonra kodlama temsilciniz, temsilcilere yönelik geliştirici araçları aracılığıyla bu araçlarla etkileşimde bulunabilir. list_3p_developer_tools MCP aracı, sayfada bulunan üçüncü taraf araçlarının açıklamalarını döndürür. Ayrıca, seçilen sayfa değiştiğinde (örneğin, gezinme işleminden sonra) DevTools, MCP aracı yanıtına kullanılabilir araçların bir listesini ekler.

Bu araçları kullanmak için temsilciniz execute_3p_developer_tool'ı arar. DevTools, giriş parametrelerinin aracın tanımıyla eşleştiğinden emin olmak için bunları otomatik olarak doğrular.

Ayrıca evaluate_script MCP aracını kullanarak da araçları çağırabilirsiniz. Aracınız, Geliştirici Araçları'nın sayfada yürüttüğü bir JavaScript snippet'i sağlar. Bu snippet, üçüncü taraf geliştirici araçlarını çağırabilir ve bunların çıkışını daha fazla hesaplama için hemen kullanabilir.

evaluate_script, karmaşık hata ayıklama işlemleri için etkili bir yöntemdir. Çünkü bu yöntem, temsilcilerin şunları yapmasına olanak tanır:

• Oluşturma işlemleri: Birden fazla adımı tek bir yürütmede birleştirin.
• Serileştirilemeyen değerleri işleme: Çerçeveye özgü nesneleri veya sinyalleri doğrudan sayfa bağlamında işleyin.
• Performansı optimize etme: Serileştirme ek yükünü en aza indirin ve aracı ile tarayıcı arasında birden fazla gidiş dönüşten kaçının.

Erken başarı: Angular entegrasyonu

İki üçüncü taraf geliştirici aracını uygulayan Angular ekibiyle işbirliği yaptık:

1. Sinyal Grafiği aracı: Temsilcilere durum ile görünüm arasındaki ilişkileri görselleştirme olanağı sunar. Bu sayede, sonsuz döngülere veya başarısız güncellemelere neden olan bağımlılıkları belirlemelerine yardımcı olur.
2. Bağımlılık Ekleme (DI) Grafiği aracı: Öğeleri ekleyenleri gösterir. Bu sayede temsilciler, bir hizmetin tam olarak nerede sağlandığını veya nerede eksik olduğunu görebilir. Angular'ın DI grafiği yalnızca çalışma zamanında oluşturulduğundan, yalnızca statik analizle sağlayıcı hatalarında hata ayıklama yapılamaz.

React ekibi, üçüncü taraf geliştirici araçlarıyla denemeler yapmaya da başladı.

Geleceğin yapay zeka destekli hata ayıklama araçlarını bizimle birlikte geliştirin

Bu deneysel özellik, 0.25.0 sürümünden itibaren aracıların Chrome Geliştirici Araçları'nda kullanılabilir. Bu özelliği etkinleştirmek için --categoryExperimentalThirdParty komut satırı işaretini kullanın.

Bir çerçeve, kitaplık veya araç yönetiyorsanız ve kodlama aracı için hata ayıklama deneyimini iyileştirmek istiyorsanız işbirliği yapmaktan memnuniyet duyarız:

• Dokümanları inceleyin: GitHub'daki Teknik Kılavuz.
• Bize ulaşın: Bu API'leri yinelemek ve yapay zeka destekli web hata ayıklamanın geleceğini tanımlamaya yardımcı olmak için iş ortakları arıyoruz. Bizimle iletişime geçmek için GitHub deposunda sorun oluşturabilirsiniz.

Gelin, birlikte geleceğin web geliştirme sürecini inşa edelim.