Debugging

When you create a new component, the version 1 is a DRAFT version, and the same occurs also when you add a new version (e.g. v1 → v2).

A DRAFT version can be made available on a single environment, for instance in the DEVELOP environment. When done, each time you save the component, it is automatically installed and kept updated to the selected environment. Each time you save the component, in the browser you simply have to update the tab where you are browsing the DPS with the component installed. Moreover, the JavaScript resource containing all components, and loaded by the DPS front-end, is not minimized, in this way you can debug your source code by adding breakpoints.

Here is a step-by-step guide:

1. Refresh the page and press F12 to open the Chrome DevTools.

2. Select the Sources tab.  

3. In the tree locate and expand the node related to the current navigated page.

4. Click on the resource that has a UUID as name (e.g. a646ca50-0a74-4cff-87ca-2a6293a9c0c9).
   Note that the name is dynamic, and changes each time you refresh the page.
   
   
   

5. In the code locate the class of your component, and add breakpoints where needed.
   In the alternative, in the source code you can use console.log(“TEST ABC”) to log messages in the browser console.  

When you complete your development, you can follow the publishing steps to make your changes available in the PRODUCTION environment.

Code Obfuscation

In case there are no DRAF versions installed, all the JS and CSS resources are automatically obfuscated and minimized to reduce the page loading time.