QtでビルドしたWebAssemblyアプリをChromeでデバッグする

# はじめに
こちらの記事で構築した環境にデバッグの仕組みを追加していきます。

https://qiita.com/AlohaYos/items/fe64c54b36a9649970ed

Google ChromeのDev Tools設定から、WebAssemblyアプリをステップトレースするためのQtプロジェクト設定、Qtソース内へのステップインの方法などを紹介します。

# デバッグ環境のインストール

## Google Chromeの設定
#### Google Chromeインストール
開発者向けのChromeをインストールします。

https://www.google.com/intl/ja/chrome/canary/

![名称未設定4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839672/2fcee077-020a-355f-1b17-a19fb5c3e396.png)

#### C/C++ Dev Tools拡張機能のインストール

C/C++ Chrome DevTools拡張機能をインストールします。

https://chrome.google.com/webstore/detail/cc%20%20-devtools-support-dwa/pdcpmagijalfljmkmjngeonclgbbannb

![名称未設定5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839672/f41c01f1-0cc4-3280-cee0-b4e0ee0c9e8c.png)

#### C/C++ DevToolsの設定
Chromeのアドレスバーに

    chrome://extensions

このように入力して拡張機能ページを開きます。

![名称未設定6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839672/acfa294c-6e17-c604-dcb9-6923a43fe53d.png)
Chromeの設定ボタン（アドレスバー右側）を押し「その他のツール」→「デベロッパーツール」を選びます。
![名称未設定6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839672/b375cd5b-2282-7c30-b5f0-7385f1e2c06f.png)
Settingsアイコン（歯車マーク）をクリックします。
![名称未設定7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839672/29feadc7-33d6-34d0-64fe-fa302836421b.png)
ExperimentsページのWebAssembly Debugging: Enable DWARF supportにチェックを付けます。これでmapファイルを正しく読み込んでくれます。

## Qt CreatorからのWebAssembly起動設定

#### Qtプロジェクトの設定

プロジェクトを新規作成します。
![Screenshot from 2021-08-05 07-33-15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839672/1e15fbd4-9014-489e-bad3-fe6ffd42ff79.png)
名称はHelloWebAssemblyとしました。
![Screenshot from 2021-08-05 07-33-39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839672/09c6da75-87db-d488-c77f-481fada34351.png)
キットの選択では、Desktop版とWebAssembly版の両方を選んでおきます。
![Screenshot from 2021-08-05 07-58-39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839672/eade6a17-45c4-bb64-ecc9-521739c5ec7c.png)
ビルドディレクトリは通常では

    /home/username/Documents/qtproject/build-HelloWebAssembly-Desktop_Qt_5_15_5_GCC_64bit-Release

このようなパスになっていますが、最後の部分をプロジェクト名称だけにして

    /home/username/Documents/qtproject/HelloWebAssembly

このように変更します。これがデバッグ時に効果を発揮します。
![Screenshot from 2021-08-05 07-59-08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839672/d920858f-ce1e-479d-4be5-d0b1c0af1974.png)
HelloWebAssemblyプロジェクトが生成されました。
![Screenshot from 2021-08-05 07-42-31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839672/ccc05208-cae1-d45e-130b-b698a7d740cf.png)
画面左側の「プロジェクト」を選択し、Build&Run項目からWebAssemblyのRunページを開きます。
「実行」セクションのAddボタンを押して新しい「カスタム実行ファイル」を作ります。
![Screenshot from 2021-08-05 07-40-54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839672/dbade459-3006-97a2-13e7-e756a0cd189e.png)
カスタム実行の設定内容は以下の通り。
コマンドライン引数でのパスは各自のHelloWebAssemblyプロジェクトのパスに合わせてください。

    Executable:      ~/emsdk/upstream/emscripten/emrun
    コマンドライン引数: --browser chrome ~/Documents/qtproject/HelloWebAssembly/HelloWebAssembly.html
    作業ディレクトリ:   %{buildDir}

Qt Creatorの画面左下から、WebAssemblyのカスタム実行ファイルを選択しておいて、ビルドメニューから「実行」します。
![スクリーンショット 2021-08-05 8.14.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839672/6b168007-e301-14db-fdca-bd1b6d068840.png)
Google Chromeが自動的に起動し、WebAssemblyアプリが実行されました。
![Screenshot from 2021-08-05 07-43-05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839672/9b0df248-342f-f893-e731-b78aa25b7b22.png)
Chrome右上の設定アイコンからの「その他のツール」→「デベロッパーツール」を選ぶとデバッガ画面が現れます（ショートカットShift+Ctrl+iでもOK）。
![名称未設定7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839672/f25df63e-abb9-6543-14b8-24750029ca88.png)
Chrome画面は左から順番に：
・実行画面
・Page（実行に関連するファイル）
・ソースコード
・ブレークポイント/変数/コールスタック
などが並びます。ただし、この状態ではソースコードとして表示されているのはwasm形式またはVM形式のコードしかありません。
![Screenshot from 2021-08-05 07-47-51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839672/671328a8-327a-320d-e425-90dddf7d7f2d.png)

#### ビルドオプションの追加
Chromeでのデバッグ時にmapファイルを読み込んでプログラムソースファイルを表示できるようにしましょう。プロジェクトファイル（HelloWebAssembly.pro）を開き、末尾に以下を追記します。

    QMAKE_WASM_SOURCE_MAP_BASE = http://localhost:6931/

![Screenshot from 2021-08-05 07-50-12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839672/15e36008-4fea-a695-179c-50a55141c6cc.png)
リビルドして起動し、デバッガ画面を表示するとソースファイルが表示されます。
下図はMainWindow::MainWindowにブレークポイントを設定して、WebAssemblyアプリを再起動（Chromeページを再読み込み）した状態です。
MainWindow::MainWindowでブレークし、そこまでの Call Stackが表示されています。
![Screenshot from 2021-08-05 07-46-38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839672/18f19dc0-27c2-58af-d73b-133da922738a.png)
さきほどビルドディレクトリをこのように設定しました。

    /home/username/Documents/qtproject/HelloWebAssembly

localhost:6931はデフォルトでHelloWebAssembly.htmlのある位置を指していますので、デバッガは実行ファイルと同じディレクトリにあるソースファイルを読み込み、マッピングしてくれます。

# Qtクラス内へのステップトレース
Qtクラスの中へステップインしていくとQtのソースがロードできないというメッセージが出ます。
![スクリーンショット 2021-08-05 8.50.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839672/599d49c3-76af-8020-7b8a-243431d8ca69.png)

    Could not load content for http://localhost:6931/opt/Qt/5.15.5/wasm_32/include/QtCore/qflags.h (HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE)

このケースでは/opt/Qt/5.15.5/wasm_32/配下のソースが見つからない事が原因ですので、localhost:6931/opt が /optを指すようにシンボリックリンクを作ってやります。

    cd ~/Documents/qtproject/HelloWebAssembly  <--プロジェクトディレクトリに移動します
    ln -s /opt opt

これでQtクラスの内部までステップインできるようになりました。
![スクリーンショット 2021-08-05 9.01.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839672/b0037a2b-7387-8d83-0aa3-11a54909c138.png)

ライブラリのソースが別のディレクトリにある場合や、ソースファイルと別の場所にビルドディレクトリを配置したい場合などにも、この要領で参照するソースの位置を設定することができます。

# ブレークさせるマクロ

    #include <emscripten.h>
    
    EM_ASM({ debugger });  


# 参考サイトなど

https://developer.chrome.com/blog/wasm-debugging-2020/

http://qtandeverything.blogspot.com/2020/05/debugging-qt-for-webassembly.html

https://www.youtube.com/watch?v=W3WC-VpKdGQ

https://murashun.jp/article/performance/chrome-devtools.html