Geliştirici Araçları, web sitenizi anlamanıza ve bir yapay zeka temsilcisiyle sohbet ederek sorunları düzeltmenize yardımcı olan bir yapay zeka yardımı paneli sunar.
Yapay zeka desteği ile web sitenizin stilini, ağını, performansını ve kaynaklarını ayıklayabilirsiniz.
Yapay zeka yardımı 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 yardımı düğmesini tıklayın.
Panellerden
Paneli, ileti dizisi bağlamı seçilmiş halde doğrudan Öğeler, Ağ, Kaynaklar veya Performans panellerinden iki şekilde açabilirsiniz:
Bir öğenin, ağ isteğinin, kaynak dosyanın veya genişletilmiş bir performans analizinin yanındaki
Yapay zeka ile hata ayıklama düğmesini tıklayın.
Bir öğeyi, isteği, dosyayı veya izleme girişini sağ tıklayın ve Yapay zeka ile hata ayıklama bağlam menüsünden yaygın istem seçeneklerinden birini belirleyin.
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 rozetli 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.
İstem yazma
Yeni bir sohbet başlatırken yapay zeka yardımı, 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.
Bağlam içermeyen açık uçlu istemler
Serbest biçimli sohbet kutusuyla, önceden bağlam bilgisi vermeden üst düzey açık uçlu sorular sorabilirsiniz. Örneğin:
How to use DevTools to debug accessibility?Yapay zeka desteği, isteminize daha iyi yanıt verebilmek için önce erişilebilirlik konusunda bir Lighthouse denetimi gerçekleştirir.
What are the slowest network requests on this page?Yapay zeka yardımı, Ağ panelinde şüpheli isteklerin listesini ve bu isteklere ait bağlantıları sağlar. Böylece, tek bir tıklamayla bir isteği görüşme bağlamı olarak seçebilirsiniz.
What performance issues exist on the page?Yapay zeka yardımı, bu isteme yanıt vermek için seçtiğiniz ayarlarla otomatik olarak bir performans izi kaydeder.
How do I use the Animation panel?veyaWhere is the high contrast setting in DevTools?gibi istemler, doğrudan DevTools ile ilgili yardım sağlar.
Sohbeti başlattıktan sonra yapay zeka yardımı, sohbet boşken bağlamı işlemlerinize göre akıllıca günceller. Manuel seçimleriniz olduğunda ise bu seçimlere saygı gösterir.
Bağlam içeren istemler
Yapay zeka yardımını bir panelden açtığınızda, sohbet kutusunda ilgili görüşme bağlamı seçilir. Böylece, özellikle seçtiğiniz konu hakkında sohbet edebilirsiniz.
Dilediğiniz zaman Öğeler'de bir öğe, Ağ'da bir istek, Performans'ta bir izleme girişi veya Kaynaklar'da bir dosya seçerek bağlamı değiştirebilirsiniz.
Ayrıca, örneğin Kaynaklar panelinden bir dosyanın bölümlerini kopyalayıp sohbete yapıştırarak ne yaptığını sorabilirsiniz.
Ardından, farklı panellerde yapay zeka yardımını kullanma hakkında daha fazla bilgi edinin.
Stil oluşturma için yapay zeka yardımı
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.
Nesne panelinden Yapay Zeka Desteği'ni açma
Nesneler 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 Desteği gibi bir özelliği açtığınızda, incelenen DOM öğesi, görüşme 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 yardımı 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ünüm 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 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.
Ağ için yapay zeka yardımı
Web siteniz tarafından gönderilen istekleri anlamak için ağa yönelik yapay zeka yardımcısı panelini kullanın.
Ağ panelinden yapay zeka yardımını açma
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 yardımı, 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 yardımının 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 performansla ilgili yapay zeka yardımcısı 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 izi görünümü
İzleme görünümünden Yapay zeka yardımı'nı 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 bağlamı olarak önceden seçilir.
Görüşme bağlamı
Seçilen performans etkinliği, yapay zeka yardımı 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 sohbete başladıktan sonra, yapay zeka yardımcısı 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 yardımı, isteminizi yanıtlamak için seçilen görüşme ağacındaki zamanlamaları kullanıyor.
Yapay zeka yardımcısı 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 yardımı
Web siteniz tarafından yüklenen ve kullanılan dosyaları anlamak için kaynaklarla ilgili Yapay zeka yardımı panelini kullanın.
Kaynaklar panelinden yapay zeka yardımını açma
Kaynaklar panelinden Yapay zeka yardımı'nı açmak için bir dosyayı sağ tıklayın ve Yapay zekaya sor seçeneğini belirleyin.
Yapay zeka yardımını bu şekilde açtığınızda, seçili dosya görüşme 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 yardımı 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 yardımı, 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 yardımının 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 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 kamera arkasında 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ğ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 yardımı, 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 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 aşağıdaki makaleye göz atın:
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, Geliştirici Araçları 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
Geçmiş bir görüşmeye devam etmek için düğmesini tıklayın ve içerik menüsünden görüşmeyi 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 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.