ایندکس مطالب با سرعتی باور نکردنی
آموزش سرعت بخشیدن به ایندکس شدن مطالب در کوتاه ترین زمان
دسته بندی:
برترین‌های بلاگ
دیباگ 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” تغییر دهید.
خطایابی در ویژال استودیو 2017
همه چیز در تمپلیت قرار داده شده است پس اجرای برنامه‌ی جدید شما بدون مشکل انجام خواهد شد.
پروژه را با ویژال استودیو 2017 باز کرده و F5 بزنید.
Debugger برای کد های سمت سروری و سمت کاربری قرار داده شده اند.
خطایابی در کد های ویژوال استودیو
کدهای ویژوال استودیو تا چه حد با کد های Vue ایجاد شده هم خوانی دارند؟
در ابتدا مطمئن شوید که افزونه های #C و Debugger for chrome را دارید. حالا یک شاخه در ویژوال استودیو باز کنید:
بیشتر بخوانید:
حالا یک سری پیکر بندی برای اجرا انجام می دهیم.
پنل 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 در این خطایاب پشتیبانی نمی شوند.
نتیجه گیری:
کد های سمت کاربری یک برنامه مدرن، از ابزار ها و کتابخانه های زیادی استفاده می کنند که باید به شکل دقیق پیکر بندی شوند. خطایابی ASP.NET Core ، کدها نیاز به آشنایی روش آن ها دارد. وقتی که از ابزاری مثل Webpack استفاده می کنید، باید امکانات خطایابی در آن را فعال کنید. این پیکر بندی به همان روش کار با فایل های اصلی انجام می شود. خوشبختانه، تمپلیت های SPA پیکر بندی این ابزار ها و کتابخانه ها را برای شما انجام داده اند. این یعنی در ویژوال استودیو 2017بعد از ایجاد یک تمپلیت براحتی خطایابی انجام می شود.
کد های ویژوال استودیو که محیطی سبک برای کدنویسی است، نیاز به مراحل و یک سری افزونه ها دارد. در این مقاله به شکل ساده این مراحل و افزونه های مورد نیاز مورد بررسی قرار گرفتند.
