WebページでJavaScriptが想定どおりに動作しない場合は、コンソールメッセージやエラーを確認する必要があります。
デスクトップブラウザーでは、ブラウザーの開発者ツールを開いて確認できます。しかし、モバイルブラウザーでは同じ方法を簡単に使用できません。
iPhoneやiPadのSafariでページを詳しく調べるには、一般的に端末をMacに接続し、Web Inspectorを有効にする必要があります。Android Chromeでリモートデバッグを使用する場合も、開発者向けオプションとUSBデバッグを有効にし、別のコンピューターでChrome DevToolsを開く必要があります。
詳しいリモートデバッグの方法については、次の公式ドキュメントを参照してください。
- iPhoneおよびiPadのSafari：Inspecting iOS and iPadOS
- Android Chrome：Remote debug Android devices
これらの方法は詳しいデバッグに役立ちますが、別のコンピューターと接続作業が必要です。モバイル端末だけでWebページを作成したい場合、基本的なコンソール出力を確認するために別のコンピューターを接続するのは負担になることがあります。
Essepageのコンソール領域は、このような環境で役立ちます。
Essepageのコンソール領域は、モバイルブラウザーのようにブラウザーの開発者ツールを簡単に開けない環境で、プレビューのJavaScriptコンソール出力を確認するための機能です。
Essepageのエディターでは、別のプログラムをインストールしたり、ほかのコンピューターに接続したりしなくてもコンソールの出力を確認できます。
コンソール領域を開く
エディター上部のコンソールアイコンを選択すると、コンソール領域を開いたり閉じたりできます。
コンソールには、プレビューで実行されているページのメッセージとJavaScriptエラーが表示されます。
コンソールを使用するには、最初に確認するページをプレビューで開きます。
- ファイルエクスプローラーで確認するページファイルを探します。
- ファイルを右クリックします。
- プレビュー（Preview）を選択します。
- エディター上部のコンソールアイコンを選択します。
- プレビューを再読み込みするか、確認する操作を実行します。
- コンソール領域でメッセージを確認します。
プレビューでページを再読み込みしたり別のページへ移動したりすると、そのページのJavaScriptが再び実行されます。そのため、同じメッセージがコンソールに複数回表示される場合があります。
プレビューのコンソール出力を確認する
エディターのコンソール領域では、プレビューページで発生した次の内容を確認できます。
console.log()で出力した一般的なメッセージ- JavaScriptの実行中に発生したエラー
コンソール領域は、Essepageだけで使用する独自のJavaScript機能ではありません。Web標準のConsole APIから出力された内容を、エディター内で確認できるようにした領域です。
Console APIと、console.log()、console.warn()、console.error()などの使用方法については、次のドキュメントを参照してください。
エディターコンソールとブラウザーの開発者ツール
Essepageのコンソール領域は、モバイル端末を含むさまざまな環境でコンソール出力をすばやく確認するための機能です。
ブラウザーの開発者ツールを完全に置き換えるものではありません。
| 項目 | Essepageのコンソール | ブラウザーの開発者ツール |
|---|---|---|
| 主な目的 | プレビューのコンソール出力とエラーを確認する | Webページの構造と実行過程を詳しく分析する |
| 使用環境 | PC、タブレット、モバイルブラウザー | 主にPCやノートパソコンのデスクトップブラウザー |
| 追加の接続 | 不要 | モバイルページの分析には別のコンピューターとの接続が必要になる場合がある |
| 確認できる内容 | 基本的なメッセージとJavaScriptエラー | HTML、CSS、ネットワーク、中断点、ストレージ、パフォーマンス情報 |
PCやノートパソコンで作業する場合は、ブラウザーの開発者ツールを使用すると、より詳しい情報を確認できます。
次のような問題には、ブラウザーの開発者ツールが適しています。
- HTML要素と適用されたCSSを詳しく確認する
- ネットワークリクエストとレスポンスを分析する
- JavaScriptに中断点を設定する
- ブラウザーストレージとCookieを確認する
- パフォーマンスとアクセシビリティを分析する
モバイル端末で簡単な実行結果やエラーを確認する場合は、Essepageのコンソール領域を使って基本的なデバッグを行えます。
機密情報を出力しないでください
コンソールはコードの実行結果やデータを確認するのに便利ですが、パスワードや認証情報などの機密情報を出力してはいけません。
次のような情報はコンソールに表示しないでください。
- パスワード
- 秘密のAPIキー
- 認証トークン
- ユーザーの個人情報
- 決済情報
コンソール出力は、Essepageのエディターでしか確認できない非公開の記録ではありません。同じコードを公開ページに適用すると、訪問者もブラウザーの開発者ツールから出力内容を確認できます。
コンソールにメッセージが表示されない場合
予想したメッセージやエラーがコンソールに表示されない場合は、次の内容を確認してください。
- コンソール領域が開いている
- 確認するページがプレビューで開かれている
- 編集したファイルが保存されている
- 現在のプレビューで正しいページを確認している
- 該当するJavaScriptが実際に実行される状況である
- それより前に発生したエラーによってコードの実行が止まっていない
エディターコンソールには、公開サイトではなく、開発環境のプレビューで発生した内容が表示されます。
次のステップ
コンソール領域の使い方を理解したら、次のガイドへ進みましょう。
- 新しいページとURLを作成する方法：ページ作成とURL
- JavaScriptで外部データを取得する方法：外部APIを使用する
- ブラウザーから直接呼び出せないAPIに接続する方法：Proxy API
- 保存した変更を公開サイトへ反映する方法：保存・公開・適用