Debugging Display Templates

Display Template Series

Last in my series of Display Templates, I’m going to show you how to debug the JavaScript within a Display Template.

There is more than one way to skin a cat, so the saying goes, and this way I’m showing below isn’t the only way.

  1. Once your Display Template is uploaded to your Master Page Gallery, and you have assigned it to your Content Search WebPart, load the page in the browser and then hit F12 to load up the IE developer toolbar. (Obviously you can use Firebug in Firefox if that’s your preferred choice of browser).
  2. Switch the tab to Script. In the drop down list of scripts currently running on your page, find the corresponding .js file to your Display Template.
  3. After selecting it, insert your breakpoint where you wish, and then click the Start debugging link at the menu bar area.
  4. The page will refresh, and when your JavaScript breakpoint is reached, you can then step through the code, and add Watch where needed.