Siteni 11 cihazda aynı anda test et: ücretsiz Chrome eklentisi Responsive Studio

Neden yaptım?

Bir siteyi teslim etmeden önce telefonda, tablette, masaüstünde tek tek bakarsın. Geliştirici araçlarında cihaz seç, kaydır, bir sonrakine geç; her CSS değişikliğinden sonra aynı döngü baştan. Hem yorar hem de bir şey mutlaka gözden kaçar.

Responsive Studio bunu tek ekrana indiriyor: açık olan siteyi telefon, tablet, dizüstü ve masaüstü boyutlarında aynı anda, yan yana ve canlı gösteriyor.

Kimin işine yarar?

• Web tasarımcısı: tasarım her kırılım noktasında oturuyor mu, tek bakışta.
• Front-end geliştirici: CSS değişikliği hangi ekranı bozdu, anında.
• Ajans ve serbest çalışan: müşteriye teslimden önce hızlı kontrol.
• SEO ve içerik ekibi: meta etiketleri, paylaşım önizlemesi, hız ölçümü.
• Site sahibi: sitem telefonda nasıl görünüyor diye merak eden herkes.

191 cihaz, tek ekranda

iPhone 5'ten iPhone 17 Pro Max'e, Galaxy, Pixel, Xiaomi, iPad, katlanabilir telefonlar, MacBook, Surface, 4K ve ultra geniş monitörler, hatta Apple Watch, TV ve Steam Deck: 191 hazır cihaz.

Açılışta en çok kullanılan 11 ekran birden gelir:

• Telefon: 320, 360, 393 ve 440 piksel genişliğinde dört telefon
• Tablet: bir Android tablet ve bir iPad
• Windows: HD dizüstü (1366), %125 ölçekli Full HD (1536), 16:10 dizüstü ve en yaygın masaüstü (1920)
• macOS: MacBook Air

Hazır setler: Popüler, Windows, Mobil, Tablet, Masaüstü, Tailwind, Bootstrap, Material, Apple, Katlanabilir, Uç durumlar. Açık ekranları kendi setin olarak kaydeder, stüdyo açılınca hangi setin geleceğini Ayarlar'dan seçersin.

• Cihaz arama: ada, markaya ya da ölçüye göre ara; Enter ilk sonucu ekler. 500x700 yazıp Enter'a basarsan o boyutta ekran hemen eklenir.
• Özel cihaz: kendi genişlik, yükseklik, piksel oranı ve dokunmatik ayarınla.
• Sık kullanılanlar: en çok kullandığın cihazları yıldızla, üstte dursun.
• Ekran başına: gizle ya da kaldır, tek tek ya da hepsini birden çevir (R), kenarından sürükleyip boyutlandır (ölçü canlı görünür), başlığından tutup sırala (sıra kaydedilir).
• Taşma uyarısı: sayfa yana taşıyorsa ekranın başlığında işaret çıkar.

Küçük ama önemli: Windows bilgisayarların çoğu ekranı %125 ölçekle kullanır. Yani 1920×1080 ekranda siten aslında 1536 piksel genişliğinde görünür. Masaüstü ölçüleri ekran çözünürlüğüne değil, tarayıcının gerçekten gösterdiği alana göre seçildi.

Bir ekranda yap, hepsinde olsun

• Kaydırma: bir ekranda kaydır, hepsi aynı oranda ya da aynı piksel kadar kaysın.
• Tıklama: menüyü aç, düğmeye bas; her ekranda aynısı olur.
• Form ve klavye: formu bir kez doldur, hepsine yazılsın.
• Hover: fareyle üstüne geldiğin eleman bütün ekranlarda vurgulanır.
• Sayfa geçişi: bir bağlantıya tıklayınca bütün ekranlar yeni sayfaya geçer.
• Ayrı ayrı kapatma: kaydırma, tıklama, yazma, hover ve gezinme senkronu tek tek açılıp kapatılır.
• Tek ekran modu: ekranın başlığındaki "Yalnızca bu ekranda çalış" düğmesiyle senkron geçici durur; o ekranda kaydırdığın, tıkladığın, gezdiğin sayfalar ötekileri etkilemez. Esc ile çıkarsın (odak sitenin içindeyken bile).

Chrome'daki oturumun korunur: yönetim paneli, üye sayfası, sepet gibi giriş isteyen sayfalar da giriş yapmış hâlde açılır. localhost, yerel ağ adresleri ve bilgisayarındaki HTML dosyaları da çalışır. Kendini çerçeve içinde göstermeyi reddeden siteler de açılır; açılamayan ekranda nedenini anlatan bir uyarı bandı çıkar. Geri, ileri, yenile ve istersen belirli aralıklarla otomatik yenileme bütün ekranlarda birlikte.

Parmak modu: telefon gerçekten telefon gibi

Masaüstünde mobil görünümü test ederken en büyük yanılgı, farenin hover efektlerinin çalışmaya devam etmesi. Gerçek telefonda hover yok; hover ile açılan menün telefonda hiç açılmayabilir. Parmak modu bunu gerçeğe uygun taklit eder:

• Mobil ekranlarda :hover stilleri uygulanmaz.
• Fare hareketiyle çalışan JavaScript efektleri çalışmaz.
• Site kendini gerçekten dokunmatik ekranda sanır: pointer: coarse, hover: none gerçek değer döndürür, dokunma olayları üretilir, çoklu dokunma bildirilir.
• Basılı tutup sürükleyince sayfa kayar, bırakınca ivmeyle devam eder. Görselin ya da bağlantının üstünden başlasan bile nesne imlece yapışmaz, sayfa kayar.
• İmleç parmak ucuna döner; hangi ekranın dokunmatik olduğu bir bakışta belli.
• Hover durumlarını incelemek için mod tek tıkla kapanır; bir sitede beklenmedik davranış olursa her ekranın ayrıntılı dökümü alınır.

Koyu mod ve erişilebilirlik tercihleri

Sitenin koyu mod tasarımını bütün ekranlarda aynı anda görürsün, bilgisayarının ayarını değiştirmeden. Koyu modu açıp kapatmak ekranları yeniden yüklemez; doldurduğun form ve kaydırma konumu yerinde kalır. "Azaltılmış hareket" (animasyonlar gerçekten kapanıyor mu), "yüksek kontrast" ve "zorunlu renkler" tercihleri de test edilir. Görsel filtreler: gri ton, bulanık (göz kısma testi), yüksek kontrast, ters renk.

İnceleme araçları

Araç	Ne işe yarar
Kontur	Her elemanın sınırını renkli çizgiyle gösterir
Taşma	Yatay kaydırmaya sebep olan elemanı kırmızıyla işaretler, kaç piksel taştığını söyler
Izgara	Kolon ızgarası, taban çizgisi ya da kare ızgara bindirir
Denetçi	Bir elemana tıkla, aynı eleman bütün ekranlarda vurgulansın; ölçü ve stil alt panelde
Cetvel	Artı kılavuzlar, eleman ölçüsü, sürükleyerek piksel mesafesi
Tasarım bindirmesi	Figma ya da Photoshop PNG'sini ekranın üstüne koyar; opaklık ve fark moduyla karşılaştırır, ok tuşlarıyla hizalanır
Damlalık	Ekrandan renk seçip kodunu kopyalar

Raporlar

• Kırılım noktaları: sitenin CSS'indeki bütün media query'leri bulur, tek tıkla o genişlikte ekran ekler.
• Bağlantı denetimi: kırık (404) bağlantıları işaretler.
• Görsel denetimi: kırık ve gereğinden büyük indirilen görselleri bulur.
• Fontlar: kullanılan yazı tiplerini ve ağırlıklarını listeler.
• Web Vitals: LCP, CLS, INP, FCP ve TTFB, her ekran için ayrı.
• Meta etiketleri: title, description, canonical, robots, Open Graph, Twitter kartı, hreflang, başlık yapısı.
• Konsol: bütün ekranlardaki hata ve uyarılar tek listede, tekrarlar sayılı.

Erişilebilirlik denetimleri

• Tam denetim: WCAG 2.0, 2.1 ve 2.2 AA kurallarına göre otomatik tarama (axe-core), ihlaller önem sırasıyla.
• Landmark ve ARIA: ekran okuyucunun gezindiği bölgeler ve eksikleri.
• Renk kontrastı: okunması zor metinleri listeler.
• Başlık yapısı: atlanan başlık seviyelerini ve birden fazla H1'i yakalar.
• Alt metin: eksik ya da anlamsız görsel açıklamalarını bulur.
• Tab sırası: klavyeyle gezinme sırasını gösterir.
• Dokunma hedefleri: 44×44 pikselden küçük düğmeleri bulur.
• Görme simülasyonu: protanopi, döteranopi, tritanopi, protanomali, döteranomali, akromatopsi.
• Metin büyütme: yazıyı %125-%200 büyütüp tasarım bozuluyor mu gösterir.

Paylaşım önizlemesi

Sayfan Google'da, X'te, Facebook'ta, LinkedIn'de, WhatsApp'ta, Slack'te, Discord'da, Telegram'da ve iMessage'da paylaşılınca nasıl görüneceğini gerçek kart görünümüyle gösterir, eksik etiketi söyler. Favicon, manifest, uygulama ikonları, tema rengi, service worker ve HTTPS'i de kontrol eder.

Ekran görüntüsü ve kayıt

• Tam sayfa ekran görüntüsü: tek ekran ya da hepsi.
• ZIP: her cihazın görüntüsü ayrı dosya.
• Kontakt föy: bütün cihazlar tek etiketli görselde; müşteri sunumu için birebir.
• Panoya kopyala: görüntü doğrudan yapıştırılabilir.
• Ekran kaydı: stüdyodaki çalışmanı WebM video olarak kaydeder, ek izin gerekmez.

Geliştirici araçları

• Canlı CSS: yazdığın CSS bütün ekranlara anında uygulanır, sayfa yenilense de kalır.
• Canlı JS: yazdığın JavaScript bütün ekranlarda bir kez çalışır.
• CSS değişkenleri: sitenin renk ve tasarım değişkenleri, değerleriyle.
• Depolama ve çerezler: localStorage, sessionStorage ve çerezleri gör, sil.
• Özel HTTP başlıkları: Authorization, API anahtarı gibi başlıklar yalnız test ettiğin siteye gider; Basic auth için kullanıcı adı ve paroladan doğru başlığı kendisi üretir.
• Tarayıcı profilleri: Chrome, Edge, Firefox, Safari, Opera, Samsung Internet, WebView kimliğiyle açar.

Çalışma düzeni

• Ekranları ızgara, tek sıra, tek sütun ya da ortalanmış diz; aradaki boşluğu ayarla.
• Otomatik sığdır (Ctrl+0), elle yakınlaştır ya da ekran başına ölçek ver.
• Telefon kasası, çentik, Dynamic Island ve ana ekran çubuğu görünümü.
• Adres, cihazlar, yerleşim ve ayarları proje adıyla çalışma alanı olarak kaydet, geri yükle.
• Bütün ayar ve setleri JSON olarak dışa aktar, başka bilgisayara taşı.
• Stüdyo kapanıp açılınca kaldığın yerden devam eder; bir sekmede değişen ayar öteki stüdyo sekmelerine de geçer.
• Bütün kayıtlı veriyi iki adımlı onayla sıfırla.
• Koyu ve açık arayüz teması; bütün menüler, ipuçları ve raporlar Türkçe, her düğmenin üstüne gelince ne işe yaradığı yazar.

Kurulum (2 dakika)

Responsive Studio Chrome Web Mağazası'nda değil, GitHub'dan ücretsiz dağıtılıyor. Programlama bilgisi gerekmez.

1. Son sürüm sayfasında Assets başlığının altındaki, adı responsive-studio-v ile başlayan ZIP'i indir (örneğin responsive-studio-v1.0.1.zip, 250 KB kadar). Aynı yerdeki Source code (zip) ve depo sayfasındaki yeşil Code → Download ZIP kaynak kodu indirir; onlar Chrome'a yüklenmez.
2. ZIP'i aç. Çıkan responsive-studio klasörünü kalıcı bir yere taşı (örneğin Belgeler). Bu klasörü silersen eklenti çalışmaz.
3. Chrome'un adres çubuğuna chrome://extensions yaz, Enter'a bas.
4. Sağ üstteki Geliştirici modu anahtarını aç.
5. Sol üstte çıkan Paketlenmemiş öğe yükle düğmesine bas, responsive-studio klasörünü seç (içinde manifest.json olan klasör).
6. Adres çubuğunun yanındaki yapboz simgesine tıkla, Responsive Studio'nun yanındaki raptiyeye bas.

"Tüm web sitelerindeki verilerinizi okuyabilir" uyarısı neden çıkıyor? Eklentinin test ettiğin siteyi telefon gibi davrandırabilmesi için sitenin içinde çalışması gerekiyor. Hiçbir veri dışarı gitmez; bütün ayarlar yalnız senin bilgisayarında durur.

Güncelleme: yeni sürüm çıkınca yeni ZIP'i indir, eski klasörün içindekileri yenileriyle değiştir, chrome://extensions sayfasında eklentinin yenile düğmesine bas. Ayarların ve kayıtlı cihazların korunur.

Nasıl kullanılır?

1. Stüdyoyu aç: test edeceğin siteyi Chrome'da aç; araç çubuğundaki simgeye tıkla, ya da Ctrl + Shift + Y (Mac'te ⌘ + Shift + Y), ya da sayfaya sağ tıklayıp "Bu sayfayı Responsive Studio'da aç". Yeni sekmede site 11 ekranda açılır.
2. Cihazları seç: sol paneldeki listeden ekle, çıkar ya da üstteki setlerden birini seç. Kendi cihazın için Özel cihaz; daha hızlısı arama kutusuna 500x700 gibi bir ölçü yazıp Enter.
3. Siteyi gez: herhangi bir ekranda kaydır, tıkla, yaz; ötekiler takip eder. Senkronu araç çubuğundan kapatabilir, bir ekranı tek ekran moduna alabilirsin.
4. Sorunu bul: yatay kaydırma varsa Taşma (T); bir eleman neden farklı görünüyor, Denetçi (I); hizalama için Izgara (G) ya da Cetvel (M); hız, SEO ve erişilebilirlik için Rapor ve Erişilebilirlik menüleri.
5. Paylaş: kamera simgesinden bütün ekranların görüntüsünü ZIP ya da tek kontakt föy olarak indir, müşterine gönder.

Kısayol	İşlev
Ctrl + L	Adres çubuğuna git
Ctrl + R	Bütün ekranları yenile
Ctrl + B	Yan paneli aç, kapat
Ctrl + 0	Ekranları pencereye sığdır
Ctrl + / Ctrl −	Yakınlaştır, uzaklaştır
R	Bütün ekranları yatay, dikey çevir
O / T / G / I / M	Kontur / Taşma / Izgara / Denetçi / Cetvel
Esc	Tek ekran modundan çık

Gizlilik ve güvenlik

• Veri toplamaz. Hiçbir sunucuya bilgi göndermez, reklam ya da takip kodu yok.
• Normal gezinmen etkilenmez. Eklenti yalnız stüdyo sekmesi açıkken ve yalnız o sekmede çalışır.
• Başka siteler eklentiyi kötüye kullanamaz. Eklenti başka sitelerin erişimine kapalı.
• Çerez erişimi isteğe bağlı. Yalnız çerez panelini kullanmak istediğinde, senin onayınla istenir.
• Kaynak kodu açık. Bütün kod GitHub'da, MIT lisansıyla; istediğin gibi düzenleyip geliştirebilirsin.

Sık sorulanlar

Ücretli mi? Hayır, tamamen ücretsiz. Üyelik ya da hesap gerekmez.

Edge, Brave ya da Opera'da çalışır mı? Chrome tabanlı tarayıcıların çoğunda aynı adımlarla kurulur (Edge'de edge://extensions). Chrome'da test edildi.

Gerçek iPhone'daki Safari ile aynı sonucu verir mi? Ekran genişliği, cihaz bilgisi, dokunmatik davranış ve koyu mod gerçeğe uygun taklit edilir; ama sayfa yine Chrome'un motoruyla çizilir. Safari'ye özgü nadir hatalar için son kontrolü gerçek cihazda yap.

Bazı siteler açılmıyor ya da "çok fazla istek" hatası veriyor. 11 ekran aynı anda yüklendiği için bazı siteler bunu yoğun trafik sanabilir. Yan paneldeki Yükleme sırası ayarından daha uzun bir kademe (örneğin 300 ms) seç ya da daha az ekranlı bir set kullan.

chrome://extensions sayfasında "sandbox" uyarısı var. Beklenen bir durum, hata değil: test ettiğin sitenin stüdyo sekmesini ele geçirmesini engelleyen korumanın yan etkisi.

Bilgisayarımdaki (localhost) projeyi test edebilir miyim? Evet. Dosyalar için chrome://extensions → Responsive Studio → Ayrıntılar → Dosya URL'lerine erişime izin ver seçeneğini aç.

Son söz

Bir siteyi onlarca cihazda tek tek açıp kapatma derdi bitti. Taşmaları, telefonda çalışmayan hover menüleri, okunmayan kontrastları ve kırık bağlantıları birkaç dakikada, tek ekrandan yakala.

Ücretsiz indir: https://github.com/cankarfx/responsive-studio/releases/latest

Bir sorun ya da önerin olursa yaz, birlikte geliştirelim.