How do you output enqueued scripts to an admin page?

Question

I am venturing into creating my own plugin (for learning and site development) and haven't found an answer to this yet.

I managed to find a piece of code on stackexchange to print a list of the handles:

global $wp_scripts;
foreach( $wp_scripts; -> queue as $handle ):
echo $handle . ' | ';
endforeach;

Now this is great and all if I want to print a list of the handles on the homepage of my website. I can use this same code to print it in a plugin page in the admin area, but it lacks two things. 1.) How do I print the scripts that are enqueued on the homepage (without printing there) and 2.) I cannot get the url of the scripts called. I think it would be better to print this list to an array, but I couldn't figure out how to do that in this case (cycling through the array and storing the value of each $handle).

I have included my function as I have it written.

function below_the_fold_admin() {
    if ( is_admin() ) {
        echo '<div class="wrap"><h2 style="text-align: center">Below The Fold</h2><h3>A list of your script handles.</h3><p>';
        global $wp_scripts;
        foreach( $wp_scripts->queue as $handle) :
            echo $handle . ' | '. $src . '<br>';
        endforeach;

        echo '</p>';
        echo '<h3>A list of your Style Handles</h3><p>';
        global $wp_styles;
        foreach( $wp_styles->queue as $handle) :
            echo $handle . ' | ' . $src . '<br>';
        endforeach;
        echo '</p></div>';
    }
}

Answer 1

To display registered scripts information in posts/pages, we'll use a shortcode. For admin registered scripts, we'll use admin_footer action hook. Put this code into your plugin:

if(!is_admin) {
    function fpwScripts($atts) {
        global $wp_scripts;
        $out = '<h2>Registered Scripts</h2>';
        foreach($wp_scripts->registered as $key => $value) {
            $out .= "<h3>{$value->handle}</h3>";
            $out .= "source = {$value->src}<br>";
            $out .= "dependencies = array(<br>";
            foreach($value->deps as $dep) {
                $out .= '&nbsp;&nbsp;&nbsp;&nbsp;' . "{$dep},<br>";
            }
            $out .= ")";
        }
        return $out;
    }
    add_shortcode('scripts', 'fpwScripts');
} else {
    function fpwAdminScripts() {
        global $wp_scripts;
        $out = '<div style="margin-left:200px">';
        $out .= '<h2>Admin Registered Scripts</h2>';
        foreach($wp_scripts->registered as $key => $value) {
            $out .= "<h3>{$value->handle}</h3>";
            $out .= "source = {$value->src}<br>";
            $out .= "dependencies = array(<br>";
            foreach($value->deps as $dep) {
                $out .= '&nbsp;&nbsp;&nbsp;&nbsp;' . "{$dep},<br>";
            }
            $out .= ")";
        }
        $out .= '<p>&nbsp;</p><p>&nbsp;</p></div>';
        echo $out;
    }
    add_action('admin_footer', 'fpwAdminScripts');
}

Note: if you decide to display admin registered scripts on your plugin's page, instead of using admin_footer hook, just use fpwAdminScripts() function, there.