برنامه خود را در Project IDX اشکال زدایی کنید

Project IDX چند راه مختلف برای اشکال زدایی برنامه شما، مستقیماً از فضای کاری شما ارائه می دهد. برنامه‌های Web و Flutter، Lighthouse و Chrome DevTools را در پیش‌نمایش وب Chrome در فضای کاری شما ارائه می‌کنند. برنامه‌های Flutter پیش‌نمایش‌های iOS، Android و وب را برای بررسی و آزمایش برنامه شما در حین کدنویسی ارائه می‌دهند. Debug Console داخلی از اشکال زدایی خودکار برای اکثر زبان های رایج پشتیبانی می کند و اشکال زدایی سفارشی را می توانید در یک فایل launch.json در فضای کاری خود تعریف کنید.

پیش نمایش برنامه شما

IDX شامل پیش‌نمایش برنامه‌های درون فضای کاری برای برنامه‌های وب (Chrome و Safari موبایل) و برنامه‌های Flutter (iOS، Android، Chrome) است. پیش‌نمایش‌های Android و Chrome از بارگذاری مجدد و بازخوانی داغ پشتیبانی می‌کنند و قابلیت‌های کامل شبیه‌ساز را ارائه می‌دهند. شبیه‌سازهای Safari و iOS پیش‌نمایش‌های بصری و تعاملی را در انواع دستگاه‌های iOS ارائه می‌دهند و تجربه iOS را برای برنامه‌های موبایل و وب شبیه‌سازی می‌کنند.

برای کسب اطلاعات بیشتر درباره پیش‌نمایش‌های IDX، به پیش‌نمایش برنامه خود مراجعه کنید.

استفاده از Chrome DevTools برای پیش‌نمایش وب (تجربی)

Chrome DevTools به شما کمک می کند مشکلات موجود در برنامه خود را مستقیماً از پیش نمایش وب تشخیص دهید. می‌توانید به همان روشی که DevTools را از مرورگر Chrome خود باز می‌کنید، در پانل پیش‌نمایش وب IDX به Chrome DevTools دسترسی پیدا کنید.

این ویژگی آزمایشی است زیرا ما از طریق ایجاد یک تجربه کاربری ایده آل کار می کنیم. بازخورد خود را برای ما ارسال کنید تا به ما در ساخت بهتر آن کمک کنید.

1. Chrome DevTools را به فضای کاری IDX خود اضافه کنید:

   1. پنجره تنظیمات را با کلیک کردن روی نماد چرخ دنده یا فشار دادن Ctrl + ، (در Windows/Linux/ChromeOS) یا Cmd + , (در MacOS) باز کنید.
   2. تنظیم IDX: Web Dev Tools را پیدا کنید و فعال کردن Chrome DevTools برای پیش‌نمایش وب را انتخاب کنید (بارگذاری مجدد مرورگر لازم است) . اگر از فایل settings.json استفاده می کنید، می توانید "IDX.webDevTools": true .
   3. پنجره مرورگر خود را تازه کنید و فضای کاری IDX خود را دوباره بارگیری کنید.

2. باز کردن پیش‌نمایش وب در Project IDX: پالت فرمان را باز کنید ( Cmd+Shift+P در Mac یا Ctrl+Shift+P در ChromeOS، Windows یا Linux) و Project IDX: Show Web Preview را انتخاب کنید.

3. پانل DevTools در پانل پیش نمایش وب به حداقل می رسد. برای گسترش پانل و استفاده از DevTools در پانل پیش نمایش وب، روی نوار DevTools کلیک کنید.

از پنل DevTools در پیش‌نمایش وب IDX به همان روشی که برای اشکال‌زدایی برنامه خود در مرورگر کروم استفاده می‌کنید، استفاده کنید.

Lighthouse را برای پیش نمایش وب اجرا کنید

Lighthouse برنامه شما را بر اساس دسته بندی های ممیزی خاصی که انتخاب می کنید ممیزی می کند و گزارشی را با یافته ها و پیشنهادها برمی گرداند. می‌توانید گزارش‌های Lighthouse را مستقیماً از پیش‌نمایش وب در Project IDX اجرا کنید.

1. باز کردن پیش‌نمایش وب در Project IDX: پالت فرمان را باز کنید ( Cmd+Shift+P در Mac یا Ctrl+Shift+P در ChromeOS، Windows یا Linux) و Project IDX: Show Web Preview را انتخاب کنید.

2. روی نماد بررسی عملکرد از نوار ابزار پیش نمایش وب کلیک کنید.

3. در پنل Lighthouse، دسته بندی های ممیزی را که می خواهید انتخاب کنید. شما می توانید از میان گزارش های حسابرسی عملکرد ، دسترسی ، مطابقت با بهترین شیوه ها ، سئو و عملکرد برنامه وب پیشرو انتخاب کنید. برای تولید گزارش ها روی آنالیز صفحه کلیک کنید.

   تولید گزارش ها ممکن است چند دقیقه طول بکشد.

4. هنگامی که گزارش‌ها در پانل Lighthouse ظاهر می‌شوند، می‌توانید یافته‌های هر دسته ممیزی را مرور کنید، یا با کلیک کردن روی امتیاز و نام دسته، بین دسته‌های حسابرسی جابجا شوید.

از کنسول Debug استفاده کنید

Project IDX شامل کنسول Debug داخلی از Code OSS است. از این کنسول برای اشکال‌زدایی برنامه خود با اشکال‌زدایی‌های خارج از جعبه برای اکثر زبان‌های برنامه‌نویسی رایج استفاده کنید، یا یک برنامه افزودنی اشکال‌زدایی از VSCode Marketplace اضافه کنید.

اگر می خواهید اشکال زدایی سفارشی بنویسید، یک فایل launch.json را به فضای کاری خود اضافه کنید.