Debug UI Framework in my Project

I would like to debug the UI Framework in my project. Is there any specific flow that i can start debugging the “File Manager” Upload functionality. Scenario: When I upload a file more than 1 MB a validation message should show up on the UI as “The size of the selected file (5.30 MB) is too large to attach. File size cannot be more than 1 MB.”.  I inspected the elements and observe that a validation message has been created with in a div tag using a class “mx-Validation-message” which configured as display:none in PatternLibraryTheme.css file. Since display is none message is not showing up on the UI. I wanted to debug how CSS class mx-validation-message has been applied to the field. Widget: File Manager.
3 answers

Dear Chitra,

The UI Framework, runs in the browser. Debugging it can be hard as the source code of the core widget is minified. (Some custom widgets from the app store are shipped with the code.

Debug in browser:

For minified code, you can use this option

Cheers, Andries


Try that in Eclipse. First in Studio Pro, press Ctrl-F5 “Deploy for Eclipse”. Then in Eclipse open the project, look for the widget, set the breakpoint and start the project in debug modus.



Why do you want to know how the class is applied to the field? What would like to achieve when you know how it is done?