$wp_queryをブラウザコンソールに出力して簡易デバッグを行う

WordPressのデバッグに便利な'query monitor'というプラグインがある。

ja.wordpress.org

有用なのだが、ブラウザの開発者ツールと合わせて開くと画面を占領してしまうという難点がある。 また、知りたい情報に対して情報量が多すぎると感じる場面が多い。

そこで簡易的にデバッグする方法。メインクエリの$wp_queryをブラウザコンソールに出力することで、var_dump()のようにブラウザの表示に影響を与えることなく条件分岐やSQLなどを確認できる。

• wp-config.phpで'WP_ENVIRONMENT_TYPE'を指定しておく必要あり

<?php
add_action(
    'wp_head',
    function(){
        if( wp_get_environment_type() === 'production' ){
            return;
        }
        if( is_main_query() && is_user_logged_in() ){
            global $wp_query;
            $json = json_encode( $wp_query );
            echo "<script async>console.log( '\$wp_query:', {$json} );</script>";
        }
    }
);

外部に漏らしてはいけない情報も含まれているため、wp_get_environment_type()やis_user_logged_in()などを使用して開発者にのみ表示されるようにしている。

この他に、自分は$_SERVERの値を確認する機会があるのでこちらも出力している。

<?php
add_action(
    'wp_head',
    function(){
        if( wp_get_environment_type() === 'production' ){
            return;
        }
        if( is_main_query() && is_user_logged_in() ){
            $json = json_encode( $_SERVER );
            echo "<script async>console.log( '\$_SERVER:', {$json} );</script>";
        }
    }
);

var_dump()を書いたり消したりする手間が省けなかなか快適。よかったら試してみてください。