Geliştirici Araçları, web sitenizi anlamanıza ve bir yapay zeka ajanıyla sohbet ederek sorunları düzeltmenize yardımcı olan bir Yapay Zeka Desteği paneli sunar.
Yapay zeka desteği ile web sitenizin stilini, ağını, performansını ve kaynaklarını ayıklayabilirsiniz.
Yapay Zeka Desteği panelinde Gemini ile etkili bir şekilde sohbet etmek için paneli açmayı, istem girmeyi ve sohbet akışını kontrol etmeyi öğrenin.
Yapay Zeka Desteği panelini açma
Yapay Zeka Desteği paneli çekmecede açılır.
Paneli açmak için üstteki ana araç çubuğunun sağ tarafındaki genel giriş noktasında bulunan Yapay Zeka Desteği düğmesini tıklayın.
Paneli doğrudan Öğeler, Ağ, Kaynaklar veya Performans panellerinden de açabilirsiniz. Bunun için bir öğeyi veya isteği sağ tıklayıp Yapay zekaya sor'u seçin.
Komut menüsünden
Komut menüsünden Yapay Zeka Desteği'ni açmak için AI yazın ve ardından yanındaki Çekmece rozetli Yapay Zeka Desteğini 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 Desteği'ni seçin.
İstem girme
Yeni bir görüşme başlatırken Yapay Zeka Desteği, hızlı bir başlangıç yapmanıza yardımcı olmak için örnek istemler sunar.
Panelin alt kısmındaki istem giriş alanını önceden doldurmak için istemlerden herhangi 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.
Ücretsiz sohbet kutusunu kullanarak "Erişilebilirlikte hata ayıklamak için geliştirici araçları nasıl kullanılır?" veya "Hangi ağ istekleri yavaş?" gibi üst düzey sorular sorabilir, ayrıca bir dosyanın bölümlerini (ör. Kaynaklar panelinden) kopyalayıp sohbete yapıştırarak ne işe yaradığını sorabilirsiniz.
Stil oluşturma için Yapay Zeka Desteği
Bir web sitesinin genel düzenini, belirli öğe stillerini anlamak ve CSS hataları için yapay zekayla üretilen düzeltmeleri almak amacıyla stil oluşturma için Yapay Zeka Desteği panelini kullanın.
Nesne panelinden Yapay Zeka Desteği'ni açma
Öğeler panelinden Yapay Zeka Desteği'ni 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 Desteği gibi bir özelliği 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.
Görüşme bağlamı
Yapay Zeka Desteği ile yapılan 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üntü alanının ekran görüntüsünü alıp 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 Desteği, 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.
Ağ için Yapay Zeka Desteği
Web siteniz tarafından gönderilen istekleri anlamak için ağa yönelik Yapay Zeka Desteği panelini kullanın.
Ağ panelinden Yapay Zeka Desteği
Ağ panelinden Yapay Zeka Desteği'ni açmak için bir isteği sağ tıklayın ve Yapay Zeka'ya Sor seçeneğini belirleyin.
Yapay Zeka Desteği gibi bir özelliği açtığınızda, seçilen ağ isteği ileti dizisi için bağlam olarak önceden seçilir.
Alternatif olarak, fareyle üzerine geldiğiniz ağ isteğinin yanındaki kayan düğmeyi tıklayın.
Görüşme bağlamı
Yapay zeka yardımı ile yapılan sohbetler, Ağ paneli istek listesinde şu anda seçili olan ağ isteğiyle ilgilidir. Bu isteğe yapılan bir referans, panelin sol alt köşesinde gösterilir.
Ağ panelinde başka bir isteği tıklayarak bağlamı değiştirin.
Yapay Zeka Desteği, sorularınızı yanıtlamak için istek URL'sini, başlıkları, zamanlamaları ve istek başlatıcı zincirini kullanıyor.
Önemli: Hassas bilgiler içerebilecek başlıklar otomatik olarak çıkarılır.
Yapay Zeka Desteği'nin kullandığı ham verileri görmek için görüşme başlattıktan sonra Analyzing network data çipindeki Genişlet düğmesini tıklayın.
Performans için yapay zeka desteği
Performans panelinde kaydedilen performans profillerini anlamak için Yapay Zeka Desteği panelini kullanın.
Performans panelinden Yapay Zeka Desteği'ni açma
Performans panelinden Yapay Zeka Desteği'ni açmak için önce performans profili kaydedin.
İncelemek istediğiniz şeye bağlı olarak **Yapay zeka yardımı** panelini tek tek performans analizlerinden veya performans izleme görünümündeki etkinliklerden açabilirsiniz.
Performans analizleri
Analizler sekmesinde bir analizi (ör. **Aşamaya göre LCP**) açın ve **Yapay zekaya sor** düğmesini tıklayın.
Geliştirici Araçları, bu performans analiziyle Yapay Zeka Desteği panelini açar. Bu analiz, görüşme için bağlam olarak önceden seçilmiştir.
Performans izleme görünümü
İzleme görünümünden Yapay Zeka Desteği'ni açmak için bir etkinliği sağ tıklayın ve Yapay zekaya sor seçeneğini belirleyin.
Bu durumda, bu etkinlik, görüşme için bağlam olarak önceden seçilir.
Görüşme bağlamı
Seçilen performans etkinliği, Yapay Zeka Desteği ile yaptığınız görüşmede bağlam olarak kullanılır. Bu etkinliğe yapılan referans, panelin sol alt köşesinde gösterilir.
Performans analizleri
Belirli bir performans analizi için Yapay zekaya sor'u tıkladıysanız bu analiz, seçili bağlam olarak gösterilir. Seçiminizi değiştirmek için diğer analizlerin altındaki Yapay zekaya sor'u tıklayabilirsiniz.
Bir sohbet başlattıktan sonra, Yapay Zeka Desteği tarafından kullanılan ham verileri görmek için Analyzing insight: ... bölümünü genişletin.
Trace görünümü
Performans izinde farklı öğeler seçebilirsiniz. Bağlam buna göre değişir.
Yapay Zeka Desteği, isteminizi yanıtlamak için seçilen görüşme ağacındaki zamanlamaları kullanıyor.
Yapay Zeka Desteği tarafından kullanılan ham verileri görmek için sohbet başlattıktan sonra
çipindeki Analyzing call tree düğmesini tıklayın.
Kaynaklar için yapay zeka desteği
Web siteniz tarafından yüklenen ve kullanılan dosyaları anlamak için kaynaklarla ilgili Yapay Zeka Desteği panelini kullanın.
Kaynaklar panelinden Yapay Zeka Desteği
Kaynaklar panelinden Yapay Zeka Desteği'ni açmak için bir dosyayı sağ tıklayın ve Yapay zekaya sor seçeneğini belirleyin.
Yapay Zeka Desteği gibi bir şeyi açtığınızda, seçilen dosya görüşme için bağlam olarak önceden seçilir.
Alternatif olarak, bir dosyanın üzerine geldiğinizde kayan düğmeyi tıklayın.
Görüşme bağlamı
Seçilen dosya, Yapay Zeka Desteği ile görüşmenizde bağlam olarak kullanılır. Bu dosyaya yapılan referans, panelin sol alt köşesinde gösterilir.
Kaynaklar panelinde başka bir dosyayı tıklayarak bağlamı değiştirin.
Yapay Zeka Desteği, sorularınızı yanıtlamak için seçilen dosyanın adını, URL'sini, kaynak haritasını (varsa) ve içeriğini kullanır.
Yapay Zeka Desteği'nin kullandığı ham verileri görmek için görüşme başlattıktan sonra Analyzing file çipindeki düğmesini tıklayın.
Görüşme akışı
İstem göndermek, stilist temsilciyle sohbeti başlatır. Ajan, isteminize en iyi şekilde yanıt vermek için web API'lerini çağıran JavaScript kodu 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.
Temsilci nihai bir yanıta ulaştığında, yanıt, takip istemleriyle ilgili öneriler de dahil olmak üzere inceleme 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 Desteği'nin arka planda neler yaptığını daha iyi anlamak için bir inceleme adımının
Bir ilerleme çipini genişlettiğinizde, aracının yürüttüğü kodu ve döndürülen değeri görürsünüz. Yürütülen kodu, Console paneli ile yürütmek gibi daha sonraki kullanımlar için kopyalayın.
Duraklatılan görüşmeler
Yapay Zeka Desteği, yan etkileri olan kodlar oluşturabilir. Bu durumda, kod yürütülmeden önce görüşme duraklatılır.
Görüşme duraklatıldığında temsilcinin önerdiği kodu inceleyin. Devam etmek için Devam'ı, yürütmeyi önlemek için İptal'i tıklayın.
Çalışma alanınızdaki değişiklikleri kaydetme
Bağlı bir çalışma alanı klasörü ile Yapay Zeka Desteği'nin ö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 da ekleyebilirsiniz.
Öğeler panelinden sohbet başlatın.
CSS'nizi değiştirmek için Yapay Zeka Desteği'ni kullanın.
Yapay Zeka Desteği 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 aşağıdaki makaleye göz atın:
Yanıt verilmedi
Yapay Zeka Desteği, çeşitli nedenlerle yanıt vermeyebilir.
İsteminizin Yapay Zeka Desteği'nin 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 görüşme geçmişinizi kaydeder. Böylece, DevTools veya Chrome yeniden yüklendikten sonra bile önceki sohbetlerinize erişebilirsiniz.
Görüşme 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ı ile 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 sohbeti geçmişten silmek için düğmesini tıklayın.
Yanıtları değerlendirme ve geri bildirim sağlama
Yapay Zeka Desteği 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.