Preparing for a user interface debug session

To prepare for a user interface debug session, modify a System.config file and set breakpoints in JavaScript source files.

Procedure

  1. Access the folder %TRIDION_HOME%\web\WebUI\WebRoot\Configuration\ and open the file System.config for editing.
  2. Find the following element:
    <filter for="Style" type="Tridion.Web.UI.Resources.Filters.JScriptMinifier, Tridion.Web.UI.Resources.Filters" enabled="always">

    and set the value of enabled to never.

    This makes JavaScript messages easier to read.
  3. Find the following element:
    <filter for="Style" type="Tridion.Web.UI.Core.Configuration.Resources.Filtering.CssCompressorFilter, Tridion.Web.UI.Core" enabled="always">

    and set the value of enabled to never.

    This makes your CSS easier to read.
  4. Find the following element:
    <cache httpexpireduration="P10Y0M0DT0H0M0S">

    and set the value of httpexpireduration to P0Y0M0DT0H0M10S.

    This reduces browser cache duration of GUI elements.
  5. Find the server element with a version and modification attribute, and increase the number value of modification by one.
  6. Save and close System.config.
  7. Set a breakpoint in one of the following ways:
    If you are the only user using this system, you can insert breakpoints anywhere in a JavaScript (.js) file by adding the following line where you want the browser to break:
    debugger

    Alternatively, load the webpage that is causing a problem in your browser, open your browser's developer tools by pressing F12, and in the Script tab (Sources tab in Chrome), select and examine the Javascript file in which you want to set a breakpoint. Do so by clicking the line number next to the line on which you want to set your breakpoint.

  8. Go to the browser you will use for the debugging session and clear the browser cache.
  9. If you are using Microsoft EdgeMicrosoft Edge, you need to disable the following option in your internet settings: Disable script debugging (Internet Explorer). This option is enabled by default.
  10. Open the browser's developer tools and proceed with a debugging session.

Results

You are now ready to begin debugging.