トラブルシューティング

コードが正しく動作しない場合は、以下のトラブルシューティングを試してください。

コンソールログ

コンソールログは JavaScript 開発者の最良の友です。ベストプラクティスとしてコンソールログを開いたまま作業しすると1か所でエラーと通知を収集できます。詳細については Mozilla の JavaScript コンソール のドキュメントを参照してください。

デバッグの最初のステップは JavaScript コンソールでのエラーの確認です。次の例では6行目で syntax error が発生しています。

console error

JavaScript がロードされていることの確認

コードを変更しても反映されない場合、JavaScript ファイルがエンキューされていることを確認してください。ブラウザーの Web インスペクタ、あるいはページ上で右クリックし、ポップアップメニューから「ページのソースを表示」を選択して Web ページのソースコードを開き、<script> タグでファイルをロードしていることを確認します。この例では myguten.jsを検索し、ロードされていることを確認します。

ファイルのロードが確認できない場合はエンキュー関数が正しいことをダブルチェックしてください。またサーバー側のログにエラーが出力されていないかも確認してください。

すべての依存がロードされていることの確認

JavaScript コードが使用する依存が宣言されていなかったり、ブラウザーにロードされていない場合、コンソールログにエラーが表示されます。次の例では myguten.js スクリプトが、wp-blocks 依存の宣言無しにエンキューされ、コンソールログにエラーが表示されています。

使用するすべてのパッケージのリストを wp_enqueue_script 関数に指定していることを確認し、修正してください。

wp_enqueue_script(
    'myguten-script',
    plugins_url( 'myguten.js', __FILE__ ),
    array( 'wp-blocks' )
);