準備
前回 からの続きとして、VSCode で Emscripten の CMake プロジェクトとしてビルドした C++ コードのデバッグを行える環境を作成する。
前準備としてパスの設定などを自動化するために、以下のバッチファイルを作成しコマンド操作が必要な場合は、このファイルを実行したプロンプトから開始する。
C:\wasm\cli.bat
@echo off
cd %~dp0
@rem set PATH=C:\wasm\tool\python-3.14.0-embed-amd64;%PATH%
set PATH=C:\wasm\tool\clang+llvm-21.1.0-x86_64-pc-windows-msvc\bin;%PATH%
set PATH=C:\wasm\tool\cmake-4.1.2-windows-x86_64\bin;%PATH%
set PATH=C:\wasm\tool\emsdk-4.0.16;%PATH%
set PATH=C:\wasm\tool\ninja-win;%PATH%
set PATH=C:\wasm\tool\wabt-1.0.37-windows\wabt-1.0.37\bin;%PATH%
set PATH=C:\wasm\tool\wasmtime-v37.0.2-x86_64-windows;%PATH%
call C:\wasm\tool\emsdk-4.0.16\emsdk_env.bat
set PATH=%EMSDK%\python\3.13.3_64bit;%PATH%
set PATH=%EMSDK%\node\22.16.0_64bit\bin;%PATH%
cmd /K
VSCode 拡張機能の導入
日本語化した VSCode に以下の拡張機能をインストールする。
- C/C++
ms-vscode.cpptools - C/C++ Extension Pack
ms-vscode.cpptools-extension-pack - C/C++ Themes
ms-vscode.cpptools-themes - CMake Tools
ms-vscode.cmake-tools - WebAssembly DWARF Debugging
ms-vscode.wasm-dwarf-debugging
インストール後の一覧は以下のようになっている。
C:\wasm\project\02-helloworld-web>code --list-extensions
ms-ceintl.vscode-language-pack-ja
ms-vscode.cmake-tools
ms-vscode.cpptools
ms-vscode.cpptools-extension-pack
ms-vscode.cpptools-themes
ms-vscode.wasm-dwarf-debugging
プロジェクトの設置
プロジェクト用のディレクトリを作成し、以下のファイルを配置する。
C:\wasm\project\02-helloworld-web\.vscode\launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "localhost:8080",
"url": "http://localhost:8080/",
}
]
}
C:\wasm\project\02-helloworld-web\CMakePresets.json
{
"version": 5,
"cmakeMinimumRequired": {
"major": 3,
"minor": 20,
"patch": 0
},
"configurePresets": [
{
"name": "wasm-config-debug",
"generator": "Ninja",
"binaryDir": "${sourceDir}/build",
"cacheVariables": {
"CMAKE_CXX_STANDARD": "17",
"CMAKE_CXX_STANDARD_REQUIRED": "ON",
"CMAKE_CXX_EXTENSIONS": "OFF",
"CMAKE_TOOLCHAIN_FILE": "$env{EMSDK}/upstream/emscripten/cmake/Modules/Platform/Emscripten.cmake",
"CMAKE_EXPORT_COMPILE_COMMANDS": "ON",
"CMAKE_BUILD_TYPE": "Debug"
}
}
],
"buildPresets": [
{
"name": "wasm-build-debug",
"configurePreset": "wasm-config-debug",
"verbose": true
}
]
}
C:\wasm\project\02-helloworld-web\CMakeLists.txt
cmake_minimum_required(VERSION 3.20)
project(02_helloworld_web LANGUAGES CXX)
add_executable(02_helloworld_web main.cpp)
target_link_options(02_helloworld_web PRIVATE
"-sASSERTIONS=1"
"-sSAFE_HEAP=1"
)
C:\wasm\project\02-helloworld-web\index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<script src="build/02_helloworld_web.js"></script>
</head>
<body>
</body>
</html>
C:\wasm\project\02-helloworld-web\main.cpp
// UTF-8N CRLF
#include <cstdio>
extern "C"
{
extern char __heap_base;
}
int main(int argc, char** argv)
{
puts(__FILE__);
printf("heap-base=%lu\n", reinterpret_cast<unsigned long>(&__heap_base));
return 0;
}
// EOF
プロジェクトのビルド
ファイルを配置したディレクトリに移動し、VSCode を起動する。
C:\wasm>cd C:\wasm\project\02-helloworld-web
C:\wasm\project\02-helloworld-web>code .
構成として CMakePresets.json に定義された wasm-config-debug を選択する。
アイコンを押してビルドを実行。
正常に完了すれば build ディレクトリが作成され、main.wasm ファイルが存在する。
C:\wasm\project\02-helloworld-web>dir build\main.wasm
ドライブ C のボリューム ラベルは OS です
ボリューム シリアル番号は E886-5372 です
C:\wasm\project\02-helloworld-web\build のディレクトリ
2025/10/08 19:29 130,269 main.wasm
1 個のファイル 130,269 バイト
0 個のディレクトリ 629,012,901,888 バイトの空き領域
C:\wasm\project\02-helloworld-web>wasm-validate build\main.wasm
C:\wasm\project\02-helloworld-web>
C++ コードのステップ実行
プロジェクトのディレクトリで Python の HTTPサーバを起動する。
C:\wasm\project\02-helloworld-web>python -m http.server 8080
Serving HTTP on :: port 8080 (http://[::]:8080/) ...
C++ のソースコードにブレークポイントを設定する。
デバッグを開始する。
ブラウザが起動し、ブレークポイントを設置した行でステップ実行が停止する。
C++ のソースコードの puts の結果はデバッグコンソールで確認できている。
これ以降は通常の VSCode の操作となる。
次 は開発者ツールを使ったステップ実行について記述する。