Geliştirici Araçları, yerleşik bir yapay zeka aracısıyla sohbet ederek web sitenizi anlamanıza ve sorunları düzeltmenize yardımcı olan bir yapay zeka yardımcısı paneli sunar.
Yapay zeka yardımı paneli Gemini tarafından desteklenir ve şunları yapar:
- Web geliştirme konusunda uzmanlaşmıştır.
- Tüm web sayfasıyla ilgili genel soruları yanıtlayabilir ve stil, ağ, performans gibi çeşitli konular hakkında özel analizler sunabilir.
- DOM öğeleri, ağ istekleri, performans izleme etkinlikleri gibi belirli bir bağlamı sizin için bağımsız olarak daraltır ve seçer.
- Denetim çalıştırma ve performans izlerini kaydetme gibi bağımsız işlemler gerçekleştirebilir.
- İşlemlerini ve gerekçelerini adım adım açıklayarak Geliştirici Araçları'nın ilgili bölümlerine bağlantılar verir. Böylece, bu bölümleri tek bir tıklamayla inceleyebilirsiniz.
- Kod değişiklikleri önerebilir ve kodlama aracınızın çalıştırması için analizleriyle birlikte bir istem oluşturabilir.
Yapay zeka desteği ile stil, ağ, performans, web sitenizin kaynakları ve daha birçok konuda hata 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 varsayılan olarak ç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 sohbete başlarken 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 daha ü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 yönelik 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 Elements'taki bir öğeyi, Network'teki bir isteği, Performance'taki bir izleme girişini veya Sources'taki bir dosyayı seçerek bağlamı manuel olarak 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, Yapay zeka yardımı'nda görüşme akışı hakkında daha fazla bilgi edinin.
İleti dizisi akışı
İstem göndermek, 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.
Temsilci ilerlemesi adımlar halinde gösterilir. İlk adım durumu Investigating…'dır.
İlk adım etiketi, temsilci isteminize yanıt vermek için daha spesifik işlemler gerçekleştirdikçe güncellenir.
Hata ayıklama işlemine bağlı olarak, ajan DevTools'da performans izi kaydetme veya Lighthouse denetimleri çalıştırma gibi işlemleri de yürütebilir.
Aracı için adım adım açıklamalı kılavuz
Aracı, isteminize yanıt oluşturduktan sonra ilk adım etiketi Aracının adım adım açıklamasını göster veya Düşünme sürecini göster olarak değişir. Bu etiketi genişleterek sağdaki yan panelde aracının verileri analiz etmek için attığı adımları görebilirsiniz.
Bu adımlar şunlardır:
- Ajanın döndürülen verilerle birlikte yürüttüğü genişletilebilir kod snippet'leri. Kodu kopyalayıp Konsol'da çalıştırabilirsiniz.
- Bulguları daha okunabilir bir biçimde sunan widget'lar.
Widget'ların sağ üst köşesinde, sizi Geliştirici Araçları'nın ilgili bölümüne yönlendiren bir Göster düğmesi bulunur.
Takip istemleri
Temsilci nihai bir yanıta ulaştığında ek istemler önerebilir. Sohbete devam etmek için herhangi birini tıklayın.
Kodlama ajanınız için istem oluşturma
Kodlama ajanınız için istem oluşturmak üzere Kodlama ajanına kopyala'yı tıklayın.
Aracı, bulgularını ve analizlerini özetleyip işlem yapılabilir bir istem sunar. Bu istem, küçültülmüş biçimde veya okunabilir Markdown biçiminde olur. İstemleri panoya kopyalayıp istediğiniz yapay zeka aracısıyla kodlamaya devam edebilirsiniz.
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.
Önerilen kod değişikliklerini Değişiklikler panelinde inceleyebilirsiniz.
Aracı, değişiklikleri Geliştirici Araçları'nda uygular ancak çalışma alanınızı, Geliştirici Araçları'nın değişiklikleri kaynaklarınıza kaydetmesine izin verecek şekilde yapılandırabilirsiniz.
Ç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 görüşme bağlamıyla yeni bir görüşme 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.