
2025/12/10 6:19
Qt, Linux and everything: Debugging Qt WebAssembly
RSS: https://news.ycombinator.com/rss
要約▶
Japanese Translation:
WebAssembly にコンパイルされた Qt アプリケーションのデバッグは、ビルドに完全な DWARF デバッグシンボルを含め、Chrome の「C/C++ DevTools Support (DWARF)」拡張機能を使用する場合に最も効率的です。Emscripten を
(または-g)で構成すると、生成されるバイナリに絶対パス情報が含まれるため、追加のシンボリックリンクは不要です。Qt のデフォルトのデバッグライブラリはCMAKE_BUILD_TYPE=Debugしか使用しませんが、より高いレベルのフラグで再ビルドすると、ブレークポイントやスタックトレースに必要なすべてのシンボルデータを保持できます。再ビルド後、DWARF 拡張機能を有効にした Chrome を起動し、WebAssembly ページを読み込み、DevTools がシンボルを解析するまで待ちます。その後、ネイティブ Qt デスクトップアプリと同様にブレークポイントを設定でき、ページのリロード時に実行がそのポイントで停止します。これによりステップスルーデバッグが可能になります。この方法は Chrome のみで利用できます。Safari や Firefox ではソースマップにフォールバックする必要があります。完全なデバッグ情報を有効にすると、開発者は問題の診断時間を短縮でき、Qt ベースの Web プロジェクトのコード品質が向上します。-g2
本文
開発者が最も退屈に感じる作業の一つは、煩わしいバグをデバッグすることです。ウェブアプリであるほど苦労しますし、WebAssembly を使ったウェブアプリではさらに大変になります。
Qt WebAssembly のデバッグを最も簡単に行う方法は、
-g オプションでビルドしたり CMAKE_BUILD_TYPE=Debug に設定することです。Emscripten は wasm バイナリに DWARF シンボルを埋め込みます。
注意: DWARF を使った wasm ファイルのデバッグは Chrome のみで、ブラウザ拡張機能「C/C++ DevTools Support (DWARF)」が必要です。Safari や Firefox では利用できないため、代わりにソースマップを生成する必要があります(次回のブログ記事で紹介します)。
DWARF デバッグ
- ブラウザ開発者ツールの設定で DWARF を有効化します。ソースマップとは違い、ソースディレクトリへのシンボリックリンクは不要です。バイナリにフルパスが埋め込まれているためです。
でビルドすると Emscripten が自動的に DWARF シンボルを埋め込みます。Qt やアプリケーションをデバッグモードで再ビルドすれば十分です。-g- Qt はデフォルトで
を使用してデバッグライブラリを構築します。これはデバッグ情報は少ないもののリンク時間が短い設定です。完全なシンボルを保持したい場合は、Qt をデバッグモードで-g2
(または-g
; 両方同等)にしてビルドしてください。-g3
DWARF デバッガの使用方法
- Chrome で拡張機能をインストールし、コンソールツールを起動します。
- デバッグしたい Qt for WebAssembly のウェブアプリへ移動します。開いたら、すべてのシンボルとファイルが解析されるまで数秒かかります。Qt 自体にデバッグしている場合はさらに時間が掛かることがありますので、しばらく待ちます。
- JavaScript コンソールにはソースファイルのパスと内容がリスト表示されます。対象ファイルを見つけてブレークポイントを設定し、ページを再読み込みします。ブレークポイントに到達すると実行が停止し、現在の行がソースビューでハイライトされます。また変数名と値も表示されます。
- デスクトップアプリケーションと同様にコードをステップ実行できます。
このワークフローにより、Chrome 内で DWARF シンボルを使って Qt WebAssembly アプリケーションのデバッグが直接可能になります。