IDX Projesi'nde uygulamanızın hatalarını ayıklayın

Project IDX, uygulamanızda doğrudan çalışma alanınızdan hata ayıklamanın birkaç farklı yolunu sunar. Web ve Flutter uygulamaları için bir web konsolu ve Lighthouse doğrudan çalışma alanına entegre edilmiştir. Flutter uygulamaları, kod yazarken uygulamanızı kontrol etmek ve test etmek için Android ve web önizlemeleri sunar.

Yerleşik Hata Ayıklama Konsolu aracılığıyla yaygın olarak kullanılan çoğu dil için daha zengin, hata noktası tabanlı hata ayıklama da kullanılabilir ve OpenVSX'ten gelen hata ayıklayıcı uzantılarıyla genişletilebilir. Ön uç web kodunuzun (ör. JavaScript) kullanabilirsiniz.

Uygulamanızı önizleme

IDX, web uygulamaları (Chrome ve mobil Safari) ve Flutter uygulamaları (iOS, Android, Chrome) için çalışma alanı içi uygulama önizlemeleri içerir. Android ve Chrome önizlemeleri, anında yeniden yükleme ve anında yenilemeyi destekler ve tam emülatör özelliklerini sunar. Safari ve iOS simülatörleri, çeşitli iOS cihazlarda görsel ve etkileşimli önizlemeler sunar ve mobil ile web uygulamaları için iOS deneyimini simüle eder.

IDX önizlemeleri hakkında daha fazla bilgi edinmek için Uygulamanızı önizleme başlıklı makaleyi inceleyin.

Web önizlemeleri için entegre web konsolunu kullanma

Entegre web konsolu, uygulamanızdaki sorunları doğrudan web önizlemesinden teşhis etmenize yardımcı olur. Alt kısımdaki çubuğu genişleterek IDX web önizleme panelindeki web konsoluna erişebilirsiniz.

Bu özelliğin deneysel olduğunu ve varsayılan olarak etkin olmadığını unutmayın. Bu özelliği etkinleştirmek için aşağıdaki adımları uygulayın ve denedikten sonra geri bildiriminizi paylaşın:

1. Web konsolunu IDX çalışma alanınıza ekleyin:

   1. Dişli simgesini tıklayarak veya Ctrl + , (Windows/Linux/ChromeOS'te) ya da Cmd + , (MacOS'te) tuşlarına basarak Ayarlar'ı açın.
   2. IDX: Web Geliştirme Araçları ayarını bulup etkinleştirin. settings.json dosyanızı doğrudan düzenliyorsanız "IDX.webDevTools": true ekleyebilirsiniz.
   3. IDX çalışma alanınızı yeniden yüklemek için tarayıcı pencerenizi yenileyin.

2. Proje IDX'de web önizlemesini açma: Komut paletini (Mac'te Cmd+Üst Karakter+P veya ChromeOS, Windows ya da Linux'ta Ctrl+Üst Karakter+P) açıp Proje IDX: Web Önizlemesini Göster'i seçin.

3. Web konsolu paneli varsayılan olarak web önizleme panelinde küçültülür. Çubuğu tıklayarak veya yukarı sürükleyerek genişletin.

IDX web önizlemesindeki web konsolu paneli, Chrome Geliştirme Araçları'ndaki gibi diğer konsollara benzer şekilde çalışır:

• Uygulamanızı kullanırken JavaScript hataları ve console.log ifadeleri burada görünür.
  • Hata ve uyarılar için, hata mesajının sağındaki Bu hatayı anlayın düğmesini seçerek IDX'deki Gemini'den yardım alma seçeneğiniz de vardır.
• Alt kısımdaki istem çubuğunu kullanarak istediğiniz JavaScript'i web önizlemeniz bağlamında değerlendirebilirsiniz.

Web önizlemeleri için Lighthouse'u çalıştırma

Lighthouse, seçtiğiniz belirli denetim kategorilerine göre uygulamanızı denetler ve bulguları ve önerileri içeren bir rapor döndürür. Lighthouse raporlarını doğrudan Project IDX'deki web önizlemesinden çalıştırabilirsiniz.

1. Proje IDX'de web önizlemesini açma: Komut paletini (Mac'te Cmd+Üst Karakter+P veya ChromeOS, Windows ya da Linux'ta Ctrl+Üst Karakter+P) açıp Proje IDX: Web Önizlemesini Göster'i seçin.

2. Web önizleme araç çubuğundan Lighthouse'u çalıştır simgesini tıklayın.

3. Lighthouse panelinde, istediğiniz denetleme kategorilerini seçin. Performans, erişilebilirlik, en iyi uygulamalara uygunluk, SEO ve Progresif Web Uygulaması performansı denetimi raporlarından birini seçebilirsiniz. Raporları oluşturmak için Sayfayı analiz et'i tıklayın.

   Raporların oluşturulması birkaç dakika sürebilir.

4. Raporlar Lighthouse panelinde göründükten sonra her denetim kategorisinin bulgularını inceleyebilir veya puanı ve kategori adını tıklayarak denetim kategorileri arasında geçiş yapabilirsiniz.

Hata Ayıklama Konsolu'nu kullanma

Project IDX, Code OSS'den yerleşik hata ayıklama konsolunu içerir. En yaygın programlama dilleri için hazır hata ayıklayıcılarla uygulamanızda hata ayıklama yapmak veya OpenVSX'ten hata ayıklama uzantısı eklemek için bu konsolu kullanın.

Hata ayıklama deneyiminizi özelleştirmek için çalışma alanınıza bir .vscode/launch.json dosyası da ekleyebilir ve özel başlatma yapılandırmaları belirtebilirsiniz.