angular - چگونه میتوان وبورکری که با تایپاسکریپت نوشته شده را در ابزار توسعه کروم اشکالزدایی کرد

من روی یک برنامه Angular 9 کار میکنم و ما از وب ورکِرها برای محاسبات سنگینتر استفاده میکنیم. کل برنامه به زبان تایپاسکریپت نوشته شده است، از جمله وب ورکِرها. متأسفانه، نمیتوانم روش مناسب برای تهیه نقشهمنبع (sourcemap) توسط بیلد Angular برای کد وب ورکِر پیدا کنم تا دیباگر کروم بتواند خط به خط کد را دنبال کند.

راه حل ترجیحی این بود که بتوانم کد کارگر TypeScript خود را مرحله به مرحله اجرا کنم، همانطور که میتوانم کد TypeScript برای رشته اصلی را مرحله به مرحله اجرا کنم. با این حال، با توجه به اینکه هیچ توانایی برای اشکالزدایی کارگران TypeScript ندارم، حتی توانایی اجرای مرحله به مرحله جاوااسکریپت تبدیلشده نیز یک موفقیت خواهد بود.

این چیزی است که من میبینم رخ میدهد:

من یک فایل در پروژهی Angular خود دارم به نام editor.worker.ts که وبورکر را توضیح میدهد. این ورکر در جای دیگری به صورت زیر نمونهسازی میشود:

const worker = new Worker('./editor.worker', { name: 'Editor', type: 'module' });

پس از ساخت برنامه و بارگذاری آن در کروم، وقتی به تب Sources در devtools میروم و به دنبال worker میگردم، ۲ فایل پیدا میکنم:

• editor.worker.ts فقط حاوی یک خط است:

  module.exports = __webpack_public_path__ + "Editor.worker.js"
  

• Editor.worker.js حاوی جاوااسکریپت ترنسپایل شده است.

با اجرای برنامه در کروم، میتوانم نقاط توقف را در فایل .js تبدیلشده تنظیم کنم و دیباگر هنگام رسیدن به خط کد، متوقف میشود. با این حال، خط برجسته در منبع، همان خط تنها در editor.worker.ts است. وقتی به فایل منبع Editor.worker.js برمیگردم، نقطه توقف من دیگر نمایش داده نمیشود و دیباگر خط کد خاصی که اجرای برنامه در آن متوقف شده را تشخیص نمیدهد و من قادر به قدم زدن در کد نیستم. (فشار دادن F8 واقعا باعث ادامه اجرای برنامه میشود، همانطور که انتظار میرود.)

به نظر میرسد که ممکن است یک تنظیم webpack برای workers را از دست داده باشم، یا یک دستور TypeScript برای انجام کار خاصی با sourcemap، یا هر دو. از هر کمکی برای شروع دیباگ کردن workers TypeScript من قدردانی میکنم. ممنون!

پاسخ شماره ۱

من با همان مشکل در نسخه کروم 88.0.4324.190 مواجه شدم. سعی کردم کد وبوَرکرم را از TS به JS تبدیل کنم اما موفق نشدم، به نظر میرسد که ممکن است مشکل از کرومیوم باشد. خوشبختانه توانستم منبع وبوِرکر را در ابزارهای توسعه فایرفاکس پیدا کنم و توانستم همانطور که انتظار میرفت دیباگ کنم.