開発者ツールで自分の作品を見る:最初に開く3つのタブ

3つのタブは、それぞれ別の問いに答える

3つのタブの役割は、次の問いで区別できます。

• コンソール、答える問い：作品は何を言っているか、主に見るもの：作者が出したログ、エラー、警告
• ネットワーク、答える問い：何を読み込んだか、主に見るもの：ファイル名、成否、サイズ
• 要素、答える問い：画面は何でできているか、主に見るもの：HTMLの構造、見た目の指定

開き方は、多くのブラウザで画面を右クリックして「検証」を選ぶ方法か、キーボードのF12です。MacではCommand+Option+Iで開くものが多くあります。開いたら、上のタブ列から「コンソール」「ネットワーク」「要素」を探します。英語表示のブラウザでは、Console、Network、Elementsと書かれています。

順番は、何かがうまくいかないときにこの順で見ると迷いにくくなります。まずコンソールで赤い文字(エラー)が出ていないかを見ます。次にネットワークで、読み込みに失敗したファイルがないかを見ます。最後に要素で、画面の部品が意図どおり存在するかを見ます。症状が「何も起きない」なら、原因の多くはこの3つのどこかに手がかりが残ります。

ゲームの中を見る準備:ページの中の「別の部屋」

アソバースの作品ページでは、ゲームは作品ページの中に埋め込まれた別枠(iframe)で動きます。確認済みの設計では、ゲームはsandbox付きのiframeで実行され、アップロードされたコードはメインサイトとは別のオリジンから配信されます。オリジンとは、おおまかに「どのサイトから来たか」を表す単位です。

この設計から読み取れるのは、作品が「サイト本体とは壁で区切られた部屋」で動くことです。開発者ツールを使うときも、この部屋の存在を意識する必要があります。

• 要素タブでは、作品ページの構造の中からiframeの行を探して展開すると、ゲーム側のHTMLが見えます。
• コンソールタブでは、入力欄の近くに「どの部屋の文脈で実行するか」を選ぶ欄があるブラウザが多くあります。ゲームの中の変数を調べたいときは、その欄でゲーム側の文脈を選びます。ブラウザによって表示位置や名前は違うので、自分の画面で探してください。
• ネットワークタブには、ページ全体の読み込みが並びます。ゲームのものだけを見たいときは、ゲームの名前やファイル名で絞り込みます。

作品を単独で確認したい場合は、投稿前の手元のHTMLをブラウザで直接開いて、同じ3つのタブを見る方法もあります。サイトの枠を挟まないぶん、見るものが少なくなります。

なお、コンソールには他人に言われたコードを貼り付けないでください。コンソールは、貼ったコードをその場で動かせる入口です。内容を理解していないコードは、たとえ親切そうな説明が付いていても実行しないのが原則です。

コンソール:作品が自分で話す場所

コンソールには、作者がコードの中でconsole.log()と書いた内容が出ます。「いま何回目の操作か」「スコアはいくつか」といった内部の状態を、画面に出さずに確認するための仕組みです。もう一つ重要なのは、ブラウザ自身が出すエラーです。コードの書き間違いや、存在しない変数を使った場合などに、赤い文字で理由と行番号が表示されます。

エラーを読むときは、次の順に見ます。

1. 先頭の語に注目します。ReferenceErrorは「その名前が見つからない」、TypeErrorは「その値にその操作はできない」といった種類を表します。
2. 続く説明文を読みます。多くは何が見つからなかったか、何ができなかったかが書かれています。
3. 末尾のファイル名と行番号を確認します。クリックすると該当箇所が開くブラウザが多くあります。

アソバースの投稿条件は、コンソールの確認と相性がよい内容です。サーバー用コード、サービスワーカー、SharedArrayBufferを使うマルチスレッドは対象外と案内されています。こうした機能を使うコードを含めたままだと、動かない旨のエラーが出る可能性があります。具体的にどんな文言が出るかは環境次第なので、手元で開いて確かめてください。

もう一つの使い道は、個人情報の混入チェックです。確認済みの設計では、ゲームにFirebaseのUID・認証トークン・メールアドレスを渡さないことになっています。自作の作品が、ログに何かを出力するコードを残していないか、コンソールを眺めて確かめる習慣をつけると安心です。デバッグ用に出した値がそのまま残ることは、よくあります。

ネットワーク:何を読み込んだか

ネットワークタブは、ページが開かれるときに取得したファイルを一覧にします。ファイル名、成否を表す状態、種類、サイズなどが並びます。一覧を取るには、このタブを開いた状態でページを再読み込みするのがコツです。開く前に読み込まれたものは、記録に残りません。

見るべき点は3つです。

• 失敗している行がないか。 赤く表示された行や、状態に「404」(見つからない)と出ている行は、ファイルが読み込めていません。
• 名前と場所は合っているか。 アソバースにアップロードするときは、直下のindex.htmlが入口になり、素材は相対パスで書く決まりです。ZIPの中にフォルダが一段入っていたり、Imagesとimagesのように大文字小文字が違っていたりすると、手元では動いても公開後に見つからなくなることがあります。ネットワークの一覧で失敗した名前を見れば、どこがずれているか判断しやすくなります。
• 重いファイルはないか。 アップロードは20MiB以内、ZIPを展開した後は合計100MiB・1,000ファイル以内、1ファイル30MiB以内という上限があります。サイズの列を大きい順に並べ替えると、容量の大半を占めている素材がどれか分かります。

公式作品13本は、いずれも独立したHTMLで外部通信なしに動くと確認されています。この設計から読み取れるのは、ネットワークの一覧が「外のサーバーに情報を取りに行く作り」ではない、ということです。では実際に何が並ぶのかは、公式作品を開いて自分の目で確かめてください。作品ページにはサイト本体の通信も混ざるので、ゲームの枠に絞って見る点に注意します。また、アップロード作品にはSDKが自動で追加されると案内されているため、自分のファイルにない読み込みが並ぶ場合があります。見覚えのない行があったら、それがSDKに由来するものか、公式の案内で確認してください。

要素:画面の正体を見て、練習ページで3タブを一巡する

要素タブは、ブラウザが組み立てたHTMLの構造を木のように表示します。ボタンや文字、画像がそれぞれ一つの「要素」で、選ぶと画面上の位置が強調されます。右側には、その要素の色や大きさなどの指定が出ます。

使いどころは、見た目の不具合です。ボタンが押せない理由を調べるときは、要素が存在するか、別の要素に覆われていないか、大きさが0になっていないかを見ます。ここで書き換えた内容は、その場の表示にだけ反映され、ファイルには保存されません。再読み込みで元に戻るので、気軽に試せます。

ゲームが描画にcanvasという要素を使っている場合、要素タブにはそのcanvasが一つ見えるだけで、中の絵はHTMLの構造としては見えません。公式作品がどの方法で画面を作っているかは、確認済みの情報にはありません。作品を開いて、要素タブで確かめてください。

ここで、3つのタブを一巡できる練習ページを用意します。次のコードをtest.htmlという名前で保存し、ブラウザで開いてください。画像のパスはわざと存在しないものにしてあります。

<!doctype html>
<html lang="ja">
<meta charset="utf-8">
<title>3タブ練習</title>
<body>
<h1 id="title">練習ページ</h1>
<button id="btn">押す</button>
<p id="out">まだ押されていません</p>
<img src="images/missing.png" alt="" width="40">
<script>
let count = 0;
document.getElementById("btn").addEventListener("click", () => {
  count += 1;
  console.log("押された回数:", count);
  document.getElementById("out").textContent = count + "回押しました";
  if (count === 3) console.error("3回目で警告を出す練習です");
  if (count === 4) nothing.run();
});
</script>
</body>
</html>

開発者ツールを開き、次の順に確かめます。

1. ネットワーク: タブを開いたままページを再読み込みし、images/missing.pngの行の状態を見ます。読み込めなかったことを示す表示になっているはずです。画像が見えない理由を、ここで特定できます。
2. コンソール: ボタンを1回ずつ押し、出力を順に見ます。3回目は作者が意図して出したconsole.error、4回目は未定義のnothingを使うことによるエラーです。前者は作者が出した文、後者はブラウザが出した文で、見た目の違いを比べます。
3. 要素: <p id="out">を選び、テキストの部分をダブルクリックして書き換えます。画面が変わり、再読み込みで戻ることを確かめます。

この3手順を終えた時点で、「何も起きない」の原因を探す基本の動きは身についています。

次の行動

まず上の練習ページで3つのタブを一巡し、赤い行や404の表示が何を意味するかを自分の目で確認してください。そのうえで、公式作品を一つ開き、ネットワークの一覧と要素の構造を眺めてみてください。投稿を考えている場合は、公開前に手元のindex.htmlで、コンソールにエラーが残っていないか、ネットワークに読み込み失敗がないかを確認しておくと安心です。

参考資料

• Chrome DevTools の公式ドキュメント
• Firefox Developer Tools の公式ドキュメント
• Safari Web Inspector の公式ドキュメント