خطایابی ASP.NET Core در کد های ویژال استودیو!

مایکروسافت به شکل منظم و دوره ای تمپلیت های SPA را برای ASP.NET Core بروز رسانی می کند. این تمپلیت ها نقطه ی شروع بسیار خوبی برای ایجاد برنامه های تک صفحه ای با استفاده از فریم ورک هایی مثل آنگولار، ریکت و Vue و محیط های کدنویسی مثل ویژوال استودیو هستند.

در این مقاله، روش خطایابی ASP.NET Core برای برنامه های ساخته شده در سمت سرور و کاربر با استفاده از کدهای ویژال استودیو را با هم بررسی می کنیم.

استفاده از کد های ویژال استودیو بریا خطایابی در برنامه های ASP.NET Core

راه اندازی یک پروژه ی جدید SPA

شما می توانید یک پروژه ی SPA را از اول شروع کنید و به شکل دسته ی همه ابزار ها و کتابخانه ها را پیکر بندی کنید.

گزینه ی دیگر، نصب تمپلیت های SPA است که توسط مایکروسافت ارائه شده اند. نصب تمپلیت ها به آسانی اجرای دات نت است:

dotnet new –install Microsoft.AspNetCore.SpaTemplates::*

پس اگر شما دات نت را در یک کنسول جدید نصب کنید، تمپلیت های مختلف SPA را خواهید دید:

در این مقاله من از VUE استفاده می کنم چون براحتی می توان ایده های مشابه را در آن پیاده سازی نمود.

برای ایجاد یک پروژه ی Vue جدید، فرمان زیر را در کنسول اجرا کنید:

• mkdir new-project
• cd new-project
• dotnet new vue

این فرمان یک پروژه ی جدید با استفاده از تمپلیت SPA برای شما ایجاد می کند. حالا بیاید پروژه را اجرا کرده و همه چیز را بررسی کنیم.

کل پروژه در ویژوال

پروژه ی اجرا شده

در سطوح بالا همه ی آن چه نیاز دارید موارد زیر می باشد:

• یک سرور NET Core

• متن کدهای Vue

• Bootstrap 3

• Webpack که کد های jc/css را برای مرورگر تولید می‌کند که برای تولید و کدنویسی طراحی شده‌اند.

اجرا از طریق خط فرمان

براحتی می توانید پروژه ی خود را مستقیما از خط فرمان اجرا کنید.

• بعد از نصب حتما Restore&&npm را اجرا کنید تا تمامی موارد لازم نصب شوند
• برای اجرا در حالت خطایابی، شما باید متغیر محیط ASPNETCOE_ENVIRONMENT را به”development” تغییر دهید.

خطایابی در ویژال استودیو ۲۰۱۷

همه چیز در تمپلیت قرار داده شده است پس اجرای برنامه‌ی جدید شما بدون مشکل انجام خواهد شد.

پروژه را با ویژال استودیو ۲۰۱۷ باز کرده و F5 بزنید.

Debugger برای کد های سمت سروری و سمت کاربری قرار داده شده اند.

خطایابی در کد های ویژوال استودیو

کدهای ویژوال استودیو تا چه حد با کد های Vue ایجاد شده هم خوانی دارند؟

در ابتدا مطمئن شوید که افزونه های #C  و Debugger for chrome را دارید. حالا یک شاخه در ویژوال استودیو باز کنید:

بیشتر بخوانید:

آموزش Asp core

حالا یک سری پیکر بندی برای اجرا انجام می دهیم.

پنل Debug را باز کرده و بر روی آیکون چرخ دنده ای شکل کلیک کنید. چون افزونه ی #C را نصب کرده اید، کزینه ی .NET Core را مشاهده می کنید. بر روی آن کلیک کنید تا launch.json تولید شود که برای خطایابی از آن استفاده خواهد شد.

در پنل debug شما گزینه های زیادی دارید.

اگر گزینه ی ( Net Core Launch web) را انتخاب و F5 بزنید پیغام Could not find the prelLaunchTask ‘build’ را مشاهده می کنید.

• اگر شما فایل json را بررسی کنید، خواهید دید که "preLaunchTask": "build".

• این یعنی باید قبل از اجرای پروژه ساختار دات نت تظنیم شود.

فقط بر روی task runner کلیک کنید و گزینه ی .net را انتخاب کنید. یک فایل tasks.json ایجاد می شود که به ویژوال استودیو نحوه‌ی اجرای فرمان های .net core را معرفی می کند.

حالا F5 بزنید. خطای زیر را نمایش داده می شود.

aunch.json must be configured. Change ‘program’ to the path to the executable file that you would like to debug.

این یعنی فایل launch.json نیاز به تغییراتی دارد. اگر آن‌را باز کنید پارامتر زیر را خواهید دید:

“program”: “${workspaceRoot}/bin/Debug//”,

این پارامتر باید به شکل زیر تغییر کند:

“program”: “${workspaceRoot}/bin/Debug/netcoreapp1.1/AspCoreVue.dll”

قبل از اجرای پروژه باید موارد زیر را رعایت کنید:

• همانطور که خواهیم دید، تمپلیت Vue از Webpack برای تولید js/css ها استفاده می کند.

• تمامی ماژول‌های npm باید اجرا شوند.

نهایتا، وقتی که فایل های لازم launch.json/tasks.json ایجاد شدند می توانیم پروژه را در حالت خطایابی اجرا کنیم. به شکل زیر مرورگر باز و پروژه در Debugger نمایش داده می شود:

توجه داشته باشید که برای کدنویسی سمت سرور نیز این پشتیبانی وجود دارد. کدهای سمت کاربری Vue در این خطایاب پشتیبانی نمی شوند.