Ajanlar için Chrome Geliştirici Araçları, kodlama temsilcinizin veya sizin Geliştirici Araçları'nı standart kabuk komutları olarak çalıştırmanıza olanak tanıyan bir komut satırı arayüzü (CLI) içerir. Temsilciniz, araçları MCP sunucusu üzerinden dinamik olarak çağırmak yerine aynı işlemleri kabuk komutları olarak yazar ve bunları istediğiniz zaman yeniden çalıştırabileceğiniz bir komut dosyası halinde zincirleyebilir. Örneğin, temsilciniz aşağıdaki gibi bir senaryo oluşturabilir:
chrome-devtools new_page "https://example.com"
chrome-devtools take_snapshot 1
chrome-devtools fill 1 "1_4" "hello"
Hem MCP sunucusu hem de CLI aynı motora bağlanır: Chrome ile Chrome Geliştirici Araçları Protokolü (CDP) üzerinden iletişim kuran kalıcı bir arka plan arka plan programı. Aradaki fark, temsilcinizin bu motora nasıl ulaştığıdır:
- MCP sunucusu: Temsilciniz, JSON-RPC kullanarak standart giriş/çıkış üzerinden bağlanır ve her tarayıcı aracını etkileşimli bir işlev çağrısı olarak değerlendirir.
- CLI: Temsilciniz, kabuk komutlarını doğrudan aynı arka plan programında yürütür.
KSA'yı kullanarak şunları yapabilirsiniz:
- İş akışını kalıcı hale getirme: Temsilcinizin keşif amaçlı hata ayıklama oturumu sırasında gerçekleştirdiği işlemleri yeniden kullanılabilir bir komut dosyasına dönüştürün.
- Uygulama durumunu yeniden oluşturma: Tekrar hata ayıklamadan önce tarayıcıyı bilinen bir duruma geri getirmek için bir komut dosyasını yeniden çalıştırın.
- Toplu işlemler: Her adım arasında bir konuşma sırası olmadan bir dizi gezinme, giriş, emülasyon ve inceleme komutu çalıştırın.
- Yapay zeka aracısı olmadan komut dosyası çalıştırma: Oluşturulan komut dosyalarını, etkin bir LLM oturumu veya MCP istemcisi olmadan kabuk komut dosyalarını çalıştırabilen herhangi bir terminal, alt kabuk veya CI container'ından çalıştırın.
CLI ile MCP sunucusu arasında seçim yapma
CLI ile MCP sunucusu arasında seçim yapmak; maliyet, bağlam ve iş akışıyla ilgili mühendislik kararıdır.
- Bağlam penceresi maliyeti: MCP sunucusunu kaydettiğinizde her araç tanımı ve JSON şeması, her sohbette LLM'nizin sistem istemine eklenir. CLI becerisiyle temsilciniz yalnızca kompakt bir Markdown özeti yükler ve becerinin tamamını okuyup ihtiyaç duyduğu komutları oluşturmaya karar verdiğinde jeton maliyetini öder. Uzun ve çok turlu temsilci oturumlarında bu fark, hem maliyet hem de gecikme açısından artar.
- Keşif ve yürütme: MCP araçları, neyi incelemeniz gerektiğini henüz bilmediğiniz durumlarda dinamik ve keşfe dayalı hata ayıklama konusunda mükemmeldir. Temsilciniz mevcut tüm araçları önceden bildiği için hedefine ulaşmak amacıyla bu araçları kullanma olasılığı daha yüksektir. Yol zaten biliniyorsa CLI, yalnızca ihtiyacınız olan adımları çalıştırmanıza olanak tanır.
- Yeniden kullanılabilirlik: CLI komut dosyasını kaydedebilir, bir beceride yeniden kullanabilir veya temsilci döngüsü dışında manuel olarak çalıştırabilirsiniz. MCP aracı çağrılarıyla bunu yapamazsınız.
| MCP sunucusunu şu durumlarda kullan: | KSA'yı şu durumlarda kullanın: |
|---|---|
| Bilinmeyen bir sorunu araştırıyorsunuz ve tüm araç kutusuna ihtiyacınız var. | Adımları zaten biliyorsunuz ve bunları güvenilir bir şekilde tekrarlamak istiyorsunuz. |
| Canlı, dinamik problem çözme ve derin tarayıcı incelemesi istiyorsanız. | Jeton açısından verimli temsilci becerileri veya terminal tabanlı otomasyon istiyorsanız. |
| Temsilciniz, MCP destekli bir IDE veya istemcide çalışır. | Ortamınız MCP istemcilerini desteklemiyor. |
KSA'yı kullanırken aşağıdakileri göz önünde bulundurun:
- Araç kapsamı: CLI, kabuk tabanlı otomasyon için ajanlar için Chrome Geliştirici Araçları araçlarının çoğunu destekler. Komutların tam listesi için CLI beceri referansı'na bakın.
- Dolaylı başlatma: Arka plan sunucusu ilk kullanımda otomatik olarak başlatılır. Her komuttan önce
start,statusveyastopkomutunu çalıştırmanız gerekmez. - Kalıcı durum: Tarayıcı durumu, komutlar arasında kalıcıdır. Bu nedenle, bir komutta açtığınız sayfa, açıkça kapatılmadığı sürece bir sonraki komutta da kullanılabilir.
- Sayfa kimlikleri ve öğe UID'leri: Çoğu komut, ilk bağımsız değişken olarak bir sayfa kimliği alır. Bulmak için
chrome-devtools list_pageskomutunu, etkileşimde bulunmak istediğiniz öğelerin UID'lerini almak içinchrome-devtools take_snapshotkomutunu çalıştırın. - Çıkış biçimi: Çıkış, varsayılan olarak Markdown benzeri düz metindir. Sonuçları diğer komut dosyalarında veya CI ardışık düzenlerinde kullanmak istiyorsanız
--output-format=jsonparametresini iletin. - Dosya erişimi: CLI, varsayılan olarak dosya kaydetme parametreleri ve
upload_fileiçin tam dosya sistemi erişimine sahiptir. Dosya erişimini işletim sisteminin geçici diziniyle kısıtlamak için--allowUnrestrictedPaths=falseparametresini iletin. - CI'da Lighthouse: CLI'dan
lighthouse_auditaracını çalıştırabilirsiniz ancak CI'da yalnızca Lighthouse puanlarına ihtiyacınız varsa bağımsız Lighthouse CLI ve GitHub İşlemleri daha hafif bir seçenektir. - Tarayıcı otomasyonu komut dosyalarından daha basit soyutlama: JavaScript veya TypeScript'te tam Puppeteer ya da Playwright komut dosyaları yazmanın aksine, Geliştirici Araçları CLI sınırlı ve yüksek düzeyde hedeflenmiş bir API yüzeyi sağlar. Bu kabuk söz dizimini okumak ve yönetmek insanlar için daha kolaydır. Ayrıca, düşük seviyeli modeller bile bu söz dizimini halüsinasyon olmadan güvenilir bir şekilde oluşturabilir.
Ön koşullar
CLI'yı kullanmadan önce aşağıdakilere sahip olduğunuzdan emin olun:
- Ajanlar için Chrome Geliştirici Araçları yüklü: Başlangıç kılavuzundaki adımları uygulayın. Temsilciye özel eklentiler ve uzantılar (ör. Gemini CLI uzantısı), MCP sunucusunun yanı sıra temsilci becerilerini de içerir.
- Kabuğunuzda kullanılabilen CLI: Yükleme, tek seferlik bir adımdır ve normal temsilci iş akışının bir parçası değildir. Yükleme referansına bakın.
chrome-devtools-clibecerisi (Ajanlar için Chrome Geliştirici Araçları ile yüklenir): Bu beceri, temsilcinize CLI ile kabuk komut dosyaları yazmayı veya kabuk komutları çalıştırmayı öğretir.
Komut yapısı
Komutlar chrome-devtools <tool> [arguments] [flags] kalıbını izler.
Zorunlu bağımsız değişkenler konuma dayalıdır ve isteğe bağlı bağımsız değişkenler işaretleri kullanır. Ayrıntılar için herhangi bir komutta --help kullanın.
Örneğin:
chrome-devtools new_page "https://example.com" # Open a page
chrome-devtools list_pages # Find the page ID
chrome-devtools take_snapshot 1 # Get element UIDs for page 1
chrome-devtools fill 1 "1_4" "hello" # Fill an input
chrome-devtools click 1 "1_7" --includeSnapshot true
chrome-devtools list_console_messages 1 --types error
chrome-devtools take_screenshot 1 --filePath "result.png"
Chrome Geliştirici Araçları CLI'nın kullanım alanları
Temsilcinize, her oturumda aynı tarayıcı akışını yeniden çözmek yerine, daha önce çözdüğü adımları bir komut dosyası olarak kaydetmesini söyleyin.
Hata ayıklama oturumunu yeniden kullanılabilir bir komut dosyası olarak kaydetme
MCP üzerinden yapılan keşif amaçlı bir hata ayıklama oturumundan sonra, aynı sorunun tekrar ortaya çıkmayacağını garanti edemezsiniz. Bir dahaki sefere yeniden oluşturma adımlarını tekrar açıklamak yerine, temsilcinizden az önce yürüttüğü akışı yazmasını isteyin.
Örnek istem:
Please write a chrome-devtools CLI script for this user flow, and save it as test.sh.
Örnek temsilci yürütme: Temsilciniz, oturum sırasında gerçekleştirdiği gezinme, giriş ve inceleme adımlarını inceler ve bunları bir chrome-devtools komut dizisine (ör. new_page, take_snapshot, fill, click ve list_console_messages) dönüştürür. Komut dosyasını test.sh olarak kaydeder. Bu alanda bir sonraki hata ayıklama işleminizde, temsilcinizi komut dosyasına yönlendirerek aynı duruma tekrar ulaşabilir veya manuel olarak hata ayıklamak için komut dosyasını aracı döngüsü dışında çalıştırabilirsiniz.
Araştırmadan önce uygulama durumunu yeniden oluşturma
Çok adımlı ödeme veya filtrelenmiş gösterge tablosu gibi karmaşık durumlar, temsilcinin her seferinde sohbet yoluyla yeniden oluşturması açısından maliyetlidir. Yeni bir inceleme için başlangıç noktası olarak kayıtlı bir komut dosyasını kullanın.
Örnek istem:
Run ./scripts/checkout-flow.sh to get the browser into the payment step, then check why the "Pay now" button stays disabled after I select Google Pay.
Örnek temsilci yürütme: Temsilciniz, ödeme sayfasına giden, adres formunu dolduran ve bir kargo seçeneği belirleyen komut dosyasını çalıştırır. Tarayıcı durumu komutlar arasında korunduğundan temsilciniz, düğmenin durumunu ve ödeme seçiciye eklenen etkinlik işleyicileri incelemek için aynı sayfada take_snapshot ve evaluate_script kullanır.
Görüntü alanlarında toplu görsel kontroller
Bir düzen değişikliğini birkaç ekran boyutunda doğrulamak tekrarlanan bir işlemdir ve genellikle manuel olarak yapılır. Temsilcinizden, emülasyon ayarlarını uygulayan ve her biri için tek bir çalıştırmada kanıt yakalayan bir komut dosyası isteyin.
Örnek istem:
Write a chrome-devtools CLI script that opens http://localhost:3000/pricing, captures a full-page screenshot at 375x667, 768x1024, and 1920x1080, and saves them to ./screenshots with the viewport size in the filename.
Örnek temsilci yürütme: Temsilciniz, her görüntü alanı için chrome-devtools emulate 1 --viewport "<size>" ve ardından chrome-devtools
take_screenshot 1 --fullPage true --filePath "./screenshots/pricing-<size>.png" çağrısı yapan bir döngü yazar. Her CSS değişikliğinden sonra görüşme açmadan komut dosyasını yeniden çalıştırabilirsiniz.
MCP istemcisinin bulunmadığı bir akışta duman testi yapma
CI container'ları veya kilitli kurumsal kurulumlar gibi bazı ortamlar MCP istemcilerini desteklemez. Hemen hemen her terminal, alt kabuk, CI container'ı ve aracı çerçevesi, standart kabuk komut dosyalarını çalıştırmayı ve stdout'u okumayı destekler. Bu nedenle CLI, bu yerlerdeki basit kontroller için uygundur.
Örnek istem:
Create a shell script that opens the sign-up page on the staging URL passed as the first argument, submits the form with test data, and exits with a non-zero code if any console errors are logged. Use --output-format=json so the script can parse the result.
Örnek temsilci yürütme: Temsilciniz new_page, take_snapshot, fill ve click kullanan bir komut dosyası yazar, ardından list_console_messages 1
--types error --output-format=json komutunu çağırır ve çıkış koduna karar vermek için JSON çıkışını ayrıştırır.
İş akışını basit bir beceri olarak paketleme
Bir akış, projeler veya ekip arkadaşları arasında faydalıysa temsilciniz komut dosyasını bir beceriye sarmalayabilir. Bu, Geliştirici Araçları CLI becerisidir: Temsilcinizin tüm araçlar için önceden jeton maliyeti ödemeden belirli tarayıcı komutlarını çalıştırmasına olanak tanıyan hafif bir referanstır.
Örnek istem:
Turn ./scripts/checkout-flow.sh into a skill named "reproduce-checkout" with a short description of when to use it, so I can invoke it in future sessions.
Örnek temsilci yürütme: Temsilciniz, bir ad, becerinin ne zaman geçerli olduğuna dair tek satırlık bir açıklama ve komut dosyasına referans veren talimatlar içeren bir SKILL.md oluşturur. Sonraki oturumlarda temsilci, yalnızca görev açıklamasıyla eşleştiğinde becerinin tamamını okur.
Sonraki adımlar
- CLI komutlarının ve işaretlerinin tam listesi için CLI beceri referansına bakın.
- Temel sunucuyu (görünmez mod, kanallar, deneysel kategoriler) yapılandırmak için Yapılandırma bölümüne bakın.