Debug SharePoint display templates in Google Chrome

In spite of being a Microsoft .NET and SharePoint developer I have no regards for Internet Explorer no matter whatsoever. Google chrome is the best browser in the history of browsers.

You may also like to have a look at the below blog posts regarding Content Search Web Parts:

Let me you explain a small tip on how to debug the display templates of your Content Search Web Parts in SharePoint in Google Chrome.

There will always going to be 2 files created for your display template. One is the .HTML file in which you would be working and the other is the .JS file which gets automatically created and used by SharePoint once you upload your .HTML file.

a. Open the page in which you have your CSWP.

b. Press Ctrl+Shift+J. This will open your developer dashboard.

c. Click on “Sources” from the tabs as shown below:

clip_image002[6]

d. Expand _catalogs/masterpage and then Display Templates/Content Web Parts

clip_image003[4]

e. You should be seeing the .JS file of your display template. Click on the .JS file to open it in the workspace.

f. Put a breakpoint anywhere and refresh the page and the page load would pause when the break point is hit in the display template as shown below:

clip_image004[4]

g. From now you can debug like how you do in Visual Studio using F10 and F11.

Advertisements