1. Prerequisites 1. Предварительные требования

• Ensure you have emsdk installed. If not, follow my Emscripten Setup Guide. Убедитесь, что у вас установлен emsdk. Если нет, воспользуйтесь моим руководством по настройке Emscripten.
• Install the C/C++ DevTools Support (DWARF) extension: Chrome Web Store. This allows Chrome to read the debug information inside the .wasm file. Установите расширение C/C++ DevTools Support (DWARF): Chrome Web Store. Это позволит Chrome читать отладочную информацию внутри файла .wasm.
• Install http-server via npm to serve your files: Установите http-server через npm для запуска локального сервера:

  npm install -g http-server

2. Download and Build the Example 2. Загрузка и сборка примера

Download the example project: rectangles-debug-wasm-sdl3-c. Скачайте пример проекта: rectangles-debug-wasm-sdl3-c.

Open your terminal and run the following commands to build the project with debug symbols: Откройте терминал и выполните следующие команды для сборки проекта с отладочными символами:

cd rectangles-debug-wasm-sdl3-c
config-wasm
build-wasm
http-server -c-1

3. Debugging in Chrome 3. Отладка в Chrome

1. Open Chrome and navigate to http://localhost:8080/. Откройте Chrome и перейдите по адресу http://localhost:8080/.
2. Open DevTools (F12 or Ctrl+Shift+I). Откройте DevTools (F12 или Ctrl+Shift+I).
3. Go to the Sources tab. On the left panel, you should see a file:// entry representing your source tree. Перейдите на вкладку Sources. На левой панели вы должны увидеть запись file://, представляющую дерево ваших исходников.
4. Find main.c, click on a line number to set a breakpoint. Найдите main.c, нажмите на номер строки, чтобы установить точку остановки (breakpoint).
5. Refresh the page. The execution will pause at your breakpoint. Обновите страницу. Выполнение программы остановится на вашей точке остановки.
6. Press F10 to step over lines and inspect variables! Нажимайте F10, чтобы идти по шагам и проверять значения переменных!