メインコンテンツへスキップ

ブループリントのトラブルシューティングとデバッグ

ブループリントを作成する際に問題が発生する場合があります。デバッグに役立つヒントとツールをご紹介します。

よくある落とし穴を確認する​

  • wp-load を require する: runPHP ステップを使用して WordPress PHP 関数を実行するには、wp-load.php を require する必要があります。そのため、code キーの値は "<?php require_once('wordpress/wp-load.php'); REST_OF_YOUR_CODE" で始まる必要があります。
  • networking を有効にする: wp.org アセット (テーマ、プラグイン、ブロック、パターン) にアクセスしたり、add_editor_style() を使用してスタイルシートを読み込むには (たとえば、カスタム ブロック スタイルを作成する 場合)、networking オプションを有効にする必要があります: "features": {"networking": true}。

ブループリントビルダー​

ブラウザ内の ブループリント エディタ を使用して、ブラウザ内でブループリントをビルド、検証、プレビューできます。

注意

エディタは現在開発中であり、埋め込まれたプレイグラウンドの読み込みに失敗する場合があります。回避するには、ページを更新してください。この問題は認識しており、改善に取り組んでいます。

ファイルシステムとデータベースを確認する​

一部のブループリント ステップ (writeFile など) は、Playground インスタンスの内部ファイルシステム構造を変更し、その他のステップ (runSql など) は、内部 WordPress データベースを変更します。

最終的な内部ファイルシステム構造とデータベースを確認するには (ブループリントの手順を適用した後)、SQL Buddy や WPide などの SQL マネージャーとファイル エクスプローラーを提供するいくつかの WordPress プラグインを利用できます (https://playground.wordpress.net/?plugin=sql-buddy&plugin=wpide で動作を確認できます)。

ヒント

WordPress Playground インスタンスのコンソールから、インスタンスの内部を検査するためのメソッドが多数あります。これらは window.playground オブジェクトの一部として公開されています（開発者 > JavaScript API > デバッグとテスト を参照）。いくつか例を挙げます。

> await playground.isDir("/wordpress/wp-content/plugins")
true
> await playground.listFiles("/wordpress/wp-content/plugins")
(3) ['hello.php', 'index.php', 'WordPress-Importer-master']

使用できるメソッドの完全なリストはこちらで確認できます。

ブラウザコンソールでエラーを確認する​

ブループリントが期待どおりに実行されない場合は、ブラウザの開発者ツールを開いてエラーがないか確認してください。

Chrome、Firefox、Safari*、Edge で開発者ツールを開くには、Windows/Linux では Ctrl + Shift + I、macOS では Cmd + Option + I を押します。

注意

まだ有効にしていない場合は、開発メニューを有効にします。Safari > 設定... > 詳細 に移動し、Web 開発者向けの機能を表示 をオンにします。

開発者ツールウィンドウでは、ネットワークリクエストの検査、コンソールログの表示、JavaScript のデバッグ、ウェブページに適用されている DOM と CSS スタイルの確認が可能です。これは、ブループリントの問題の診断と修正に不可欠です。

独自のエラーメッセージをログに記録する​

runPHP ステップ を通じて独自のエラー メッセージを error_log し (ブループリントの例 と ライブ デモ を参照)、"ログの表示" オプション またはブラウザーのコンソールから確認できます。

Log errors snapshot

情報

「zip としてダウンロード」オプション を使用して Playground インスタンスを zip としてダウンロードすると、Playground インスタンスからのすべてのログを含む debug.log ファイルもダウンロードされます。

助けを求める​

コミュニティが皆様をお待ちしています！ご質問やご意見がございましたら、このリポジトリで新しい Issue を作成してください。以下の情報を必ずご記入ください。

  • 実行しようとしているブループリント。
  • 表示されているエラーメッセージ（ある場合）。
  • ブラウザ開発者ツールからの出力全文。
  • 問題の理解に役立つ可能性のあるその他の関連情報（OS、ブラウザのバージョンなど）