WebAssembly راهی برای اجرای، به عنوان مثال، کد C/C++ در وب با سرعت نزدیک به بومی و در کنار جاوا اسکریپت ارائه می دهد. این سند نحوه راه اندازی و استفاده از Chrome DevTools را برای اشکال زدایی بهتر چنین برنامه هایی نشان می دهد.
هنگامی که DevTools را راه اندازی کردید، می توانید:
- کد اصلی خود را در منابع > ویرایشگر بررسی کنید.
- اجرای را با نقاط شکست خط کد متوقف کنید و از کد منبع اصلی C/C++ خود عبور کنید، نه فایل باینری
.wasmکامپایل شده.
و در حالی که مکث کرده اید، می توانید:
- ماوس را روی متغیرها در فایل منبع اصلی نگه دارید و مقادیر آنها را ببینید.
- درک نام توابع در Call Stack و متغیرها در Scope .
- خروجی ویژگی های عمیق تو در تو و اشیاء پیچیده به کنسول .
- حافظه شی را با Memory Inspector بازرسی کنید.
راه اندازی کنید
برای فعال کردن اشکال‌زدایی C/C++ WebAssembly در DevTools:
برنامه خود را با اطلاعات اشکال زدایی DWARF کامپایل کنید. آخرین کامپایلر Emscripten را اجرا کنید و پرچم
-gرا به آن منتقل کنید. به عنوان مثال:emcc -g source.cc -o app.htmlبرای اطلاعات بیشتر، پروژه های ساختمانی با اطلاعات اشکال زدایی را ببینید.
افزونه کروم C/C++ DevTools Support (DWARF) را نصب کنید.
اشکال زدایی
با راه اندازی DevTools، کد خود را اشکال زدایی کنید:
- DevTools را باز کنید تا وب سایت خود را بررسی کنید. برای این آموزش، می توانید آن را در این صفحه نمایشی که با پرچم
-gمورد نیاز کامپایل شده است، امتحان کنید. - در صورت تمایل، فایل‌هایی را که تالیف کرده‌اید گروه‌بندی کنید تا پیمایش آسان‌تر شود. در منابع ، بررسی کنید
> صفحه > 
> گروه توسط تالیف / مستقر 
. - فایل منبع اصلی خود را از درخت فایل انتخاب کنید. در این مورد
mandelbrot.cc. برای تنظیم نقطه شکست خط کد ، روی یک شماره خط در ستون سمت چپ ویرایشگر کلیک کنید، مثلاً در خط 38.
دوباره کد را اجرا کنید. اجرا قبل از خط دارای نقطه شکست مکث می کند.
در حین توقف، موارد زیر را امتحان کنید:
- در Sources > Editor ، ماوس را روی یک متغیر نگه دارید تا مقدار آن را در یک راهنمای ابزار ببینید.
- در Sources > Call Stack ، نام توابع را همانطور که در منبع هستند مشاهده کنید.
- در Sources > Scope ، متغیرهای محلی و سراسری، انواع و مقادیر آنها را مشاهده کنید.
در کنسول ، متغیرها و اشیایی که در Scope به سختی می توان به آنها پیمایش کرد، خروجی می دهد:
- متغیرهای عمیق تو در تو، به عنوان مثال، موارد نمایه شده در آرایه های بزرگ.
- اشیاء پیچیده، از جمله مواردی که می توانید با اشاره گر (
->) به آنها دسترسی داشته باشید. آنها را برای بازرسی گسترش دهید.
- در Sources > Scope ، روی آن کلیک کنید
برای باز کردن Memory Inspector و بازرسی بایت های خام حافظه شی. برای اطلاعات بیشتر، به بازرسی حافظه WebAssembly مراجعه کنید.
عملکرد پروفایل
با راه اندازی و باز کردن DevTools، کدهایی که Chrome اجرا می شود بهینه نمی شود. برای اینکه تجربه بهتری در اشکال زدایی به شما ارائه دهد، سطح پایینی دارد.
در این مورد، نمی‌توانید برای عملکرد نمایه‌تان به console.time() و performance.now() تکیه کنید. در عوض، از پنل عملکرد برای نمایه استفاده کنید.
همچنین، می‌توانید کد پروفایل خود را بدون باز کردن DevTools اجرا کنید، سپس آن را باز کنید تا پیام‌های موجود در کنسول را بررسی کنید.
اطلاعات اشکال زدایی را از هم جدا کنید
برای سرعت بخشیدن به بارگیری اما همچنان تجربه بهتری در اشکال زدایی داشته باشید، می توانید اطلاعات اشکال زدایی را به یک فایل .wasm جداگانه تقسیم کنید. برای اطلاعات بیشتر، اشکال زدایی سریعتر WebAssembly را ببینید.
شما می توانید این فایل را به صورت محلی نگه دارید یا آن را در یک سرور جداگانه میزبانی کنید. برای انجام این کار با Emscripten، پرچم -gseparate-dwarf=<filename> را پاس کرده و مسیر فایل را مشخص کنید:
emcc -g source.cc -o app.html \
-gseparate-dwarf=temp.debug.wasm \
-s SEPARATE_DWARF_URL=[file://local/path/to/temp.debug.wasm] | [URL]
ساخت و اشکال زدایی روی ماشین های مختلف
اگر روی دستگاهی با سیستم عامل متفاوت (کانتینر، VM یا سرور راه دور) نسبت به دستگاهی که Chrome را روی آن اجرا می کنید، می سازید، ممکن است لازم باشد مسیرهای فایل اشکال زدایی را به صورت دستی ترسیم کنید.
به عنوان مثال، اگر پروژه شما در C:\src\project به صورت محلی است اما در یک ظرف Docker با مسیر /mnt/c/src/project ساخته شده است، موارد زیر را انجام دهید:
- به
chrome://extensions/بروید، پسوند C/C++ DevTools Support (DWARF) را پیدا کنید و روی Details > Extension options کلیک کنید. - مسیرهای فایل قدیمی و جدید را مشخص کنید.
بیشتر بدانید
برای اطلاعات بیشتر در مورد اشکال زدایی WebAssembly، وبلاگ مهندسی Chrome DevTools را بررسی کنید: