Display placeholder names in Sitecore Experience Editor

When working in the Sitecore Experience Editor, sometimes it can be a bit annoying to find various placeholders on a page. This can also cause some frustrations for content authors if they aren’t sure what they are looking for. To help with this, I wrote a bit of javascript to display the names of the placeholders on the page making it a little easier to locate them.
*This javascript works with Sitecore 8.1 update 2 (rev 160302) and wasn’t tested in other versions, so the markup generated in Experience Editor may be different.

jQuery.noConflict();
(function ($) {
    $(document).ready(function () {
        $(".scEmptyPlaceholder").each(function (i, obj) {
            var siblingEl = $(obj).prevAll("code[type='text/sitecore'][kind='open'][chrometype='placeholder']:first");
            var m = siblingEl.html();
            var x = $.parseJSON(m);
            $(obj).text(x.displayName);
            $(obj).css("text-align", "center").css("vertical-align", "middle").css("font-size", "x-large").css("color", "lightgray").css("padding-top", "30px").css("width","100%");
        });
        $("[sc-part-of='placeholder rendering']:not([style])").not("meta").not("script").not(".scEmptyPlaceholder").not("title").not("link").not("style").each(function (i, obj) {
            var siblingEl = $(obj).prevAll("code[type='text/sitecore'][kind='open'][chrometype='placeholder']:first");
            var m = siblingEl.html();
            var x = $.parseJSON(m);
            var newDiv = "<div style='background: transparent url(/sitecore/shell/themes/standard/images/pageeditor/EmptyPlaceholderBg.png) repeat; text-align: center; font-size: x-large; color: lightgray; padding-top: 30px;'>" + x.displayName + "</div>";
            $(newDiv).insertBefore($(obj));
        });
    });
})(jQuery)

Revolutionize Your Business With Generative AI

From product design and software development to virtual agents, content creation, and reporting, GenAI is transforming business. Our AI experts help you unlock GenAI’s full potential and drive growth.

Let’s Get Started

With the above javascript, I’m grabbing each empty placeholder and querying the <code> element that precedes it. Within the <code> element is a bit of JSON that defines the placeholder and from that I can pull the ‘displayName’ value. The second section grabs the non-empty placeholders and does the same thing, except that it pre-pends a <div> to display the placeholder name and uses the Sitecore EmptyPlaceholderBg.png to decorate it.
I only wanted this js run when the page is in editing mode, so I included the following code block on the page:

@if (Sitecore.Context.PageMode.IsExperienceEditor)
{
  <script type="text/javascript" src="~/assets/js/lib/jquery-2.2.1.js"></script>
  <script type="text/javascript" src="~/assets/js/app/EEPlaceholders.js"></script>
  return;
}

The results of the javascript inclusion in Experience Editor are shown below.
Blank Page:

Existing page with some content:

 
The javascript and styling could be cleaned up a little but this was a good starting point for displaying those, sometimes, hard to find placeholders.
If you have any comments or suggestions, please feel free to reach out to me in the comments below or on Twitter @bill_cacy .