Bir web sitesinin genel düzenini ve belirli öğe stillerini anlamak için stil oluşturma amacıyla Yapay zeka yardımı panelini kullanın ve CSS hataları için yapay zeka tarafından oluşturulan düzeltmeleri alın.
"Yapay zeka yardımı" panelini açma
Yapay zeka yardımı paneli çekmecede açılır.
Nesne panelinden
Nesne panelinden Yapay zeka yardımını açmak için bir DOM düğümünü incelerken düğümü sağ tıklayın ve Yapay zekaya sor seçeneğini belirleyin.
Yapay zeka yardımını bu şekilde açtığınızda, incelenen DOM öğesi ileti dizisi için bağlam öğesi olarak önceden seçilmiş olur.
Alternatif olarak, fareyle üzerine gelinen bir DOM düğümüne eklenmiş kayan düğmeyi tıklayın.
Komut menüsünden
Komut menüsünden Yapay zeka yardımı'nı açmak için AI yazın ve ardından yanındaki Çekmece rozeti bulunan Yapay zeka yardımını göster komutunu çalıştırın.
"Diğer araçlar" menüsünden
Alternatif olarak, sağ üst köşede Diğer seçenekler > Diğer araçlar > Yapay zeka yardımı'nı seçin.
Sohbet bağlamı
Yapay zeka yardımının kullanıldığı sohbetler her zaman şu anda incelenen öğeyle ilgilidir. Bu öğe, Nesneler paneli DOM ağacında seçilen son öğedir. Bu öğeye yapılan bir referans, panelin sol alt köşesinde gösterilir.
Mevcut öğenin yanındaki öğe seçiciyi kullanarak veya Öğeler paneli DOM ağacından seçim yaparak bağlamı değiştirin.
Bağlam seçiliyken görünüm alanının ekran görüntüsünü yakalayabilir ve sohbetinize gönderebilirsiniz. Sohbet giriş alanının yanındaki Ekran görüntüsü al düğmesini tıklayın.
İstemlerinize ek görsel bağlam sağlamak için ekran görüntülerini kullanabilirsiniz. Örneğin, görünür tüm düğmelerin aynı aralığa sahip olup olmadığını kontrol edebilirsiniz.
Şu anda incelenen öğe, görüşmenin temelini oluştursa da yapay zeka yardımı, incelenen sayfadan daha fazla bilgi toplamak için tüm web API'lerine erişebilir. document.querySelector ile diğer öğelere sorgu gönderme veya hesaplanmış stilleri değerlendirme de buna dahildir.
İstem oluşturma
Yeni bir sohbete başlarken stil oluşturma için yapay zeka yardımı, hızlı bir başlangıç yapmanıza yardımcı olacak örnek istemler sunar.
Panelin alt kısmındaki istem giriş alanını önceden doldurmak için istemlerden birini tıklayın.
Alternatif olarak, giriş alanına kendi isteminizi veya sorunuzu yazın.
İstem göndermek için Enter tuşuna basın veya giriş alanının sağ tarafındaki oku tıklayın.
Görüşme akışı
İstem göndermek, stilist temsilciyle sohbeti başlatır. Aracı, isteminize en iyi şekilde yanıt vermek için web API'lerini çağıran JavaScript oluşturup yürütür. Temsilcinin ilerleme durumu adımlar halinde gösterilir. İlk adımın durumu Investigating….
Temsilci, sorunuzu çözmek için daha spesifik işlemler gerçekleştirdikçe adım etiketi güncellenir.
Aracı nihai bir yanıta ulaştığında, yanıt, takip istemleriyle ilgili öneriler de dahil olmak üzere araştırma adımlarının altında gösterilir.
Sohbete devam etmek için önerilen istemlerden birini tıklayın. simgesini tıklayın.
Yapay zeka yardımının arka planda neler yaptığını daha iyi anlamak için bir araştırma adımının
Bir ilerleme çipini genişlettiğinizde, aracının yürüttüğü kodu ve döndürülen değerini görürsünüz. Yürütülen kodu, Console paneli ile yürütmek gibi başka amaçlarla kullanmak üzere kopyalayın.
Duraklatılan görüşmeler
Yapay zeka yardımı, yan etkileri olan kodlar oluşturabilir. Bu durumda, kod yürütülmeden önce görüşme duraklatılır.
Sohbet duraklatıldığında, temsilcinin önerdiği kodu inceleyin. Devam etmek için Devam'ı, yürütmeyi engellemek için İptal'i tıklayın.
Çalışma alanınızda yapılan değişiklikleri kaydetme
Bağlı bir çalışma alanı klasörüyle, yapay zeka yardımının önerdiği stil değişikliklerini bilgisayarınızdaki CSS kaynak dosyalarına geri kaydedebilirsiniz.
Bunu yapmak için:
Öncelikle meta veri dosyası oluşturun ve çalışma alanı klasörü bağlayın.
Alternatif olarak, klasörü manuel olarak ekleyebilirsiniz.
Öğeler panelinden sohbet başlatın.
CSS'nizi değiştirmek için yapay zeka yardımını kullanın.
Yapay zeka yardımı, kod oluşturabilir ve yürütmeyi duraklatabilir. Kodu inceleyin ve değişiklikleri canlı olarak test etmek için Devam'ı tıklayın.
Kaydedilmemiş değişiklikler bölümünü genişletin ve Çalışma alanına uygula'yı tıklayın.
diffiçindeki değişiklikleri inceleyin ve Tümünü kaydet'i tıklayın.
Bu iş akışı hakkında bilgi edinmek için:
Yanıt verilmedi
Yapay zeka yardımı, çeşitli nedenlerle yanıt vermeyebilir.
İsteminizin yapay zeka yardımının tartışabileceği bir konu olduğunu düşünüyorsanız hata kaydı oluşturun.
Görüşme geçmişi
Bir sohbete başladığınızda, sonraki her yanıt sizinle yapay zeka arasındaki önceki etkileşimlere göre belirlenir.
Yapay zeka desteği, oturumlar arasındaki sohbet geçmişinizi kaydeder. Böylece, DevTools veya Chrome yeniden yüklendikten sonra bile önceki sohbetlerinize erişebilirsiniz.
Konuşma geçmişinizi kontrol etmek için panelin sol üst köşesindeki kontrolleri kullanın.
Yeni ölçüm başlat
Şu anda seçili olan sohbet bağlamıyla yeni bir sohbet başlatmak için düğmesini tıklayın.
Devam
Eski bir etkileşime devam etmek için düğmesini tıklayın ve bağlam menüsünden etkileşimi seçin.
Sil
Bir görüşmeyi geçmişten silmek için düğmesini tıklayın.
Yanıtları değerlendirme ve geri bildirim sağlama
Yapay zeka yardımı deneysel bir özelliktir. Bu nedenle, yanıt kalitesini ve genel deneyimi nasıl iyileştirebileceğimizi öğrenmek için geri bildirimlerinizi bekliyoruz.
Yanıtları oylama
Yanıtın altındaki Beğen ve Beğenme düğmelerini kullanarak yanıtı değerlendirin.
Yanıtları bildirme
Uygunsuz içeriği bildirmek için oylama düğmelerinin yanındaki düğmesini tıklayın.