Federico Andrioli

Log/Debug the PHP code in your Theme/Plugin with your Browser Console (no extension needed). Made for themes and plugins developers.
HOW TO CHECK IF BUGFU IS WORKING
Open your Browser Console, if you see this header, BugFu is working properly
<pre><code>################################
#### BugFu Console Debugger ####
################################
</code></pre>
HOW TO OPEN YOUR BROWSER JAVASCRIPT CONSOLE
If you’ve never used the Browser JavaScript Console before, here’s how you open it:
<ul>
<li>Chrome PC shift+ctrl+j – Chrome Mac alt+cmd+j</li>
<li>Firefox PC shift+ctrl+k – Firefox Mac alt+cmd+k</li>
<li>Safari PC shift+ctrl+c – Safari Mac alt+cmd+c</li>
</ul>
HOW TO USE BUGFU WITH WORDPRESS
Call the log static method from wherever you are within the WordPress PHP code
<pre><code><?php /* WORDPRESS CODE HERE */

/* Call it with no arguments to only output some backtrace info */
BugFu::log();

/* Call it with a string argument to output that string content */
BugFu::log($my_string_content);

/* Call it with a non-string argument to output the structured
 representation of that argument - it uses var_export() */
BugFu::log($my_object-array-variable);

/* Call it with the second optional argument set to "false"
 to turn off the backtrace info (which is on by default) */
BugFu::log($my_content, false);
</code></pre>
DEVELOPERS
Official Github repository: 
https://github.com/fedeandri/bugfu-console-debugger

BugFu Console Debugger

Good plugin

Really great plugin. I'm surprised it does not seem to be well known under developers.

Must have for developers

Very useful !

This is a nice plugin to use in concert with the Chrome dev console. It is easy to use and works well.  Thank you for making it available. 

Easy to use and works well

Log/Debug the PHP code in your Theme/Plugin with your Browser Console (no extension needed)

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

BugFu Console Debugger vs Debug Bar List Script & Style Dependencies