Debugging Display Templates
Right after I published my last post on using custom display templates, of course one of the first questions I got was great – how do I debug them? Well there are a couple of ways that I’ve found to debug these:
- In your display template add your own javascript after the first div tag and put in a debugger; statement. Note that you MUST uncheck the option in IE to disable script debugging and restart the browser. This is really cool because you can break in Visual Studio and get all your variables and query values:
- The second way is a little more “hard-coded”, so I don’t like it as much but so far it works well. You need to:
- Press F12 to bring up the IE Developer window
- Click on the Script tab
- In the drop down with the list of script files select clientrenderer.js
- Look for the CoreRenderWorker function; I normally find it by going down to the second to last line of script and pressing the END key.
- Click and highlight the first line of code inside that function; it should be something like “var a;”
- Right-click on it and select the Insert Breakpoint from the menu.
- Click the Start Debugging button.
- Go back to the browser and execute your query
- When the debugger breaks in, click on the Locals tab on the right side of the window, and then click the plus sign next to the “c” variable to expand it.
- You can look at all of the variables in there, but generally you will want to click the Play button in the debugger and continue. Each time a new set of code is loaded the “c” variable collapses, and that’s your clue that you should go back and expand it again to see what data it contains. I generally find that you need to click the Play button 3 to 5 times, until an object called “CurrentItem” appears under the “c” variable. That represents a single search result and allows you to peruse all of the values for the managed properties that you requested. Super useful and does not require Visual Studio.