KevinJCandlert

This is the easiest way to add custom css and/or javascript to your site. Two large windows with css and javascript syntax highlighting makes it super easy to read and write code. 
JK Development console also uses AJAX to save the css and javascript data – meaning that the page won’t reload and you can keep on working without have to look for that last spot you edited.
Hope you like it! 🙂
Syntax highlightning by ACE (http://ace.c9.io/).

JK Development Console

A development console for adding custom javascript and CSS.

Daniel Dvorkin

I’m working on a nice admin screen to config auto-logging of some common things (like wp_query in pre_get_posts and wp), and some other goodies.
To log things manually, you can use:
<pre><code>browser()->log ( $var, $label );
browser()->warn ( $var, $label );
browser()->info ( $var, $label );
browser()->error( $var, $label );
</code></pre>
Also, commandas are chainable:
<pre><code>browser()->log( 'This is a log...' )->error( '...and this is an error' );
</code></pre>
For example, to log all your main query’s query_vars:
<pre><code>add_filter( 'pre_get_posts', 'log_wp_query', 10000 );

function log_wp_query( $query ) {
 if ( $query->is_main_query() )
 browser()->log( $query->query_vars, 'pre_get_posts' );

 return $query;
}
</code></pre>
<h4>Filters</h4>
wplinb-match-wp-debug: Set to true to only log when wp_debug is true. To prevent logging when wp_debug is false:
<pre><code>add_filter( 'wplinb-match-wp-debug', '__return_true' );
</code></pre>
wplinb-enabled: To disable logging completely. It takes precedence over wplinb-match-wp-debug. To disable logging:
<pre><code>add_filter( 'wplinb-enabled', '__return_false' );
</code></pre>
<h4>Profiling</h4>
The plugin includes a really simple function to allow you to track execution time of different parts of your code.
<pre><code>browser()->timer( $key, $log = false );
</code></pre>
The first time you call this function with a given $key (string) it will start a timer, and return false. You can start as many timers as you want, using different $key values. You can ignore the second parameter for this first call.
The second time you call this function with a given $key, it will return the ellapsed time in seconds since you started this $key timer. If you set the second parameter to true, it will also log this value to the browser.
Example 1: Sequential use, log manually.
<pre><code>browser()->timer( 'Mega loop' );
for ( $i = 0; $i < 1000000; $i++ ) {
 //do something
}
$time = browser()->timer( 'Mega loop' );
browser()->log( $time, 'The mega loop took:' );
</code></pre>
Example 2: Start and end in different places, log automatically.
<pre><code>add_action( 'posts_selection', 'start_timer', 100 );
add_filter( 'the_posts', 'end_timer', 1, 2 );

function start_timer( $query ) {
 browser()->timer( 'Main query time' );
}

function end_timer( $posts, $query ) {
 browser()->timer( 'Main query time', true );
 return $posts;
}
</code></pre>
This is not a good way of measuring how much time a query takes to run, it’s just to illustrate how to use the timer.
In exactly the same way, you can use the function
<pre><code>Browser()->memory( $key, $log = false );
</code></pre>
to measure delta of memory consumption from your first call and your second call with the same $key.
Example:
<pre><code>Browser()->memory( 'testing' );
$test = array();
for ( $i = 0; $i < 100; $i++ ) {
 $test[$i] = md5( rand( 1, $i ) );
}
Browser()->memory( 'testing', true );


Browser()->memory( 'testing' );
$test = array();
for ( $i = 0; $i < 10000; $i++ ) {
 $test[$i] = md5( rand( 1, $i ) );
}
Browser()->memory( 'testing', true );
</code></pre>

WP Log in Browser

Allows you to log data from your PHP WordPress code to your browser's console.

Annoyed you can't var_dump from an AJAX handler? Not anymore …

JK Development Console vs WP Log in Browser