SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств

• Выполните пошаговую инструкцию для создания стартового примера: Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве (в начале той инструкции можно скачать результат в виде архива: mouse-and-touch-handlers-sdl3.zip)
• По инструкции выше мы создали проект с именем "mouse-and-touch-handlers-sdl3". Переименуйте папку проекта, добавив в начале имени "debug-", то есть у вас получится "debug-mouse-and-touch-handlers-sdl3"
• Откройте папку с проектом в каком-нибудь редакторе кода, например, в Notepad++ и в Sublime Text 4 (ST4). Скачать ST4 можно здесь: https://www.sublimetext.com/download После установки ST4 нужно добавить в Path папку куда установилась ST4, тогда вы сможете зайти в папку проекта из консоли (например, из Far Manager) и набрать subl + точка вот так:
  

  Bash
  1 subl .

• Так выглядит стартовый пример, открытый в ST4:
  
• Откройте в редакторе года файл CMakeLists.txt и исправьте название проекта в команде "project()":
  
  Было:
  
  

  C
  1 project(mouse-and-touch-handlers-sdl3)

  Стало:
  
  

  C
  1 project(debug-mouse-and-touch-handlers-sdl3)

• Примечание. Не забывайте сохранять файлы проекта после редактирования, нажимая Ctrl+S
  

Активация режима разработчика и отладки на Android по USB-кабелю

• Находите иконку с настройками "Settings" и нажимаете на неё. Открываются настройки
• Нажимаете "About phone"
• Далее, нажимаете на "MIUI version" подряд семь раз. Режим разработчика активирован
• Вернитесь назад в главные настройки
• Пролистайте почти в самый вниз
• Выберите "Additional settings"
• Пролистайте до самой последней строки под названием "Developer options"
• Пролистайте немного вниз и увидите опцию "USB debugging". Включите эту опцию
• Отладка по USB-кабелю активирована

Сборка проекта в Wasm

• Откройте консоль CMD внутри папки с проектом - можете просто в адресной строке папки Windows набрать "cmd" (без ковычек) и нажать Enter
• Введите команду конфигурирования, запустив bash-файл, который находится в папке проекта:
  

  Bash
  1 config-web

• Введите команду сборки (это батник):
  

  Bash
  1 build-web

• После сборки в папке "public/js" появятся два файла: "app.js" и "app.wasm". Файл "app.js" служит промежуточным звеном для подключения файла "app.wasm". Файл "app.js" подключается в файле "public/index.html"

Запуск Wasm-проекта локально на Android и Desktop с помощью локального сервера http-server

• Скачайте Node.js по ссылке https://nodejs.org/en/download и установите с опциями по умолчанию
• В CMD введите команду для глобально установки (ключ -g) пакета http-server:
  

  Bash
  1 npm i http-server -g

Запуск локального сервера и клиента на Desktop

• Если http-server у вас установлен глобально, то скопируйте команду запуска локального сервера:
  

  Bash
  1 http-server -c-1

• В консоль будут выведены адреса, у меня такие:
  

  Code
  1 2 3 4 Available on:   http://192.168.1.65:8080   http://127.0.0.1:8080 Hit CTRL-C to stop the server

• Вместо "127.0.0.1" можно использовать "localhost" и набрать в браузере на Desktop:
  

  Code
  1 localhost:8080

• Вы увидите, что приложение запущено в браузере. Вы можете открыть консоль разработчика в браузера (Ctrl+Shift+J в Chrome) и кликнуть по холсту. В браузер будут выведено сообщение "Клик мышью", благоданя обработчику клика мыши:
  

  C

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 SDL_AppResult SDL_AppEvent(void *appstate, SDL_Event *event) {     if (event->type == SDL_EVENT_QUIT)     {         return SDL_APP_SUCCESS;     }     else if(event->type == SDL_EVENT_MOUSE_BUTTON_DOWN)     {         printf("Клик мышью\n");     }     else if(event->type == SDL_EVENT_FINGER_DOWN)     {         printf("Касание экрана\n");     }       return SDL_APP_CONTINUE; }

Запуск клиента на Android с помощью локального сервера на Desktop

• Подключите смартфон по USB-кабелю к компьютеру
• На смартфоне откройте Chrome и введите "localhost:8080" (без ковычек). Вы увидите надпись:
  

  Code
  1 This site can't be reached

• В браузере на компьютере перейдите по адресу: chrome://inspect
• Нажмите на кнопку "Port forwarding...":
  
• В открывшемся диалоговом окне наберите "8080", "localhost:8080", поставьте галочку "Enable port forwarding" и нажмите кнопку "Done":
  
• Возьмите смартфон и обновите страницу мобильного браузера
• Примечание. Обновить окно браузера на смартфоне можно несколькими способами: нажать кнопку "Reload", провести пальцем сверху вниз (но не на холсте, а рядом или ниже), либо три точки в правом верхнем углу смартфона и выбрать кнопку с круговой стрелкой
• Вы увидите веб-приложение запущенное в браузере мобильного устройства

Вывод консоли браузера мобильного устройства в консоль браузера компьютера

• Убедитесь, что телефон подключен по USB и страница открыта на нем
• На компьютере в Chrome перейдите по знакомому адресу: chrome://inspect/#devices
• Найдите в списке ваше устройство и открытую вкладку с адресом localhost:8080
• Нажмите на синюю ссылку inspect под названием вкладки:
  
• Откроется новое окно. Это и есть полноценные инструменты разработчика для вашего мобильного браузера. Здесь вы будете видеть тоже самое, что и на телефоне, а так же будет выведена консоль браузера, куда будут выводиться сообщения из мобильного браузера. Здесь же в этом окне вы можете обновлять мобильное приложение после перекомпиляции. Вы можете попробовать прикоснуться к холсту на мобильном устройстве и в консоль браузера на компьютере будет выводиться:
  

  Code
  1 2 Клик мышью Касание экрана

Вывод в консоль браузера на компьютере из мобильного браузера по Wi-Fi (без USB-кабеля)

• Отключите USB-кабель
• Обратите внимание, что http-server вывел в консоль адрес 192.168.1.65:8080 при запуске (у вас будет другой адрес, но примерно такого же вида)
  

  Code
  1 2 3 4 Available on:   http://192.168.1.65:8080   http://127.0.0.1:8080 Hit CTRL-C to stop the server

• Введите этот адрес в Chrome на мобильном устройстве. Вы увидите запущенное приложение
• Зайдите в настройки телефона
• Пролистайте вниз и нажмите "Additional settings"
• Пролистайте в самый низ и нажмите "Developer options"
• Пролистайте немного до "Wireless debugging" и включите эту опцию. Здесь вы увидите IP и порт
• Установите Android SDK если он у вас не установлен: Установка Android SDK
• Выполните команду в консоли:
  

  Bash
  1 adb connect <IP_телефона>:<порт>

• На компьютере в Chrome перейдите по знакомому адресу: chrome://inspect/#devices и подождите 10-15 секунд
• Нажмите на ссылку "inspect":
  
• На компьютере откроется окно, где вы будете видеть тоже самое, что и на телефоне, а так же будет выведена консоль браузера, куда будут выводиться сообщения из мобильного браузера. Здесь же в этом окне вы можете обновлять мобильное приложение после перекомпиляции. Вы можете попробовать прикоснуться к холсту на мобильном устройстве и в консоль браузера на компьютере будет выводиться:
  

  Code
  1 2 Клик мышью Касание экрана

Примечание Gemini по поводу выбора отладки веб-приложений на мобильном устройстве по USB-кабелю и по Wi-Fi

Исправление логической ошибки в программе

1
2

Клик мышью
Касание экрана

1
2

    // Отключаем генерацию событий мыши из касаний пальцем
    SDL_SetHint(SDL_HINT_TOUCH_MOUSE_EVENTS, "0");

• Сохраняем изменения в main.c (Ctrl+S)
• Открываем новую CMD в папке проекта, чтобы не останавливать локальные сервер и набираем команду:
  

  Bash
  1 build-web

• В инспекторе на компьютере обновляем страницу, нажимая в левом верхнем углу закруглённую стрелку
• Касаемся холста на смартфоне и видим в инспекторе, что выводится сообщение "Касание экрана"

Миниатюры