Uzantıyı Chrome'a ekleyin
- Chrome Web Mağazası'nı açın ve "DevSuite Pro" uzantısını arayın.
- "Chrome'a Ekle"ye tıklayın ve ardından açılır pencerede "Uzantı ekle"ye tıklayarak onaylayın.
Doğrudan tarayıcınızda web sayfalarını incelemek, ölçmek, yakalamak, analiz etmek ve tasarlamak için 64'dan fazla güçlü araç.
Başlamak basittir. Uzantıyı yükleyin, herhangi bir web sayfasını açın ve pop-up'tan veya yüzen panelden 64'dan fazla geliştirici aracına erişin. Yapılandırma gerekmez.
DevSuite Pro, web sayfası inceleme, ölçme, tasarım ve analiz için 64'dan fazla geliştirici aracı sunar. Doğrudan tarayıcınıza yerleştirilmiş güçlü özelliklerle iş akışınızı hızlandırın.
Herhangi bir öğenin üzerine gelerek CSS stillerini anında görün ve canlı olarak düzenleyin; böylece tasarımları gerçek zamanlı olarak hata ayıklamak ve ayarlamak kolaylaşır.
Daha fazla bilgi →Özelliklerini, boyutlarını, boşluklarını, yazı tiplerini ve renklerini incelemek için herhangi bir öğeye tıklayın. Tarayıcının DevTools'unu açmadan sayfa yapısını anında anlayın.
Daha fazla bilgi →Mesafeleri ölçün, hizalamayı kontrol edin ve tasarımlarınızın mükemmel şekilde hizalandığından emin olmak için herhangi bir web sayfasına piksel hassasiyetinde cetveller ve kılavuzlar ekleyin.
Daha fazla bilgi →Sayfadaki herhangi bir öğeden renkleri seçin ve HEX, RGB veya HSL değerlerini tek bir tıklamayla panonuza kopyalayın.
Daha fazla bilgi →Herhangi bir web sayfasında tüm sayfanın veya görünen alanın ekran görüntülerini alın ve anında indirin; tasarım paylaşmak ve hataları bildirmek için idealdir.
Daha fazla bilgi →Tarayıcıdan ayrılmadan duyarlı tasarımı test etmek için bir web sayfasını farklı ekran boyutlarında ve cihaz çözünürlüklerinde önizleyin.
Daha fazla bilgi →CSS Stillerini Gerçek Zamanlı İnceleyin ve Düzenleyin
CSS Denetçisi, bir web sayfasındaki herhangi bir öğenin üzerine gelerek hesaplanmış CSS özelliklerini anında görmenizi…
CSS Animasyonlarını Gerçek Zamanlı Ayıklayın ve Kontrol Edin
Animasyon Denetçisi, herhangi bir web sayfasında çalışan her CSS animasyonu ve geçişi üzerinde tam kontrol sağlar.
Herhangi Bir Öğenin CSS'ini Tailwind Utility Sınıflarına Dönüştürün
Tailwind Olarak Kopyala, görsel tasarım ile Tailwind CSS kodu arasındaki boşluğu kapatır.
Herhangi Bir Sayfanın Tam Düzen Yapısını Görselleştirin
Yalnızca Anahat Modu, bir web sayfasındaki her HTML öğesine renk kodlu kenarlık anahatları ekleyerek sayfanın düzen…
Herhangi Bir Öğe için Kategorize Edilmiş Tailwind Sınıfları Alın
Tailwind Yardımcısı, bir web sayfasındaki herhangi bir öğeyi inceler ve eşleşen Tailwind CSS utility sınıflarının…
Herhangi Bir Web Sayfası Üzerinde Görsel HTML Ağaç Görünümü
Sayfa Anahatlayıcısı, herhangi bir web sayfasının tam DOM yapısını görsel bir ağaç kaplaması olarak — doğrudan sayfanın…
Herhangi Bir Sitede React, Vue, Angular ve Svelte Bileşenlerini Algıla
Bileşen Dedektörü, bir web sitesinin hangi ön uç çerçevesini kullandığını otomatik olarak tanımlar ve tam bileşen…
Bir Sayfadaki Herhangi Bir Öğeyi Sürükle Bırak ile Yeniden Konumlandır
Öğe Taşı, bir web sayfasındaki herhangi bir öğeye tıklamanıza ve fiziksel olarak yeni bir konuma sürüklemenize olanak tanır.
Herhangi Bir Öğenin Görünürlüğünü Kaldırın veya Değiştirin
Öğeyi Sil/Gizle, bir web sayfasındaki herhangi bir öğeyi tek tıkla kaldırmanıza veya geçici olarak gizlemenize olanak tanır.
Herhangi Bir Öğeyi HTML, CSS veya JSON Olarak Dışa Aktarın
Öğeyi Dışa Aktar, bir web sayfasındaki herhangi bir öğeye tıklayarak üç formatta tam yapısını dışa aktarmanıza olanak…
Herhangi Bir Öğeden React, Vue ve Svelte Bileşenleri Oluşturun
Bileşen Kodunu Kopyala, bir web sayfasındaki herhangi bir öğeyi seçtiğiniz çerçeve için temiz, üretime hazır bir…
Görünür Alan veya Tam Sayfa Ekran Görüntülerini Yakalayın
Ekran Görüntüsü, herhangi bir web sayfasının yüksek kaliteli görüntülerini iki modda yakalar: görünür alan (tarayıcı…
Herhangi Bir Web Sayfasındaki Tüm Resimleri Görüntüleyin, Seçin ve İndirin
Resimleri Çıkar, herhangi bir web sayfasını tarar ve her resmi gezilebilir bir galeride sunar.
Herhangi Bir Sayfadaki Her SVG'yi Bulun, Önizleyin ve İndirin
SVG Yakalayıcı bir web sayfasındaki her SVG'yi keşfeder — satır içi SVG öğeleri, harici .svg dosya referansları, SVG…
Sayfadaki Herhangi Bir Resmi Kendi Resminizle Değiştirin
Resim Değiştirici, bir web sayfasındaki herhangi bir resme tıklayıp onu kendi resminizle değiştirmenize olanak tanır…
Herhangi Bir URL veya Metin için Anında QR Kodları Oluşturun
QR Kod Oluşturucu, mevcut sayfa URL'si için otomatik olarak taranabilir bir QR kod oluşturur — veya girdiğiniz herhangi…
Herhangi Bir Sayfada Piksel Mükemmel Cetveller, Kılavuzlar ve Ölçümler
Sayfa Cetveli, herhangi bir web sayfasına Photoshop tarzı cetveller ve sürüklenebilir kılavuz çizgileri ekler.
Birden Fazla Cihaz Görüntü Alanını Aynı Anda Önizleyin
Duyarlı Görüntüleyici, mevcut web sayfasının birden fazla cihaz görüntü alanı boyutunda yan yana oluşturulduğunu…
Herhangi İki Öğe Arasındaki Tam Piksel Mesafelerini Ölçün
Mesafeyi Ölç, bir web sayfasındaki herhangi iki öğeye tıklayarak aralarındaki tam piksel mesafesini anında görmenizi…
Her Yığınlama Bağlamını ve Z-Index Katmanını Görselleştirin
Z-Index Denetçisi bir web sayfasındaki her öğenin tam yığınlama sırasını ortaya çıkarır.
Görsel Kaplamalarla CSS Grid ve Flexbox Düzenlerini İnceleyin
Grid/Flex Görselleştirici, bir web sayfasındaki her CSS Grid ve Flexbox kapsayıcısını algılar ve düzen yapılarını…
Herhangi Bir Sayfada Kullanıcı Dikkat Sıcak Noktalarını Simüle Edin
Isı Haritası Simülatörü, yerleşik UX araştırma kalıplarına dayanarak herhangi bir web sayfası için tahmini dikkat ısı…
Önbelleği, Çerezleri, localStorage ve sessionStorage'ı Seçici Temizleyin
Tarama Verilerini Temizle, geliştiricilere mevcut site için belirli türde tarama verilerini — önbellek, çerezler…
Herhangi Bir Web Sitesinin Arkasındaki Her Teknolojiyi Algılayın
Site Teknolojileri herhangi bir web sitesini tarar ve tam teknoloji yığınını tanımlar — ön uç çerçeveleri (React, Vue…
Kapsamlı SEO Denetimi: Meta Etiketler, Başlıklar, OpenGraph ve Daha Fazlası
SEO Denetçisi herhangi bir web sayfasının anında, kapsamlı bir SEO denetimini sağlar.
Otomatik WCAG Denetimi: Kontrast, Alt Metin, ARIA ve Daha Fazlası
Erişilebilirlik Denetçisi, herhangi bir web sayfasında otomatik WCAG 2.1 Level AA kontrolleri çalıştırır ve…
Herhangi Bir Sayfadaki Herhangi Bir Metne Anında Düzenlemek için Tıklayın
Canlı Metin Editörü, bir web sayfasındaki her metin öğesini tek tıkla düzenlenebilir hale getirir.
Google Fonts'tan Herhangi Bir Yazı Tipini Global veya Öğe Başına Değiştirin
Yazı Tipi Değiştirici, bir web sayfasındaki herhangi bir yazı tipini Google Fonts kütüphanesinden farklı biriyle…
Herhangi Bir Web Sayfasında Kullanılan Her Yazı Tipini Keşfedin
Tüm Yazı Tiplerini Listele, herhangi bir web sayfasını tarar ve kullanımdaki her yazı tipi ailesinin eksiksiz bir…
HEX, RGB ve HSL Renk Değerleri için Hassas Damlalık
Renk Seçici, bir web sayfasındaki herhangi bir öğeden — metin, arka planlar, resimler, gradyanlar veya herhangi bir…
Herhangi Bir Web Sayfasından Tam Renk Paletini Çıkarın
Renk Paleti bir web sayfasındaki her öğeyi tarar ve kullanılan tam renk setini çıkarır — metin ve arka planlardan…
Herhangi Bir Web Sitesine Anında Karanlık Mod Uygulayın
Karanlık Modu Zorla, karanlık mod sunmayan herhangi bir web sitesine karanlık bir renk şeması uygular — veya bir…
Sekme Başına JavaScript'i Anında Etkinleştirin veya Devre Dışı Bırakın
JavaScript'i Aç/Kapa, mevcut tarayıcı sekmesi için JavaScript yürütmesini tek tıkla devre dışı bırakır veya yeniden…
Herhangi Bir Alan için Çerezleri Görüntüleyin, Düzenleyin, Ekleyin ve Silin
Çerez Düzenleyici, mevcut alan için tüm çerezleri temiz, sıralanabilir bir tabloda görüntüler.
DevTools Olmadan Konsol Çıktısını Yüzen Bir Panelde Görüntüleyin
Konsol Kaydedici tüm konsol çıktısını (console.log, console.warn, console.error, console.info) yakalar ve sayfada…
Tüm Ağ İsteklerini Gerçek Zamanlı İzleyin
Ağ İzleyicisi, mevcut sayfanın yaptığı her ağ isteğini yakalar ve görüntüler — XHR/Fetch API çağrıları, script…
localStorage ve sessionStorage'ı Görüntüleyin, Düzenleyin, Ekleyin ve Silin
Yerel Depolama Düzenleyici, mevcut site için localStorage ve sessionStorage girişlerini yönetmek için temiz bir tablo arayüzü sağlar.
Bir Sayfadaki Her Bağlantıyı Tarayın ve Bozuk Olanları Bulun
Bozuk Bağlantı Denetçisi, mevcut sayfadaki her bağlantıyı — anchor href'leri, resim kaynakları, script kaynakları ve…
Anında Performans Paneli: Yükleme Süresi, DOM İstatistikleri ve Kaynaklar
Sayfa Performansı herhangi bir web sayfasının anında performans genel bakışını sağlar — yükleme zamanlama metrikleri…
JSON'u Tek Tıkla Biçimlendirin, Küçültün ve Doğrulayın
JSON Biçimlendirici, JSON'u doğrudan tarayıcınızda düzgün yazdırır, küçültür ve doğrular.
Dizeleri Anında Base64'e Kodlayın ve Base64'ten Çözün
Base64 Kodlayıcı/Çözücü, metni doğrudan tarayıcınızda Base64'e ve Base64'ü tekrar metne dönüştürür.
URL Dizelerini Tek Tıkla Kodlayın ve Çözün
URL Kodlayıcı/Çözücü, URL dizelerini yüzde kodlanmış biçime ve bu biçimden geri dönüştürür.
HTML Varlıklarını Anında Kodlayın ve Çözün
HTML Varlık Kodlayıcı, özel karakterleri (< > & " ') HTML varlık karşılıklarına (< > & " ') ve geri…
Kodlar İçin Karakter Kaçırma ve Geri Döndürme
Backslash Escape/Unescape, metinleri kaçış dizili formlarına (\n \t \r \" \' \\ ve Unicode kaçışları) dönüştürür veya…
Resimleri Base64 Veri URI'lerine Dönüştürün
Resim ↔ Base64; resim dosyalarını (PNG, JPG, SVG, WebP, GIF) Base64 kodlu veri URI'lerine ve tam tersine dönüştürür.
JSON Web Token'ları Anında Çözümleyin
JWT Debugger; JSON Web Token'ları çözümleyip inceler; başlık (header), veri (payload) ve imza (signature) kısımlarını…
Toplu UUID v4 Tanımlayıcıları Oluşturun
UUID Oluşturucu, tarayıcının kripto API'sini kullanarak kriptografik olarak güçlü UUID v4 tanımlayıcıları üretir.
MD5, SHA-1, SHA-256, SHA-384, SHA-512 Hash'leri Hesaplayın
Hash Oluşturucu, herhangi bir metin girişinin kriptografik hash'lerini (MD5, SHA-1, SHA-256, SHA-384, SHA-512) hesaplar.
Kriptografik Olarak Güçlü Parolalar Oluşturun
Parola Oluşturucu, tarayıcının kriptografik rastgelelik API'sini kullanarak güçlü ve rastgele parolalar üretir.
Eşleşme Vurgulama ile Düzenli İfadeleri Canlı Test Edin
Regex Tester, düzenli ifadeleri test metni üzerinde gerçek zamanlı olarak değerlendirir.
Unix, ISO ve Okunabilir Tarihleri Dönüştürün
Zaman Damgası Dönüştürücü; Unix zaman damgaları (saniye, milisaniye, mikrosaniye, nanosaniye), ISO 8601, RFC 2822 ve…
İki Metin Bloğunu Satır Satır Karşılaştırın
Karşılaştırma Aracı, iki metin bloğunu kıyaslar ve eklenen, silinen ve değişmeyen satırları renk kodlu bir çıktı ile vurgular.
Herhangi İki Renk Arasındaki WCAG Kontrast Oranını Kontrol Edin
Kontrast Kontrolü (Contrast Checker), iki renk arasındaki WCAG 2.1 kontrast oranını hesaplar ve hem normal hem de büyük…
HEX, RGB, HSL, HSV ve OKLCH Formatlarını Anında Dönüştürün
Renk Formatı Dönüştürücü; HEX, RGB, HSL, HSV ve OKLCH arasındaki tüm renkleri birbirine çevirir.
Herhangi Bir Görüntüden Baskın Paleti Çıkarın
Görüntüden Renk Ayıklayıcı, herhangi bir görüntü dosyasını (sürükle-bırak, yapıştır veya yükle) analiz eder ve yüzde…
Herhangi Bir Öğe İçin CSS Seçicileri ve XPath Alın
DOM Yol Bulucu, benzersiz CSS seçicisini, kısa seçicisini, XPath'ini ve yapıştırmaya hazır querySelector kod…
Kaynaklar Arası İstekleri Test Edin ve CORS Başlıklarını İnceleyin
CORS Kontrolü, sitenizden gelen bir kaynaklar arası (cross-origin) isteğe hedef sunucu tarafından izin verilip…
WebSocket Çerçevelerini Gerçek Zamanlı Yakalayın
WebSocket Inspector, sayfadaki tüm bağlantılar üzerinden gönderilen ve alınan her WebSocket çerçevesini (frame) yakalar.
Sayfadaki Kırık Görselleri Anında Tarayın
Kırık Görsel Bulucu, sayfadaki her <img> etiketini ve CSS background-image değerini tarar, yükleme hatalarını (404'ler…
Formları Gerçekçi Test Verileriyle Otomatik Doldurun
Form Doldurucu (Form Filler), sayfadaki tüm görünür form alanlarını isim, e-posta, telefon, adres, şifre gibi gerçekçi…
CSV ve JSON Arasında Çift Yönlü Dönüşüm Yapın
CSV ↔ JSON Dönüştürücü, en yaygın iki tablo formatı arasındaki tam döngüyü yönetir.
Söz Dizimi Vurgulama ile XML Formatlayın, Doğrulayın ve Görüntüleyin
XML Formatlayıcı; XML verilerini tarayıcı içinde güzelleştirir (pretty-print), küçültür (minify) ve doğrular.
SQL Sorgularını Güzelleştirin ve Formatlayın
SQL Formatlayıcı; küçültülmüş veya karmaşık SQL verilerini okunabilir, girintili sorgulara dönüştürür.
Web Sayfalarını Temiz PDF'ler Olarak Kaydedin
PDF'e Dönüştür, mevcut web sayfasını tarayıcının yazdırma iletişim kutusu aracılığıyla PDF olarak kaydeder; işlemden…
İş akışınız için en iyi planı seçin. Ücretsiz başlayın, istediğiniz zaman yükseltin.
DevSuite Pro uzantısının özellikleri ve kullanımı hakkında yaygın sorular. Bir sorunuz varsa, cevabı aşağıda olabilir.
Chrome Web Mağazası'nı ziyaret edin, "DevSuite Pro"yu arayın, "Chrome'a Ekle"ye tıklayın ve "Uzantı Ekle"yi seçerek onaylayın. Yüklendikten sonra uzantı simgesi tarayıcınızın araç çubuğunda görünecektir. 64'dan fazla geliştirici aracına anında erişmek için simgeye tıklayın.
Ücretsiz araçlar (43+) lisans olmaksızın herkes tarafından kullanılabilir. Pro araçlar altın renkli bir PRO rozetine sahiptir ve kullanılabilmesi için etkin bir Pro lisansı gerektirir. Açılır pencerede hangi araçların ücretsiz veya pro olduğunu görebilirsiniz; ücretsiz araçlarda kilit simgesi yoktur, pro araçlar ise lisansınızı etkinleştirene kadar biraz sönük görünür.
Bazı web sitelerinde, tarayıcı uzantılarının belirli eylemlerini engelleyen katı İçerik Güvenliği Politikaları (CSP) bulunur. Bu durum özellikle bankacılık ve devlet web sitelerinde yaygındır. Ayrıca, Chrome'un dahili sayfaları (chrome://) uzantıların içerik komut dosyalarını çalıştırmasına izin vermez.
Hayır. Öğeyi Taşı, Canlı Metin Düzenleyici, Öğeyi Sil/Gizle ve CSS Inspector gibi araçlarla yapılan tüm değişiklikler geçicidir. Sadece o anda tarayıcınızda gördüğünüzü etkilerler. Sayfayı yenilemek her şeyi orijinal durumuna döndürecektir.
DevSuite Pro pop-up'ını açın, sağ üst köşedeki Ayarlar simgesine tıklayın. Lisans bölümüne inin, lisans anahtarınızı giriş alanına yapıştırın ve Etkinleştir'e tıklayın. Anahtar geçerliyse rozet ÜCRETSİZ'den PRO'ya dönecek ve tüm pro araçların kilidi anında açılacaktır.
Ayarlar'a gidip farklı bir kenar çubuğu konumu seçerek (Üst, Alt, Sol veya Sağ) paneli taşıyabilirsiniz. Ayrıca Ayarlar'da "Paneli sayfalarda göster" anahtarını kapatarak veya istediğiniz zaman Ctrl+Shift+X tuşlarına basarak paneli tamamen gizleyebilirsiniz.
Hayır. DevSuite Pro tarama verilerinizin hiçbirini toplamaz, izlemez veya iletmez. Tüm ayarlar tarayıcınızda yerel olarak saklanır. Tek dış istek, lisans anahtarınızın sunucumuzda doğrulanması için lisans anahtarı etkinleştirme sırasında yapılır.
Evet! DevSuite Pro hem Chrome Web Mağazası'nda hem de Firefox Eklentileri'nde mevcuttur. Chrome, Edge, Brave ve diğer Chromium tabanlı tarayıcıların yanı sıra Firefox'ta da çalışır.