نحوه رفع مشکل BreakPoint در Blazor

iranasp Blazor

در برخی موارد پیش میاد که پروژه‌های از نوع WebAssembly شما با وجود قراردادن BreakPoint، امکان دیباگ کردن وجود نداره و شمایل BreakPoint قرار داده شده به فرم یک دایره توخالی دیده میشه.
برای حل این مشکل راهنمای زیر می‌تواند شما را در Hit کردن BreakPointها یاری کند.

روش اول
اول از همه توجه داشته باشید که دیباگ کردن پروژه‌های WASM فقط با مرورگرهای با هسته کروم (Chrome & Edge) انجام می‌شود.
با فرض داشتن شرایط کدنویسی استاندارد موارد زیر را تغییر دهید.

فایل launchSetting را باز کنید و در بخش IIS Express به دنبال کد زیر بگردید:

"launchBrowser": true,

و بلافاصله بعد از آن این کد را اضافه کنید:

"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",

در بخش WASM نیز همین روال را تکرار نمایید.
کد فوق سبب دو عامل زیر می‌شود:

  1. IDE را قادر به شناسایی Blazor WebAssembly می‌کند.
  2. اسکریپت‌های زیرساختی لازم برای اتصال به مرورگر را از طریق Blazor’s debugging proxy فراهم می‌کند.

اگر برنامه شما بر روی مسیر دیگری به غیر از \ وجود دارد، تغییرات زیر را در کد اعمال نمایید:

"iisSettings": {
  "iisExpress": {
    "applicationUrl": "http://localhost:{INSECURE PORT}/{APP BASE PATH}/",
    "sslPort": {SECURE PORT}
  }
},
"profiles": {
  ...
  "{PROFILE 1, 2, ... N}": {
    ...
    "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/{APP BASE PATH}/_framework/debug/ws-proxy?browser={browserInspectUri}",
    ...
  }
}

تغییرات فوق موجب خواهد شد BreakPointها به خوبی hit شوند. در برخی موارد که تغییرات فوق تاثیر لازم را ندارد این کد را به هر دو بخش IIS Express و WASM اضافه کنید:

"nativeDebugging": true

روش دوم

در این روش شما عملیات دیباگ رو داخل خود مرورگر انجام خواهید داد.

ابتدا مسیر پروژه WASM خود را در PowerShell باز کنید و کد زیر را برای شروع دیباگ پروژه در PowerShell وارد نمایید:

dotnet run --configuration Debug

آدرس اپلیکیشن خود را در مرورگز باز کنید (https://localhost:5001).

دکمه‌های Shift+Alt+D را برای باز شدن دیباگر مرورگر بزنید. در این حالت صفحه دیباگ باز می‌شود اما از آنجا که در بیشتر موارد Blazor و دیباگر کروم نمی‌توانند به هم متصل شوند، نیاز است کد زیر را در PowerShell وارد نمایید:

chrome --remote-debugging-port=9222 --user-data-dir="\Temp\blazor-chrome-debug" http://localhost:5000/

در این حالت پنجره جدیدی از App شما باز می‌شود، مجدداً دکمه‌های Shift+Alt+D را بزنید تا دیباگر باز شود. در این حالت شما می‌توانید سورس کد نوشته در اپلیکیشن خود را ببینید و به راحتی عملیات دیباگ را انجام دهید.

برای دیباگ کردن App بر روی IIS نیز می‌توانید گامهای اشاره شده در این لینک را انجام دهید.

منابع:
مایکروسافت
ITNEXT