DevLensPro

DevLensPro (devlens.pro), tarayıcıdaki bir kullanıcı arayüzü (UI) öğesine tıklayarak Claude Code ile doğrudan köprü kuran yenilikçi bir geliştirici aracıdır.

Geliştiricilerin web uygulamalarındaki sorunları manuel olarak tarif etmek yerine, doğrudan ilgili öğeyi işaret ederek Claude'un sorunu anlamasını ve düzeltmesini sağlar. Option+Click kısayoluyla seçilen elementin ekran görüntüsünü, CSS kodlarını, seçicilerini ve tüm teknik bağlamını MCP (Model Context Protocol) üzerinden Claude Code’a aktarır.

En büyük farkı: Manuel hata ayıklama yerine "tıkla-ve-gönder" mantığıyla çalışması, React bileşenlerinin kaynak kodundaki dosya konumunu otomatik algılaması ve Ralph gibi otonom araçlarla tam uyumlu çalışarak kodu kendi başına düzeltebilmesidir.

Temel Özellikler

Chrome uzantısı desteği Tarayıcıda gezinirken Option+Click ile herhangi bir UI elementini anında seçebilirsiniz. MCP protokolü entegrasyonu Yakalanan verileri Claude Code’a hem yerel hem de bulut modunda sorunsuz aktarır.

React bileşen algılama Seçilen elementin hangi React bileşenine ve hangi dosya dizinine ait olduğunu otomatik belirler.

Gelişmiş bağlam yakalama DOM bilgisi, hesaplanmış stiller (computed styles), konsol logları ve URL-proje eşlemesini tek seferde paketler.

Gerçek zamanlı senkronizasyon Tarayıcı ve terminaldeki Claude Code arasında WebSocket üzerinden anlık veri iletimi sağlar.

Gizlilik odaklı yerel mod Verilerin tamamen kendi makinenizde kalmasını sağlayan %100 yerel çalışma opsiyonu sunar.

Bulut (VPS) modu Tarayıcı yerel makinedeyken Claude Code'un uzak bir sunucuda (VPS) çalıştığı senaryoları destekler.

Otonom geliştirme desteği Ralph ile birlikte kullanıldığında, sadece bir tıklama ve kısa bir talimatla tam otonom kod yazımı sağlar.

Kimler İçin Uygun?

Claude Code (CLI) kullanan modern yazılım geliştiriciler Frontend hatalarını tespit etmek ve düzeltmek için vakit kaybetmek istemeyenler React tabanlı büyük projelerde dosya hiyerarşisinde kaybolanlar Görsel geri bildirimleri doğrudan kod değişikliğine dönüştürmek isteyen ekipler Yerel makinesinde veya uzak sunucuda (VPS) geliştirme yapan profesyoneller

Fiyatlandırma (2026 güncel)

Ücretsiz Plan: Kayıt olan herkese 5 görev (task) kredisi ile başlama imkanı tanır. Pro Plan: Aylık ≈ 9,99€ (Lansmana özel ilk 50 kullanıcı için %50 indirimli, normal fiyat 19,99€). Sınırsız görev, tam MCP desteği ve öncelikli destek içerir. Kurumsal Erişim: Google ile hızlı giriş desteği ve abonelik durumuna göre otomatik aktifleşen token tabanlı erişim sistemi. Ücretsiz Deneme: Kredi kartı eklemeden temel özellikleri ve ilk görevleri deneme şansı sunar.

Kullanım Bilgileri

Kurulum süreci oldukça hızlıdır; Chrome uzantısını kurup terminalden 'devlens install' komutuyla MCP yapılandırmasını tamamlamanız yeterlidir Tarayıcıda bir sorun gördüğünüzde Option+Click yapın, Claude Code terminalinde çözüm otomatik hazırlansın Hem Windows hem macOS hem de Linux tabanlı geliştirme ortamlarında terminal üzerinden kullanılabilir Arayüz ve komutlar tamamen İngilizcedir, geliştirici iş akışlarına (workflow) odaklanmıştır İnternet bağlantısı (MCP ve Claude iletişimi için) gereklidir Playwright doğrulama desteği ile yapılan değişikliklerin doğruluğunu test edebilir

Örnek Kullanımlar

Hızlı hata ayıklama → Bir butonun rengi mi yanlış? Üzerine tıkla, "Rengi markaya uygun yap" de, Claude kodu bulup 30 saniyede düzeltsin. Yeni özellik ekleme → Mevcut bir tabloya tıkla, "Buna bir dışa aktar butonu ekle" talimatını ver, Ralph tüm kod bloklarını oluştursun. Dosya bulma karmaşası → Karmaşık bir React projesinde hangi UI parçasının hangi dosyada olduğunu bulmak için üzerine tıklamanız yeterlidir. Zaman tasarrufu → Hataları uzun uzun tarif edip ekran görüntüsü atmak yerine, işaretleyerek raporlama süresini %80 oranında kısaltın. Proje Refactoring → Eski bir UI elementine tıklayarak "Bunu Tailwind CSS ile yeniden yaz" diyerek tüm stil dosyasını güncelletin.

DevLensPro, Claude Code kullanan yazılımcılar için "göz ve el" görevini üstlenen, hata ayıklama sürecini fiziksel bir etkileşime dönüştüren güçlü bir araçtır.