Fix to show panel in frontend, when jquery is rendered in footer

If you, for whatever reason, need to use jquery in the frontend footer, this is the solution to continue displaying the query-monitor panel.

Place the following code in your theme functions.php or in the plugin file:

add_action( 'wp_enqueue_scripts', function(){
    wp_dequeue_script('query-monitor');
});

add_action('qm/output/after', function(){
    echo wp_get_script_tag([
        'id'   =>  'query-monitor',
        'src'  => site_url('/wp-content/plugins/query-monitor/assets/query-monitor.js'),
        'type' => 'text/javascript',
    ]);
});

This solved my problem in production environment, but in local environment query monitor stop working with this code. So I configured it as follows to work only in the production environment:

in wp-config.php of local enviroment:
define('WP_ENVIRONMENT_TYPE', 'local');

// in functions.php:
add_action( 'wp_enqueue_scripts', function(){
    if( WP_ENVIRONMENT_TYPE != 'local' ){
        wp_dequeue_script('query-monitor');
    }
});

if( WP_ENVIRONMENT_TYPE != 'local' ){
add_action('qm/output/after', function(){
    echo wp_get_script_tag([
        'id'   =>  'query-monitor',
        'src'  => site_url('/wp-content/plugins/query-monitor/assets/query-monitor.js'),
        'type' => 'text/javascript',
    ]);
});
};

• This topic was modified 1 year, 3 months ago by Alex Koti.