Debug Bar List Script & Style Dependencies wordpress plugin resources analysis

Download This Plugin
Download Elegant Themes
Name	Debug Bar List Script & Style Dependencies
Version	1.0.6
Author	Per Soderlind
Rating	100
Last updated	2014-05-05 02:45:00
Downloads	2153
Download Plugins Speed Test plugin for Wordpress

Home page

Delta: 0%

Post page

Delta: 0%

Debug Bar List Script & Style Dependencies plugin has no negative impact on PageSpeed score.

Home page PageSpeed score has been degraded by 0%, while Post page PageSpeed score has been degraded by 0%

Debug Bar List Script & Style Dependencies plugin added 13 bytes of resources to the Home page and 7 bytes of resources to the sample Post page.

Debug Bar List Script & Style Dependencies plugin added 0 new host(s) to the Home page and 0 new host(s) to the sample Post page.

Great! Debug Bar List Script & Style Dependencies plugin ads no tables to your Wordpress blog database.

Resources Added (Post page)

Description

We all know that when we're add a script or style to WordPress, we should use wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ) and wp_enqueue_style( $handle, $src, $deps, $ver, $media ) as in:

function themeslug_enqueue_style() {
    wp_enqueue_style( 'core', 'style.css', array('twentytwelve-style') ); 
}

function themeslug_enqueue_script() {
    wp_enqueue_script( 'my-js', 'filename.js', array('jquery') );
}

add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style' );
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_script' )

$deps (dependencies), the handle name and an optional parameter, lets you control when/where your script or style should be added. If $deps is array('jquery'), your script will be loaded after jquery is loaded.

The problem is, which one exists and in which order are they loaded ?

Debug Bar List Script & Style Dependencies, an add-on to Debug Bar, will list the dependencies.

Use

To view the loaded scripts and styles

Front-end: Go to the front-end, and on the admin bar choose Debug and view Script & Style Dependencies
Back-end: Go to the back-end, on the admin bar choose Debug and view Script & Style Dependencies

Note, the front-end and back-end loads different scripts and styles. Also, different pages on the front-end and back-end can load different scripts and styles.