I have recently started working on a new project with a non-transparent structure. By saying non-transparent I mean non trivial locations for the code and non-matching layout and rendering items to their filesystem counterparts. So I was looking for the convenient way to identify matched pairs.
Luckily I remembered JammyKam presenting something similar at London UserGroup in January 2017 and refereed to his blog in order to find Rendering Chrome for Components package (module - ?). So I will briefly go through his solution show how it helped me and what it does:
- Install package as normal
-
Add a namespace into web.config from /Views folder:
<add namespace="ForwardSlash.SC.RenderingChrome.HtmlHelpers"></add>
- Append this to a containers element so that it generates an attribute:
@Html.Sitecore().ContainerChrome()
-
Now, if you go to Experience Editor and open View tab, you'll see a new checkbox Highlight Renderings
clicking which turns all magic on
Here's the result:
It works not only in Chrome, as you see I run it in firebug.
Hope it will help you as much as it already has helped me.
References:
- original post by Kamruz Jaman
- sources on GitHub
- presentation slides from Sitecore User Group London (January 2017) - 3.5MB