Provides quick information for each WordPress page / post template.

Dev Template Name

    // DEVELOPER
    function dev_template_name() {

        global $template, $post;
        $template_array = explode('/',$template);

        echo '
            <style>
                .dev-template-name {position:fixed;bottom:200px;right:10px;background: rgba(255,0,0,0.6);color:#fff;padding:2px 4px;font-size:0.8em;z-index: 100;/*display: none;*/}
            </style>
            ';

        echo '
            <script>
                /*
                Finds the viewport width
                http://matanich.com/test/viewport-width/
                */
                (function(n){n.viewportSize={},n.viewportSize.getHeight=function(){return t("Height")},n.viewportSize.getWidth=function(){return t("Width")};var t=function(t){var f,o=t.toLowerCase(),e=n.document,i=e.documentElement,r,u;return n["inner"+t]===undefined?f=i["client"+t]:n["inner"+t]!=i["client"+t]?(r=e.createElement("body"),r.id="vpw-test-b",r.style.cssText="overflow:scroll",u=e.createElement("div"),u.id="vpw-test-d",u.style.cssText="position:absolute;top:-1000px",u.innerHTML="<style>@media("+o+":"+i["client"+t]+"px){body#vpw-test-b div#vpw-test-d{"+o+":7px!important}}<\/style>",r.appendChild(u),i.insertBefore(r,e.head),f=u["offset"+t]==7?i["client"+t]:n["inner"+t],i.removeChild(r)):f=n["inner"+t],f}})(this);

                (function ($, root, undefined) {
                    
                    $(function () {

                        var width   = viewportSize.getWidth();
                        var height  = viewportSize.getHeight();

                        function displayWidth() {
                            $(".dev-page-width").text(width);
                            $(".dev-page-height").text(height);
                        }

                        displayWidth();

                        $( window ).resize(function() {
                            width = viewportSize.getWidth();
                            height = viewportSize.getHeight();
                            displayWidth();
                        });

                    });
                    
                })(jQuery, this);
            </script>
            ';

        echo '<span class="dev-template-name">

                WPEngine - Staging<br />';
                echo end($template_array).'<br />';
                echo 'ID: '.get_the_ID().'<br />
                <span class="dev-page-width"></span>px width<br />
                <span class="dev-page-height"></span>px height<br />';

                if ( is_user_logged_in() ) {
                    
                    echo 'Logged IN - ';
                    global $current_user;
                    $user = wp_get_current_user();
                    echo $user->display_name."<br />";
                    
                    echo 'Member - ';
                    $user_meta = get_userdata( $user->ID );
                    echo implode(', ', $user_meta->roles);
                
                } else {
                    echo 'Logged OUT';
                }
                    
        echo '</span>';

    }
    add_action( 'wp_footer', 'dev_template_name', 100 );

This has been updated to 'Dev Template Name 2':
https://gist.github.com/celticwebdesign/d5bb496910ca6cc05f002bd9c9b092f2