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 tamamını ve görsel düzenlemeler yapmanın tüm yollarını kapsayan eksiksiz bir turla.
Canlı uygulamanızı önizleyin, etkileşimlerini test edin ve yayın öncesi kontrolleri çalıştırın — araç çubuğunun tamamını ve görsel düzenlemeler yapmanın tüm yollarını kapsayan eksiksiz bir turla.
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 önceki son kontrol noktası olarak da hizmet eder: bir şey yanlış görünüyorsa veya beklenmedik şekilde 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: görüntü simgesi önizlemeyi mobil görünüme ve tekrar geri geçirir, böylece sayfadan ayrılmadan duyarlılığı kontrol edebilirsiniz.
- Yenile: önizleme penceresini yeniden yükler. Önizleme bayat veya takılmış göründüğünde ilk yapmanız gereken hareket.
- Ana Sayfa: nerede gezinmiş olursanız olun, önizlemeyi 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ı içeren paneli açar; bir şey bozuk göründüğünde ilk bakmanız gereken yer burasıdır.
Ö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 düzgün çalışmadığı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 sürdü? 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.
- Ana kullanıcı yolculuğunu 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ır; Terminal ise 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:
- Çözümle'ye tıklayın Sorun Bildir bildiriminde, yapay zeka belirlenen tüm hataları otomatik olarak analiz eder ve düzeltir; düzeltmeler uygulandığında önizleme yeniden yüklenir. İlerlemeyi Terminal panelinde canlı olarak izleyebilirsiniz.
- Çözümle düğmesi yok mu? Agent'ın en son mesajının yanındaki “…” (daha fazla seçenek) öğesine tıklayın ve destek ekibine ulaşmak için Geri Bildirim'i seçin — Chat Link'inizi ve hatanın ekran görüntüsünü ekleyin.
Tam hata işleme akışı için Sorun Bildir bölümüne bakın.
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 seçilir ve seçtiğiniz şeyi ve boyutunu adlandıran bir rozet görünür; örneğin bir h1, bir düğme, bir kart. Öğenin hemen yanında satır içi bir “Atoms'tan şunu değiştirmesini iste…” çubuğu görünür; böylece tam olarak o noktaya odaklı bir değişikliği 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şluklar: 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 bunları eklemek için bir Kütüphane sekmesi de içerir: simgeler, görseller ve UI bileşenleri doğrudan projenize eklenebilir.
Tıkla-düzenle kullanımda: 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 tarif edin
Agent'lara neyi değiştireceklerini sade bir dille söyleyin, onlar da bunu uygulamaya uygulasın:
Arka plan rengini daha koyu yap.
Başlığın etrafındaki padding'i azalt.
Düğme rengini maviye değiştir.
Yayın öncesi kontroller
Uygulama Görüntüleyici, Yayınla'dan önceki 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'da kırmızı hata mesajı görünmez.
- 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 metinleri gözden kaçırmak kolaydır ve canlıya 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 Yayınla'ya 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 Çözümle 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.
- Sorun bildir — herhangi bir agent mesajında “…” → Geri Bildirim.
SSS
Uygulama Görüntüleyici neden bir yükleme ekranı gösteriyor?
Web sitesi yükleniyor ve Uygulama Görüntüleyici normal çalışıyor, biraz bekleyin. 2 dakikadan uzun sürerse Yenile simgesine tıklayın veya hata olup olmadığını görmek için Konsol panelini kontrol edin.
Uygulama Görüntüleyici neden kırmızı hata mesajları gösteriyor?
Agent'lar derleme sırasında sorunlarla karşılaşabilir, bu da zaman zaman web sayfası hatalarına neden olur. Çözümle'ye tıklayın, Agent'lar bunu sizin için onarır; düzeltildikten sonra önizleme normale döner. Kırmızı mesajlar bir kriz değil, bir sinyaldir.
Yayınlanmış sayfamdan 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, Ayarlar'ı seçin, ardından Planlar & Faturalandırma bölümüne gidin ve Pro veya Max planını seçin. Yükselttikten sonra Atoms rozeti yayınlanmış sayfalarınızdan otomatik olarak kaldırılır.
Tasarım Modu'nu kullanarak sayfa düzeni veya stil sorunlarını nasıl düzeltebilirim?
- 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 neyin değişmemesi gerektiğini belirtin.
- Padding, hizalama, genişlik, renk veya satır kaydırma davranışı gibi ölçülebilir talimatlar kullanın. Görsel eşleşme önemliyse bir referans görsel ekleyin.
- 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 tekrar deneyin.
Uygulama Görüntüleyici neden boş beyaz bir ekran gösteriyor?
- Sorunun yalnızca Uygulama Görüntüleyici'yi mi, Önizleme URL'sini mi yoksa yayınlanmış siteyi de mi etkilediğini doğrulayın.
- Bir kez yenileyin, Önizleme'yi yeni bir sekmede açın ve bir Gizli pencere test edin.
- Geçerli görevin veya derlemenin hâlâ çalışıp çalışmadığını kontrol edin. Yeniden denemeden önce bitmesini bekleyin.
- Açık bir mesaj Bulut & Yapay Zeka bakiyesinin yetersiz olduğunu veya uygulamanın askıya alındığını söylüyorsa, Ayarlar → Cloud & AI bölümünü açın ve bu bakiyeyi gözden geçirin. Yalnızca boş ekrana bakarak yükleme yapmayın.
- Çerezleri, jetonları veya gizli değerleri paylaşmadan Konsol veya Ağ hatalarını kaydedin.
Ekran boş kalmaya devam ederse, Chat Link, tam Viewer URL'si, saat ve saat dilimi, etkilenen ortamlar, ekran görüntüsü ve temizlenmiş hata ayrıntılarıyla Destek ile iletişime geçin.
Önizleme 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, Önizleme URL'sinin mi yoksa yayınlanmış sitenin mi etkilendiğini kontrol edin.
- Bir kez yenileyin, Önizleme'yi yeni bir sekmede açın ve bir Gizli pencere test edin.
- Geçerli 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.
- Ayarlar → Cloud & AI bölümünü yalnızca ürün açıkça yetersiz bakiye veya askıya alınmış uygulama bildiriyorsa açın.
Sorun devam ederse, Chat Link, tam Viewer URL'si, sürüm, saat ve saat dilimi, etkilenen ortamlar, ekran görüntüsü ve temizlenmiş Konsol veya Ağ hatasıyla Destek ile iletişime geçin.
Tasarım Modu değişikliklerim neden Önizleme'de doğru görünüyor ama yayınlanmış sitede görünmüyor?
Önizleme ve yayınlanmış site bağımsız kanallardır. Kaydetmek veya önizlemek değişiklikleri üretime göndermez.
- Yayınla panelinde Güncelle'ye tıklayın — Yayınla panelini açın ve Güncelle'ye tıklayın. Durum Güncel olarak görünene kadar bekleyin.
- Canlı siteyi sert 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 Gizli pencerede açın.
- Yayınlanmış sürüm numarasını kontrol edin — Yayınla panelinde, sürümün Önizleme'de 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'sini ayrı olarak açın. Prod alt alan adı güncellenmiş ama özel alan adı güncellenmemişse sorun DNS veya CDN önbelleklemesidir.
Sorun devam ederse, Önizleme URL'sini, Prod URL'sini, yan yana karşılaştırma ekran görüntülerini ve Yayınla veya Güncelle'ye 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 stilleri değiştirdiğinde, daha küçük ekranlarda duyarlı davranışı istemeden bozabilir.
- Önce mobil genişlikte önizleyin — Yayınlamadan önce sonucu 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ıtlar sağlayın — 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 diz 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'i, bozuk mobil düzenin ekran görüntüsünü ve beklenen düzenin referans görselini paylaşın.
Önizleme veya yayınlanmış 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 — Dosyalar 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.
- Bulut depolamayı kontrol edin — Kullanılabilir depolama alanınız olduğunu doğrulamak için Ayarlar > Cloud & AI bölümüne gidin.
- Sert yenileme yapın — Önbelleğe alınmış görsel başvurularını temizlemek için Cmd+Shift+R (Mac) veya Ctrl+F5 (Windows) tuşlarına basın.
Sorun devam ederse, Chat Link'i, eksik görselin URL'sini 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 — Geçmiş'e gidin ve son kararlı sürümden Remix yapın. Bu, kodunuzu korurken sohbet bağlamını sıfırlar.
- Yalıtmak 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ıtlar ekleyin — Neyin değişmemesi 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 bir sonrakine geçin.
Agent diğer öğelerde tekrar tekrar gerilemeye neden oluyorsa, kararlı bir sürümden Remix yapın ve daha dar kapsamlı bir talimatla yeniden yaklaşın.
Önizleme neden bir derleme hatası veya eksik bağımlılık gösteriyor?
Önizleme paneli bir derleme hatası, kırmızı hata bandı veya eksik paketlerle ilgili bir mesaj gösteriyorsa:
- Çözümle düğmesini kullanın — Uygulama Görüntüleyici'de bir Sorun Bildir bildirimi görünürse, Çözümle'ye tıklayın; yapay zeka belirlenen tüm hataları otomatik olarak analiz eder ve düzeltir. Çözümle düğmesi görünmüyorsa, Konsol panelindeki tam hata mesajını kopyalayın ve şu ifadeyle Agent'a 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, Geçmiş'e 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 — Hata çözülmesi 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: "[package name] mevcut proje kurulumu ile uyumlu mu 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, Yayınla, 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 Destek 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:
- Sert yenileme yapın — Cmd+Shift+R (Mac) veya Ctrl+F5 (Windows) tuşlarına basın. CSS değişiklikleri tarayıcı tarafından sık sık önbelleğe alınır.
- CSS özgüllük ç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 özgüllüğü 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, şu 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 stilleri olan 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'i, değişmeyen öğenin ekran görüntüsünü 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 çok 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 tarif edin. Ö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, bunu 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.