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

IDX projesi, uygulamanızdaki hataları doğrudan çalışma alanınızdan ayıklayabilmeniz için birkaç farklı yol sunar. Web ve Flutter uygulamaları, çalışma alanınızdaki Chrome web önizlemesinde Lighthouse ve Chrome Geliştirici Araçları'nı sunar. Flutter uygulamaları; kod yazarken uygulamanızı rastgele kontrol edip test etmeniz için iOS, Android ve web önizlemeleri sunar. Yerleşik Hata Ayıklama Konsolu, en yaygın diller için otomatik hata ayıklamayı ve çalışma alanınızdaki bir launch.json dosyasında tanımlayabileceğiniz özel hata ayıklamayı destekler.

Uygulamanızı önizleyin

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

IDX önizlemeleri hakkında daha fazla bilgi edinmek için Uygulamanızı önizleme bölümünü inceleyin.

Web önizlemeleri için Chrome Geliştirici Araçları'nı kullan (deneysel)

Chrome Geliştirici Araçları, uygulamanızdaki sorunları doğrudan web önizlemesinden teşhis etmenize yardımcı olur. Chrome Geliştirici Araçları'na, IDX web önizleme panelinde, Geliştirici Araçları'nı Chrome tarayıcınızdan açtığınız gibi erişebilirsiniz.

Biz ideal bir kullanıcı deneyimi oluşturmaya çalıştığımız için bu özellik deneyseldir. Ürünü daha iyi hale getirmemize yardımcı olmak için bize geri bildirim gönderin.

1. Chrome Geliştirici Araçları'nı IDX çalışma alanınıza ekleyin:

   1. Dişli simgesini tıklayarak veya Ctrl + , (Windows/Linux/ChromeOS'te) veya Cmd + , (MacOS'te) tuşlarına basarak Ayarlar penceresini açın.
   2. IDX: Web Geliştirici Araçları ayarını bulun ve Web önizlemesi için Chrome Geliştirici Araçları'nı etkinleştir (tarayıcının yeniden yüklenmesi gerekir) seçeneğini belirleyin. settings.json dosyası kullanıyorsanız "IDX.webDevTools": true politikasını da ayarlayabilirsiniz.
   3. Tarayıcı pencerenizi yenileyin ve IDX çalışma alanınızı yeniden yükleyin.

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

3. DevTools paneli, web önizleme paneli içinde küçültülmüştür. Paneli genişletmek için DevTools çubuğunu tıklayın ve web önizleme panelindeki Geliştirici Araçları'nı kullanın.

IDX web önizlemesindeki Geliştirici Araçları panelini, Chrome Tarayıcıdaki uygulamanızdaki hata ayıklama işlemlerini yaptığınız şekilde kullanın.

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

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

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

2. Web önizlemesi araç çubuğundan performans kontrolü simgesini tıklayın.

3. Lighthouse panelinde, istediğiniz denetim kategorilerini seçin. Performans, erişilebilirlik, en iyi uygulamalara uygunluk, SEO ve Progresif Web Uygulaması performansını denetleyen raporlar arasından seçim yapabilirsiniz. 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 bir denetim kategorisine ilişkin bulguları inceleyebilir veya puan ve kategori adını tıklayarak denetim kategorileri arasında geçiş yapabilirsiniz.

Hata Ayıklama Konsolunu Kullanma

IDX projesi, Code OSS'deki yerleşik Hata Ayıklama Konsolu'nu içerir. En yaygın programlama dilleri için kullanıma hazır hata ayıklayıcılarıyla uygulamanızda hata ayıklamak için bu konsolu kullanın veya VSCode Marketplace'ten bir hata ayıklama uzantısı ekleyin.

Özel hata ayıklama kodu yazmak istiyorsanız çalışma alanınıza bir launch.json dosyası ekleyin.