Try our conversational search powered by Generative AI!

Ben  McKernan
Aug 15, 2014
  14112
(7 votes)

How to debug Episerver UI code

TL;DR
To run your site with uncompressed JavaScript in edit mode add <clientResources debug="true" /> to your web.config inside the episerver.framework element.

 

JavaScript Debug Files Explained

A while back I posted a blog about using uncompressed JavaScript files for debugging EPiServer 7. I thought it would be worth highlighting how you can use uncompressed JavaScript in EPiServer 7.6 and onwards and how it works with the new continuous release cycle. I am happy to say it is even easier than before!

As of EPiServer 7.6 the CMS UI has been released via NuGet packages. These packages contain all the JavaScript files required to run the UI compressed into a zip file. The system then reads the contents of the zip file at run time. The great thing about this approach is that at initialization, if the client resources debug flag is set to true, the system will first look for a debug version of the JavaScript zip file and load that instead if it exists.

In order to have the system use the debug files you need to enable debug mode for client resources. You can do this simply by adding the <clientResources debug="true" /> element to your web.config inside the episerver.framework element. You can then toggle the debug files on and off by changing the value of the debug attribute from true to false.

EPiServer.CMS.UI.Sources (advanced topic)

This nuget package contains all original UI source files together with uncompressed dojo & dijit.

That source package is built as part of every release so it ties quite simply into the continuous release cycle. You can install it the same way you would any other NuGet package from nuget.episerver.com.

Install-Package EPiServer.CMS.UI.Sources

In case you ever need to manipulate sources files and then create a customized dojo build you can use that package. It comes together with all dojo build tools.

Please note that in order to debug the EPiServer edit mode you don't need that package. The config change described above is sufficient.

Aug 15, 2014

Comments

Henrik Fransas
Henrik Fransas Aug 15, 2014 08:14 PM

Nice, This is a great help when trying to built more advanced properties or debugging when something is wrong.

Great work!

Paul
Paul Aug 26, 2014 05:45 AM

Hi Ben, great article. In my case, I need to make and keep the changes to some of these files. What do you recommend as the best way to re-compress with my changes?

Please login to comment.
Latest blogs
Welcome 2024 Winter OMVPs

Hello, Optimizely community! We are thrilled to announce and welcome the newest members to the Optimizely Most Valuable Professionals (OMVP) progra...

Patrick Lam | Feb 26, 2024

Optimizely Opal... what it does actually do?

At Opticon 2023, Optimizely announced its first AI product Opal. AI is definitely the new tech buzzword in 2024 and with promises that AI will be...

Jon Jones | Feb 25, 2024 | Syndicated blog

How to add more Content Area Context Menu Item in Optimizely CMS 12

Hey folks, today I will share something related to Context Menu customization in the Content Area of Optimizely CMS. As you know, the content area ...

Binh Nguyen | Feb 25, 2024

Developer meetups in Stockholm & Helsinki

It's time for developer meetups! Next month we will be in Stockholm and Helsinki. Join us for getting the latest updates from Optimizely, be inspir...

Magnus Kjellander | Feb 23, 2024

Roll Your Own Security Headers

Proper security headers are a must for your Optimizely driven website. There are a variety of tools out there that will help with this, but when...

Ethan Schofer | Feb 21, 2024

Migrate Catalog content properties

A colleague asked me yesterday – how do we migrate properties of catalog content. There is, unfortunately, no official way to do it. There are...

Quan Mai | Feb 20, 2024 | Syndicated blog