Greg Winiarski

BlackBox is symfony like unobstrusive debug bar attached to the top of the browser window.
How can it help you with development: 
1. instantly inspect global variables (GET, POST, COOKIE, SERVER) 
2. debug both frontend and admin area 
3. executed MySQL queries and time it took to execute each query (useful for finding slow queries) 
4. profiler for measuring performance of your plugins and themes 
5. errors occurred when loading WordPress page

BlackBox Debug Bar

Immediate feedback on a great majority of errors. Added a conditional red background to the Errors, and with this modification I have never miss even a notice anymore.

Thank you very much!

Essential plugin in my developer toolset

BlackBox is a plugin for plugin and theme developers. It collects and displays useful debug information (errors, executed queries, globals, profiler).

Per Søderlind

Juliette Reinders Folmer

We all know that when we’re add a script or style to WordPress, we should use <code>wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer )</code> and <code>wp_enqueue_style( $handle, $src, $deps, $ver, $media )</code> as in:
<pre><code>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' )
</code></pre>
$deps (dependencies), the handle name and an optional parameter, lets you control when/where your script or style should be added. If $deps is <code>array('jquery')</code>, 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 <a href="https://wordpress.org/plugins/debug-bar/" rel="ugc">Debug Bar</a>, will list the dependencies.
<h4>Use</h4>
To view the loaded scripts and styles
<ul>
<li>Front-end: Go to the front-end, and on the admin bar choose Debug and view Script & Style Dependencies</li>
<li>Back-end: Go to the back-end, on the admin bar choose Debug and view Script & Style Dependencies</li>
</ul>
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.

Debug Bar List Script & Style Dependencies

Style very useful (even if it has not been updated since two years) ! Thanks !



useful !

Debug Bar List Script & Style Dependencies is an add-on to WordPress Debug Bar

BlackBox Debug Bar vs Debug Bar List Script & Style Dependencies