UE4にてHTML5でパッケージングした時、ブラウザ上でエラーが起きたときのデバッグの仕方を簡潔に書きます。
ただコンソールでログを追うだけの記事なので、UE4、及びHTML5の初心者向け記事になります。

知っている方は当然の知識であるため、読み飛ばしていただいてかまいません。

ブラウザでデバッグ

ブラウザ上でエラーが起きた場合、当然ですがUE4のエディターではエラーを拾わないので、ブラウザに出力するようにJavaScriptを書くか、開発ツールを使用しなければいけません。
現在でのブラウザであれば標準的にコンソールツールが付いているはずです。

・GoogleChromeの例

ブラウザは

「コンソールがついている」
「WebGLに対応している」

ものであれば何を使用しても問題ないです。

WebGLはFireFoxが一番安定しているので、今回はFireFoxの標準開発ツールを利用します。

FireFoxのコンソールを見てみよう

プラムさんから実際にエラーが起きているバイナリをお借りできたので、これを例にエラーを追っていきましょう。

※このバイナリはUE4.17で出力されているため、18以降では変わる可能性があることをあらかじめご了承ください

UE4から出力されたHTML5は、内部にエラーが発生した場合、上記の画像の通りエラーを画面に表示をしてくれますが、まぁ、きわめてわかりにくいですよねｗ
このままでは何が原因なのかよくわからないので、早速コンソールを見ていきましょう。

FireFoxのコンソールを開く

FireFoxで開発ツールを表示する場合、以下の画像の通り右端のメニューから開発ツールをクリックして開きます。

※Firebug等のアドオンを入れていない場合、F12のショートカットキーで開きます

上記の画像の通り、たくさんのエラーがコンソールに出力されています。
ここから、エラーとなっている原因のログを追っていきます。

FireFoxのコンソールを見る

実際にコンソールを見ていきましょう。

今回の例では、以下の赤枠で囲ったログが怪しそうです。

どうやらメモリ上限エラーが発生しているようです。
純粋にメモリ不足であれば、プロジェクト設定でHeapSizeを上げるか、HTMLファイルに書かれているメモリ使用量を変更すれば解決です。

※4.17時点で出力されるHTMLファイルのソースであり、WASMが対応する18以降では変わる可能性あり

このバイナリではメモリ上限が最大の２GBまで確保する設定にしても解決しなかったため、元のソース部分に何かメモリを消費してしまう原因があるようです。

メモリ上限エラーの詳細を見ていきましょう。
▼の部分を押すと、ログの詳細が開かれます。

上記のエラーログを見た場合、怪しいのは以下の部分です。

どうやらどこかのタイムラインを呼び出したときに、メモリ確保の処理が走り、そのまま上限値に達してしまったようです。
赤線の部分をみると「__ZNK17UTimelineTemplate24GetDirectionPropertyNameEv」となっているので、どこかタイムラインのプロパティ名に原因があるみたいです。

これで原因となっている部分が大体絞り込めました

プラムさんが再度調査したところ、今回のエラー原因は、タイムラインに日本語を使用していたのが原因でした。

以下の画像はエラーの参考例です。

全てのタイムラインを英語に変換したところ、無事HTML5で動作したとのことです。

まとめ

UE4はHTML5をパッケージングするときにEmscriptenを利用してC++からJavaScriptに変換しているため、エディター上では問題なく動作しても、ブラウザでは動かない、というようなことがよく起こります。

そんな時、ブラウザのコンソールを見れば何が原因なのか特定することがほぼ可能です。

今回はコンソールだけでしたが、FierFoxの開発ツールはパフォーマンスも見ることができるので、どこがボトルネックになっているかの調査も可能です。

HTML5でデバッグする場合、かならずブラウザの開発ツールを開くクセをつけましょう。