Get list of scripts / styles and show file which enqueued them

Question

I want to show what scripts and styles have loaded on a page and which plugin / theme / file has added them to the page.

We can show all scripts and styles using:

<?php
  global $wp_scripts, $wp_styles;
  var_dump( $wp_scripts );
  var_dump( $wp_styles );
?>

Or more elegantly using this answer: How do I get the $handle for all enqueued scripts?

I now want to be able to see where they were enqueued. For example if I had a JS file called foobar.js and it was enqueued by plugins/organge/orange.php I would want to output this file location along with the script.

This is for development to help isolate what is loading what.

Answer 1

This is not possible the way you think. It would maybe be possible if you use Reflections or debug_backtrace(), but there's no reliable way to do this. WordPress does not keep a stack or queue where it tracks file names.

The only thing I could imagine is just hooking into the action and inside wp_enqueue_scripts():

wp_enqueue_scripts

and attach a tracking mechanism of attached callbacks there. Note the s and that this is not the function that you use to attach scripts to the stack.

<?php
/** Plugin Name: (WPSE #152658) Script Loader Callback Inspector */
add_action( 'wp_enqueue_scripts', function()
{
    var_dump( $GLOBALS['wp_filter'][ current_filter() ] );
}, PHP_INT_MAX -1 );

This would leave you with a queue of all attached callbacks. You can then trace them back with your IDE.

Answer 2

I'm using something like this

 foreach( $wp_scripts->queue as $handle ) :
         $obj = $wp_scripts->registered [$handle];
         $filename = $obj->src;