Uygulama Görüntüleyici
Canlı uygulamanızı önizleyin, etkileşimlerini test edin ve yayın öncesi kontrolleri çalıştırın — araç çubuğunun tam bir turu ve görsel düzenlemeler yapmanın her yolu ile.
Uygulama Görüntüleyici nedir?
Yapay zeka Agent'larınız bir görevi tamamladığında, Uygulama Görüntüleyici sayfanın üst kısmında açılır. Yalnızca oluşturduğunuz şeyin nasıl göründüğünü görmek yerine, onunla tamamen çalışan bir uygulama gibi etkileşime geçebilirsiniz—sayfalar arasında gezinebilir, özellikleri test edebilir ve kod yazmadan görsel değişiklikler yapabilirsiniz. Ayrıca yayınlamadan önce son kontrol noktası olarak da hizmet eder: bir şey yanlış görünüyorsa veya beklenmedik davranıyorsa, kullanıcılar görmeden önce bunu fark edip düzeltebilirsiniz.
Başlamadan önce: Agent işlemesi biraz zaman alabilir. Görev çalışırken, sağdaki Terminal paneli dosya oluşturma, kod üretimi ve süreç boyunca karşılaşılan hatalar dahil olmak üzere gerçek zamanlı etkinliği gösterir. Önizlemenin en son sürümünü yeniden yüklemek için istediğiniz zaman Yenile simgesini de kullanabilirsiniz.
Uygulama Görüntüleyici araç çubuğu
Önizleme penceresinin üzerinde ince bir araç çubuğu bulunur. Soldan sağa, her denetimin yaptığı şey şudur:
- Tasarım: görsel düzenleme modunu açıp kapatır. Etkin olduğunda, önizlemede herhangi bir şeye tıklamak o öğeyi düzenleme için seçer — aşağıdaki “Uygulamanızı değiştirin” bölümüne bakın.
- Cihaz geçişi: ekran simgesi önizlemeyi mobil görünüme geçirir ve geri alır, böylece sayfadan ayrılmadan duyarlılığı kontrol edebilirsiniz.
- Yenile: önizleme penceresini yeniden yükler. Önizleme eski veya takılı görünüyorsa ilk yapmanız gereken şeydir.
- Ana Sayfa: önizlemeyi, nerede gezinmiş olursanız olun, uygulamanızın ana sayfasına geri götürür.
- Sayfa seçici: ortadaki açılır menü uygulamanızın sayfalarını listeler, oraya tıklayarak gitmek yerine doğrudan önizlemek için birini seçin.
- Yeni sekmede aç: ok simgesi önizlemeyi ayrı bir tarayıcı sekmesinde açar. Özellikle gömülü önizleme takıldığında veya yanıt vermediğinde kullanışlıdır.
- Konsol: sağ kenarda, sistem günlükleri ve hata mesajlarının bulunduğu paneli açar; bir şey bozuk göründüğünde ilk bakmanız gereken yerdir.
Önizlemenin üzerindeki araç çubuğu: solda Tasarım, ardından cihaz geçişi (“Mobil önizlemeyi göster”), yenile, ana sayfa, sayfa seçici, yeni sekmede aç ve sağda Konsol.
Ok simgesi çalışan uygulamayı kendi tarayıcı sekmesinde açar — gömülü önizleme kötü davrandığında güvenilir bir çıkış yoludur.
Uygulama Görüntüleyici nasıl kullanılır
Adım 1: Önizlemenin yüklenmesini bekleyin
Agent'lar tamamlandıktan sonra, Uygulama Görüntüleyici önizlemenizi ana pencerede yükler. Bu genellikle birkaç saniye ile bir dakika arasında sürer.
2 dakikadan uzun mu? Araç çubuğunda Yenile'ye tıklayın. Hâlâ takılıysa, Konsol'da hata olup olmadığını kontrol edin (bkz. Adım 3).
Adım 2: Önizleyin ve etkileşimleri test edin
Yüklendikten sonra, gerçek uygulamanıza bakıyorsunuz:
- Duyarlılığı kontrol edin: masaüstü ve mobil görünümler arasında geçiş yapmak için cihaz geçişini kullanın ve düzenin daha küçük ekranlarda da sağlam kaldığını doğrulayın.
- Etkileşimleri tek tek deneyin: tüm gezinme bağlantılarını açın, düğmelere basın, formları gönderin ve hover durumlarını tetikleyin. Görüntülenen bir sayfa, çalışan bir sayfa ile aynı şey değildir.
- Temel yolculuğu izleyin: açılış sayfasından keşfetmeye ve ana harekete geçirici mesajı tamamlamaya kadar en önemli yolu baştan sona takip edin.
- Gerçek bir sekmede test edin: kullanıcılarınızın gerçekten sahip olacağı ortamda son bir kontrol için önizlemeyi yeni bir tarayıcı sekmesinde açın.
Adım 3: Hataları kontrol edin (bir şey yanlış görünüyorsa)
Uygulama yüklenmiyorsa veya bozuk görünüyorsa, Uygulama Görüntüleyici araç çubuğunda Konsol'u seçin. Konsol paneli önizlemenin altında açılırken, Terminal ayrı bir görev etkinliği alanıdır. Derleme sırasında oluşturulan sistem günlüklerini ve hata mesajlarını toplar. Kırmızı hata mesajları, neyin yanlış gittiğine dair bir açıklama ve ek tanılama ayrıntıları içerebilir.
Hataları düzeltmek için:
- Sorun Bildir bildiriminde Resolve'a tıklayın, yapay zeka belirlenen tüm hataları otomatik olarak analiz eder ve düzeltir, düzeltmeler uygulandıktan sonra önizleme yeniden yüklenir. İlerlemeyi Terminal panelinde canlı olarak izleyebilirsiniz.
- Resolve düğmesi yok mu? Agent'ın en son mesajının yanındaki “…” (diğer seçenekler) düğmesine tıklayın ve destek ekibine ulaşmak için Feedback'i seçin — Chat Link'inizi ve hatanın ekran görüntüsünü ekleyin.
Tam hata işleme akışı için bkz. Sorun Bildir.
Adım 4: Uygulamanızı değiştirin
Yöntem 1 — Düzenlemek için tıklayın (görsel değişiklikler için en iyisi)
Önce görsel düzenleme modunu etkinleştirmek için Uygulama Görüntüleyici araç çubuğunda Tasarım'ı seçin. Tasarım yalnızca uygun masaüstü proje durumlarında ve düzenleyici erişimi olan kullanıcılar için kullanılabilir; görmüyorsanız, sohbette Yöntem 2'yi kullanın. Ardından doğrudan önizlemede herhangi bir öğeye tıklayın. Öğenin etrafı bir çerçeveyle ve seçtiğiniz şeyi ve boyutunu adlandıran bir rozetle seçilir; örneğin bir h1, bir düğme, bir kart. Öğenin tam yanında satır içi bir “Atoms'tan şunu değiştirmesini iste…” çubuğu görünür; böylece değişikliği tam olarak o noktaya odaklanmış şekilde tarif edebilirsiniz ve solda uygulamalı ayarlamalar için bir görsel düzenleyici açılır:
- Renkler: renk seçici aracılığıyla metin, arka plan ve kenarlık renkleri.
- Boşluk: padding, margin ve öğeler arasındaki boşluk.
- Tipografi: yazı tipi boyutu, kalınlığı ve ailesi.
- Düzen: hizalama, flexbox ve grid özellikleri.
- Metin içeriği: kelimeleri yerinde düzenleyin.
Her değişiklik önizlemeyi anında günceller, böylece sonucu gerçek zamanlı olarak görürsünüz. Görsel düzenleyici ayrıca önceden oluşturulmuş varlıklara göz atmak ve eklemek için bir Kütüphane sekmesi de içerir: simgeler, görseller ve UI bileşenleri, doğrudan projenize.
Tıklayarak düzenleme iş başında: başlık seçili (etiketi ve boyutu gösteriliyor) ve satır içi çubuk tam olarak bu öğe için değişiklik istemenizi sağlıyor.
Yöntem 2 — Sohbette açıklayın
Agent'lara neyi değiştireceklerini sade bir dille söyleyin, onlar da bunu uygulamaya uygular:
Arka plan rengini daha koyu yap.
Başlığın etrafındaki padding'i azalt.
Düğme rengini maviye çevir.
Yayın öncesi kontroller
Uygulama Görüntüleyici, Publish öncesindeki son duraktır. Bu kontrol listesi, kullanıcılar görmeden önce yaygın sorunları yakalamaya yardımcı olur:
- Önizleme temiz şekilde yüklenir ve Konsol kırmızı hata mesajları göstermez.
- Düzen yalnızca masaüstünde değil, mobil görünümde de sağlam kalır.
- Her etkileşim çalışır: gezinme, düğmeler, formlar ve birincil harekete geçirici mesaj.
- Yer tutucu içerik değiştirilmiştir, [Şirket adı] gibi köşeli parantezli geçici ifadeleri gözden kaçırmak kolaydır ve yayına alındığında çok görünür olurlar.
- Sayfa seçicideki her sayfaya en azından hızlıca göz atılır, yalnızca ana sayfaya değil.
Her şey tamam mı? Sağ üst köşedeki Publish'e basın ve bağlantıyı paylaşın.
Hızlı başvuru
- Önizlemeyi yenile — Uygulama Görüntüleyici araç çubuğundaki Yenile simgesi.
- Cihaz görünümünü değiştir — farklı ekran boyutlarını test etmek için araç çubuğundaki cihaz geçişi.
- Sayfalar arasında atla — araç çubuğundaki sayfa seçici açılır menüsü.
- Yeni sekmede aç — araç çubuğundaki ok simgesi.
- Hata günlüklerini görüntüle — Uygulama Görüntüleyici araç çubuğunda Konsol'u seçin; günlük paneli önizlemenin altında açılır.
- Hataları otomatik düzelt — Sorun Bildir bildirimindeki Resolve düğmesi.
- Görsel öğeleri düzenle — seçmek ve görsel düzenleyiciyi açmak için önizlemede herhangi bir öğeye tıklayın.
- Bir sorun bildir — herhangi bir Agent mesajında “…” → Feedback.
SSS
Uygulama Görüntüleyicim neden bir yükleme ekranı gösteriyor?
Web sitesi yükleniyor ve Uygulama Görüntüleyici normal çalışıyor, ona biraz zaman verin. 2 dakikadan uzun sürerse, Yenile simgesine tıklayın veya Konsol panelinde hata olup olmadığını kontrol edin.
Uygulama Görüntüleyicim neden kırmızı hata mesajları gösteriyor?
Agent'lar derleme sırasında sorunlarla karşılaşabilir ve bu da zaman zaman web sayfası hatalarına neden olur. Resolve'a tıklayın, Agent'lar bunu sizin için onarır; düzeltildikten sonra önizleme normale döner. Kırmızı mesajlar bir sinyaldir, kriz değil.
Yayınladığım sayfadan Atoms rozetini neden kaldıramıyorum?
Rozet kaldırma için Pro veya üstü gerekir. Sağ üst köşedeki avatarınıza tıklayın, Settings'i seçin, ardından Plans & Billing'e gidin ve Pro veya Max planını seçin. Yükselttikten sonra Atoms rozeti yayınlanan sayfalarınızdan otomatik olarak kaldırılır.
Tasarım Modu'nu kullanarak sayfa düzeni veya stil sorunlarını nasıl düzeltirim?
- Tasarım Modu'nu açın ve hizası bozuk veya yanlış stillendirilmiş tam öğeyi seçin.
- Sayfayı ve breakpoint'i, mevcut sorunu, istenen sonucu ve değişmemesi gerekenleri belirtin.
- Padding, hizalama, genişlik, renk veya sarma davranışı gibi ölçülebilir talimatlar kullanın. Görsel eşleşme önemliyse bir referans görsel ekleyin.
- Tek bir değişiklik uygulayın, ardından masaüstü ve mobil düzenleri, ayrıca yükleme, boş, hover ve hata gibi önemli durumları doğrulayın.
- Sonuç başka bir alanı bozarsa, son çalışan sürüme dönün ve daha dar bir hedefle yeniden deneyin.
Uygulama Görüntüleyici neden boş beyaz bir ekran gösteriyor?
- Sorunun yalnızca Uygulama Görüntüleyici'yi mi, Preview URL'yi mi yoksa yayınlanan siteyi de mi etkilediğini doğrulayın.
- Bir kez yenileyin, Preview'u yeni bir sekmede açın ve bir Gizli pencere test edin.
- Mevcut görevin veya derlemenin hâlâ çalışıp çalışmadığını kontrol edin. Yeniden denemeden önce bitmesini bekleyin.
- Açık bir mesaj Cloud & AI bakiyesinin yetersiz olduğunu veya uygulamanın askıya alındığını söylüyorsa, Settings → Cloud & AI bölümünü açın ve bu bakiyeyi gözden geçirin. Yalnızca boş ekrana bakarak bakiye yüklemeyin.
- Çerezleri, jetonları veya gizli değerleri paylaşmadan herhangi bir Konsol veya Ağ hatasını kaydedin.
Ekran boş kalmaya devam ederse, Chat Link, tam Viewer URL, saat ve saat dilimi, etkilenen ortamlar, ekran görüntüsü ve temizlenmiş hata ayrıntılarıyla Support ile iletişime geçin.
Preview veya Uygulama Görüntüleyici neden boş ekran gösteriyor ya da sonsuza kadar yükleniyor?
- Yalnızca Uygulama Görüntüleyici'nin mi, Preview URL'nin mi yoksa yayınlanan sitenin mi etkilendiğini kontrol edin.
- Bir kez yenileyin, Preview'u yeni bir sekmede açın ve bir Gizli pencere test edin.
- Mevcut görevin veya derlemenin hâlâ çalışıp çalışmadığını kontrol edin ve bitmesini bekleyin.
- Bilinen son çalışan sürümü test edin. O çalışıyorsa, boş ekrana neden olan son değişikliği karşılaştırın.
- Settings → Cloud & AI bölümünü yalnızca ürün açıkça yetersiz bakiye veya askıya alınmış uygulama bildirdiğinde açın.
Sorun devam ederse, Chat Link, tam Viewer URL, sürüm, saat ve saat dilimi, etkilenen ortamlar, ekran görüntüsü ve temizlenmiş Konsol veya Ağ hatasıyla Support ile iletişime geçin.
Tasarım Modu değişikliklerim neden Preview'da doğru görünüyor ama yayınlanan sitede görünmüyor?
Preview ve yayınlanan site bağımsız kanallardır. Kaydetmek veya önizlemek değişiklikleri üretime göndermez.
- Publish panelinde Update'e tıklayın — Publish panelini açın ve Update'e tıklayın. Durum Up to date görünene kadar bekleyin.
- Canlı siteyi tam yenileyin — Cmd+Shift+R (Mac) veya Ctrl+F5 (Windows) tuşlarına basın ya da tarayıcı önbelleğini elemek için URL'yi bir Gizli pencerede açın.
- Yayınlanan sürüm numarasını kontrol edin — Publish panelinde, sürümün Preview'da gördüğünüzle eşleştiğini doğrulayın. Farklıysa yeniden yayınlayın.
- Platform Prod alt alan adını test edin — Özel bir alan adı kullanıyorsanız, varsayılan Prod URL'yi ayrıca açın. Prod alt alan adı güncellenmiş ama özel alan adı güncellenmemişse, sorun DNS veya CDN önbelleklemesidir.
Sorun devam ederse, Preview URL, Prod URL, yan yana karşılaştırma ekran görüntüleri ve Publish veya Update'e tıkladığınız zamanı paylaşın.
Agent değişiklik yaptıktan sonra sayfam neden mobilde bozuk görünüyor?
Agent düzeni veya stili değiştirdiğinde, daha küçük ekranlarda duyarlı davranışı istemeden bozabilir.
- Önce mobil genişlikte önizleyin — yayınlamadan önce sonucunuzu kontrol etmek için Uygulama Görüntüleyici araç çubuğundaki cihaz geçişini kullanarak mobil görünüme geçin.
- Mobil görünümde Tasarım Modu'nu kullanın — cihaz geçişi mobildeyken Tasarım Modu'na geçin. Bozuk öğeye tıklayın, böylece Agent yalnızca o ekran boyutundaki bileşeni hedefler.
- Açık duyarlı kısıtlamalar verin — Agent'a mobil düzenin tam olarak nasıl görünmesi gerektiğini söyleyin. Örnek: "768px'ten dar ekranlarda kartları tek sütunda yığın ve padding'i 16px yap."
- Agent'tan mevcut media query'leri korumasını isteyin — masaüstü değişiklikleri isterken şunu ekleyin: "Mevcut duyarlı veya mobil stillerin hiçbirini değiştirme."
Sorun devam ederse, Chat Link, bozuk mobil düzenin ekran görüntüsü ve beklenen düzenin referans görselini paylaşın.
Preview veya yayınlanan sitede görseller neden eksik ya da yüklenmiyor?
Görseller bozuk görünüyorsa, yer tutucu simgeler gösteriyorsa veya yüklenmiyorsa:
- Görsel dosya yollarını kontrol edin — Files bölümünü açın ve görsel dosyalarının kodunuzda başvurulan yollarda bulunduğunu doğrulayın. Agent düzenlemeler sırasında dosyaları taşımış veya yeniden adlandırmış olabilir.
- Dosya boyutunu ve biçimini doğrulayın — çok büyük görseller veya desteklenmeyen biçimler yüklenmeyebilir. Görselleri sıkıştırın veya PNG, JPG ya da WebP'ye dönüştürün.
- Cloud depolamayı kontrol edin — kullanılabilir depolama alanınız olduğunu doğrulamak için Settings > Cloud & AI bölümüne gidin.
- Tam yenileme yapın — önbelleğe alınmış görsel referanslarını temizlemek için Cmd+Shift+R (Mac) veya Ctrl+F5 (Windows) tuşlarına basın.
Sorun devam ederse, Chat Link, eksik görselin URL'si ve bozuk durumun ekran görüntüsünü paylaşın.
Agent yanlış öğeyi değiştirdi veya sayfanın diğer bölümlerini bozdu. Ne yapmalıyım?
Agent ilgisiz öğeleri değiştirdiğinde veya sayfanın diğer bölümlerinde gerilemelere neden olduğunda:
- Geri alın — History'ye gidin ve son kararlı sürümden Remix yapın. Bu, kodunuzu korurken sohbet bağlamını sıfırlar.
- İzole etmek için Tasarım Modu'nu kullanın — Tasarım Modu'na geçin ve doğrudan belirli öğeye tıklayın. Bu, Agent'ın düzenleme kapsamını o bileşene sabitler.
- Açık kısıtlamalar ekleyin — neyin değişMEMESİ gerektiğini net şekilde belirtin. Örnek: "Yalnızca başlık arka plan rengini #1A365D olarak değiştir. Gezinme çubuğunu, alt bilgiyi veya başka hiçbir bileşeni değiştirme."
- Her istemde tek değişiklik — bir değişiklik yapın, sonucu doğrulayın, sonra sonrakine geçin.
Agent tekrar tekrar diğer öğelerde gerilemeye neden oluyorsa, kararlı bir sürümden Remix yapın ve daha dar kapsamlı bir talimatla yeniden yaklaşın.
Preview neden bir derleme hatası veya eksik bağımlılık gösteriyor?
Preview paneli bir derleme hatası, kırmızı hata bandı veya eksik paketlerle ilgili bir mesaj gösteriyorsa:
- Resolve düğmesini kullanın — Uygulama Görüntüleyici'nde bir Sorun Bildir bildirimi görünürse, Resolve'a tıklayın; yapay zeka belirlenen tüm hataları otomatik olarak analiz eder ve düzeltir. Resolve düğmesi görünmüyorsa, tam hata mesajını Konsol panelinden kopyalayın ve Agent'a şu şekilde yapıştırın: "Bu derleme hatasını düzelt: [hata mesajı]."
- Son değişiklikleri kontrol edin — hata belirli bir düzenlemeden sonra ortaya çıktıysa, History'ye gidin ve kırılmaya hangi değişikliğin neden olduğunu belirlemek için son çalışan sürümle karşılaştırın.
- Son çalışan sürümden Remix yapın — hatayı çözmek zorsa, son başarılı kontrol noktanızdan Remix yapın ve değişiklikleri kademeli olarak yeniden uygulayın.
- Paket uyumluluğunu kontrol edin — hata belirli bir pakete atıfta bulunuyorsa, Agent'a şunu sorun: "[paket adı]'nın mevcut proje kurulumu ile uyumlu olup olmadığını kontrol et ve varsa sürüm çakışmalarını düzelt."
Not: Hata mesajı platform bileşenlerine (Uygulama Görüntüleyici, başlangıç betiği, Publish, dağıtım kaydı) veya üçüncü taraf paket iç dosyalarına (ör. @vue/compiler-core, vite) atıfta bulunuyorsa, bu bir Agent sorunu değil platform sorunu olabilir. Tam hata mesajıyla Support ile iletişime geçin.
Sorun devam ederse, tam hata mesajını, Chat Link'i ve hatanın ekran görüntüsünü paylaşın.
Yazı tipi, renk veya boşluk değişikliklerim neden etkili olmuyor?
Agent değişikliğin yapıldığını onaylıyorsa ama görsel sonuç değişmediyse:
- Tam yenileme yapın — Cmd+Shift+R (Mac) veya Ctrl+F5 (Windows) tuşlarına basın. CSS değişiklikleri sık sık tarayıcı tarafından önbelleğe alınır.
- CSS specificity çakışmalarını kontrol edin — Agent mevcut kurallar tarafından geçersiz kılınan stiller eklemiş olabilir. Agent'a şunu sorun: "İstediğim stilin başka bir CSS kuralı tarafından geçersiz kılınıp kılınmadığını kontrol et ve gerekirse specificity'yi düzelt."
- İncelemek için Tasarım Modu'nu kullanın — Tasarım Modu'na geçin ve öğeye tıklayın. Soldaki görsel düzenleyici o anda uygulanan renkleri, boşlukları, tipografiyi ve düzen özelliklerini gösterir, böylece istediğiniz değişikliğin uygulanıp uygulanmadığını görebilirsiniz.
- Doğru dosyayı doğrulayın — hem genel stil sayfaları hem de bileşen düzeyinde stiller içeren projelerde Agent yanlış dosyayı düzenlemiş olabilir. Şunu sorun: "Değişikliği nereye uyguladın? Bana dosya yolunu ve satırı göster."
Sorun devam ederse, Chat Link, değişmeyen öğenin ekran görüntüsü ve istediğiniz tam stil değerlerini paylaşın.
Tıkladığımda Tasarım Modu neden yanlış bileşeni seçiyor?
Tasarım Modu, hangi bileşeni hedeflediğinizi belirlemek için görsel düzeni kullanır. İç içe geçmiş veya üst üste binen öğeler yanlış seçime neden olabilir.
- Yakınlaştırın — tıklamadan önce alana yakınlaştırın. Bu, birbirine yakın iç içe bileşenleri ayırt etmeye yardımcı olur.
- Yedek olarak metin açıklaması kullanın — tekrar tekrar tıklamak yanlış öğeyi seçiyorsa, bunun yerine sohbette açıklayın. Örnek: "Sağ sütundaki fiyatlandırma kartının içindeki ikinci düğmeyi seç."
- Dosya yoluyla referans verin — bileşeni hangi dosyanın içerdiğini biliyorsanız, doğrudan Agent'a söyleyin: "src/components/PricingCard.tsx dosyasındaki 42. satırdaki öğeyi düzenle."
Seçim sorunları devam ederse, istediğiniz öğeyi vurgulayan bir ekran görüntüsü ve Chat Link'i paylaşın.