Function to append a grid overlay div to the body depending on the environment

grid-overlay.php

<?php
/**
 * This function appends a grid overlay div to the body depending on the environment.
 *
 */
function tgf_add_grid_overlay_debugging_helper() {

	if ( WP_LOCAL ) {

		// echo the script
		echo '<script>
		function toggleVisualGrid() {
    var element = document.getElementById("grid-overlay-js");
    element.classList.toggle("is--visible");
}

		</script>';

		// echo the div
		echo '<div id="grid-overlay-js" class="grid-overlay"><div class="grid-overlay__inner"></div></div><button onclick="toggleVisualGrid()" class="button grid-overlay-toggle">Show grid</button>';
	}

}
add_action( 'wp_footer', 'tgf_add_grid_overlay_debugging_helper' );