Wordpress開発でPHPの変数などをブラウザのコンソールに表示させるプラグイン

OverView

WordPressのThemeやブラグインなどの開発でPHPで変数の値などを確認したい場合は単純にvar_dumpなどで表示させたりしますが、ブラウザのコンソールに表示した方が効率が良かったりします。
ただ都度渡すコードを書くのは手間がかかるので、簡単なプラグイン化をしてみました。
プラグイン化しておけば、開発環境ではプラグインを入れておき、本番環境などには入れないでおくという形がとれ、万が一チェックのためのコードを消し忘れてもプラグインがなければ出力されないので安心できると思われます。

開発時にのみ使うので構造もとても簡潔にしています。

ディレクトリ構成

view-on-console/
└─　view-on-console.php
└─ js
   └─　view-on-console.js

ファイルの内容

view-on-console.php

至ってシンプルにしています。
もらったデータをconsole.logに出力するだけの関数を記述したJavaScriptファイルをwp_enqueue_script読み、wp_add_inline_scriptで出力するJavaScriptをinlineに表示するようにしています。
PHPからJavaScriptに変数を渡す時はjson_encodeして渡す必要があります。
wp_json_encode関数はjson_encodeの機能にHTMLエスケープやUnicodeエスケープ、JavaScriptのエスケープなどを行っているので、こちらを使用しています。

view-on-console.php

/**
 * Plugin name: View On Console
 * Version: 1.0.0
 * Description: This is a plugin for viewing PHP variables on the console.
 * Author: efc
 * Author URI: https://www.electric-fruits.com/
 * License: GPL2 or later
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: view-on-console
 */

/**
 * $argsの例
 * $args = [
 *   "checkDeta" => "コンソールで表示したい文字列/配列"
 *   "fileName" => "チェックしたい文字列/配列の記述してあるファイル名"
 *   "lineNumber" => "チェックしたい文字列/配列の記述してある行数"
 * ]
 */
 function view_on_console($args) {

    wp_enqueue_script('view_on_console',plugins_url('js/view_on_console.js',__FILE__),array(),'1.0.0',true);
    if($args) {
        $json = wp_json_encode($args);
        $script_data = "
        view_on_conslole(". $json . ");
        ";
        wp_add_inline_script('view_on_console',$script_data,'after');

    }

}

?>

view_on_console.js

const view_on_conslole = (console_log) => {
    if (console_log) {
        console.log(console_log);
    }
}

使い方

プラグインとして有効にし、以下のようにシンプルにview_on_console関数に変数（配列なども）を渡せばブラウザのコンソールに表示します。

if(function_exists("view_on_console")) {
    view_on_console($myMeta);
}           

また以下のようにファイル名や行数を入れた連想配列を渡してわかりやすくするなどの使用方法もできます。

if(function_exists("view_on_console")) {
    view_on_console(array(
         "checkDeta" => $myMeta,//チェックしたい変数
         "fileName" => 'efc-blocks.php',//ファイル名
         "lineNumber" => 79//行数
    ));
}

こんな感じでコンソールに表示される

必ずfunction_existsで関数の有無をチェックするようにして使用してください。