Kodlama Aracınızın, Chrome Geliştirici Araçları MCP ile tarayıcı oturumunuzda hata ayıklamasına izin verme

Yayınlanma tarihi: 11 Aralık 2025

Kullanıcılarımızın uzun süredir istediği bir özelliği Chrome Geliştirici Araçları MCP sunucusuna ekledik: Kodlama aracıları artık doğrudan etkin bir tarayıcı oturumuna bağlanabilecek.

Bu geliştirme sayesinde kodlama aracıları:

  1. Mevcut bir tarayıcı oturumunu yeniden kullanma: Kodlama aracınızın, oturum açma işlemiyle korunan bir sorunu düzeltmesini istediğinizi düşünün. Kodlama aracınız artık ek oturum açma işlemi gerektirmeden mevcut tarama oturumunuza doğrudan erişebilir.
  2. Etkin hata ayıklama oturumlarına erişme: Kodlama aracıları artık DevTools kullanıcı arayüzünde etkin bir hata ayıklama oturumuna erişebilir. Örneğin, Chrome Geliştirici Araçları ağ panelinde başarısız bir ağ isteği keşfettiğinizde isteği seçin ve kodlama aracınızdan bu isteği incelemesini isteyin. Aynı durum, Nesneler panelinde seçilen öğeler için de geçerlidir. Manuel ve yapay zeka destekli hata ayıklama arasında sorunsuz geçiş yapabilme özelliğinden heyecan duyuyoruz.

Etkinliği keşfedin:

Otomatik bağlantı özelliği, Chrome DevTools MCP'nin bir Chrome örneğine bağlanmak için kullandığı mevcut yöntemlere eklenmiştir. Şunları yapmaya devam edebileceğinizi unutmayın:

  • Chrome'u Chrome Geliştirici Araçları MCP sunucusuna özel bir kullanıcı profiliyle (geçerli varsayılan) çalıştırın.
  • Uzak hata ayıklama bağlantı noktası olan çalışan bir Chrome örneğine bağlanın.
  • Her örnek geçici bir profilde çalışacak şekilde birden fazla Chrome örneğini yalıtılmış olarak çalıştırın.

İşleyiş şekli

Chrome M145'e (şu anda Canary'de) Chrome Geliştirici Araçları MCP sunucusunun uzaktan hata ayıklama bağlantısı isteğinde bulunmasına olanak tanıyan yeni bir özellik ekledik. Bu yeni akış, Chrome'un mevcut uzaktan hata ayıklama özelliklerinin üzerine kurulmuştur. Varsayılan olarak, Chrome'da uzaktan hata ayıklama bağlantıları devre dışıdır. Geliştiricilerin önce chrome://inspect#remote-debugging bölümüne giderek özelliği açıkça etkinleştirmesi gerekir.

Chrome Geliştirici Araçları MCP sunucusu --autoConnect seçeneğiyle yapılandırıldığında, MCP sunucusu etkin bir Chrome örneğine bağlanır ve uzaktan hata ayıklama oturumu isteğinde bulunur. Kötü niyetli kişiler tarafından kötüye kullanımı önlemek için Chrome DevTools MCP sunucusu her uzaktan hata ayıklama oturumu istediğinde Chrome, kullanıcıya bir iletişim kutusu gösterir ve uzaktan hata ayıklama oturumuna izin vermek için kullanıcının iznini ister. Ayrıca, bir hata ayıklama oturumu etkin durumdayken Chrome, üst kısımda "Chrome otomatik test yazılımı tarafından kontrol ediliyor" banner'ını gösterir.

Uzaktan hata ayıklama akışı: Önce uzaktan hata ayıklama özelliklerini etkinleştirin. Ardından, uzaktan hata ayıklama bağlantısı isteğini onaylayın. Hata ayıklama oturumu, banner metniyle belirtilir.
Chrome'daki yeni uzaktan hata ayıklama akışı ve kullanıcı arayüzü.

Başlayın

Yeni uzaktan hata ayıklama özelliklerini kullanmak için. Önce Chrome'da uzaktan hata ayıklamayı etkinleştirmeniz, ardından Chrome Geliştirici Araçları MCP sunucusunu yeni otomatik bağlantı özelliğini kullanacak şekilde yapılandırmanız gerekir.

1. adım: Chrome'da uzaktan hata ayıklamayı ayarlayın

Chrome'da uzaktan hata ayıklamayı ayarlamak için aşağıdakileri yapın:

  1. Uzaktan hata ayıklamayı etkinleştirmek için chrome://inspect/#remote-debugging simgesine gidin.
  2. Gelen hata ayıklama bağlantılarına izin vermek veya bunları engellemek için iletişim kutusu kullanıcı arayüzünü takip edin.
Chrome'da uzaktan hata ayıklamanın nasıl etkinleştirileceğini gösteren ekran görüntüsü
Müşterilerin uzaktan hata ayıklama bağlantısı isteyebilmesi için uzaktan hata ayıklamanın etkinleştirilmesi gerekir.

2. adım: Chrome DevTools MCP sunucusunu, çalışan bir Chrome örneğine otomatik olarak bağlanacak şekilde yapılandırın

chrome-devtools-mcp sunucusunu çalışan Chrome örneğine bağlamak için MCP sunucusu kümesi için --autoConnect komut satırı bağımsız değişkenini kullanın.

Aşağıdaki kod snippet'i, gemini-cli için örnek bir yapılandırmadır:

{
   "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--autoConnect",
        "--channel=canary"
      ]
    }
  }
}

3. adım: Ayarlarınızı test edin

Şimdi gemini-cli'ı açıp aşağıdaki istemi çalıştırın:

Check the performance of https://developers.chrome.com

Chrome DevTools MCP sunucusu, çalışan Chrome örneğinize bağlanmaya çalışır. Kullanıcı izni isteyen bir iletişim kutusu gösterir:

Kullanıcıdan uzaktan hata ayıklama oturumu etkinleştirmesini isteyen Chrome iletişim kutusu.
Chrome, uzaktan hata ayıklama oturumu başlatmak için kullanıcı izni istiyor.

İzin ver'i tıkladığınızda Chrome Geliştirici Araçları MCP sunucusu developers.chrome.com adresini açar ve performans izlemesi yapar.

Talimatların tamamı için GitHub'daki README dosyasını inceleyin.

Kodlama aracınızın hata ayıklama oturumunuzu devralmasına izin verme

Canlı bir Chrome örneğine bağlanabilmek, otomasyon ve manuel kontrol arasında seçim yapmanız gerekmediği anlamına gelir. Geliştirici Araçları'nı kendiniz kullanabilir veya bir hata ayıklama görevini kodlama aracınıza devredebilirsiniz. Web sitenizde bir sorunla karşılaşırsanız soruna neden olan öğeyi belirlemek için Geliştirici Araçları'nı açıp inceleyebilirsiniz. Kodlama aracınızın sorunu düzeltmesini istiyorsanız artık Chrome Geliştirici Araçları MCP Sunucusu ile bunu yapabilirsiniz. Öğeler panelinde öğeyi seçip kodlama aracısından sorunu araştırmasını isteyebilirsiniz.

Aynı durum Ağ paneli için de geçerlidir. Bir ağ isteği seçip kodlama aracınızdan bunu incelemesini isteyebilirsiniz.

Ancak bu sadece ilk adım. Chrome Geliştirici Araçları MCP Sunucusu aracılığıyla kodlama aracılarına giderek daha fazla panel verisi sunmayı planlıyoruz. Bizi izlemeye devam edin!