Additional properties sheet debugging

[former_member210191]

Hi all.

Is there any way to debut the javascript included at the additional properties sheet of a new SDK component?

How do you debug this javascript code?

For the component.js file I use the web browser debugguer but I do not know how to do it here and it drives me crazy.

By the way, is there any method to modify the component code and do not have to start/stop the DS from Eclipse thousand of times in order to test it?

Thank you.

Best regards,
Nacho

[mike_howles4 · Accepted solution]

Ahhh, a topic near and dear to my heart   Some of this I will be talking about at TechEd && d-code this year and also in a November ASUG webinar.  I'll add my approaches but I'll also page , Former Member, and Former Member to this discussion thread to pile on.

1. Is there any way to debug the javascript included at the additional properties sheet of a new SDK component?  How do you debug this javascript code?
   In the Advanced Property Sheet, yes this one is tough because JS errors are suppressed within Eclipse IDE.  You can right-click, properties... and grab the URL to copy and paste the URL to an web browser to debug SOME of the JavaScript however then the Java process will not attach the Property Sheet functions specific to Design Studio and the init() method will not fire so you'll have to fire it manually.  So this is only partially effective.  A lot of time it's an annoying case of try { ... } catch(e) { alert(e); } debugging for me.  Related to question 3, for the Advanced Property Sheet, you CAN modify the code in Eclipse SDK, and then with focus on the Advanced Property Sheet panel, press Control+F5 to reload the page and your changes will take effect.  You may have to deselect your component in the canvas and then click back on it to instigate another componentSelected event, but this does help avoid a great deal of 'Try something', 'Restart Design Studio', 'Darn, that didnt' work', 'Repeat' syndrome.
   
   
2. For the component.js file I use the web browser debugguer but I do not know how to do it here and it drives me crazy
   Yes this drives me crazy, too.    I found you can trigger Debug Mode in Design Studio by pressing Ctl+Alt+Shift+D and you will find in your menus access to a JavaScript Console to help.  After bringing up the Console, you'll want to reload your app so that the console captures whatever errors you are looking for.  Also you can access other SAPUI5-type debuggers with Ctl+Alt+Shift+P and Ctl+Alt+Shift+S.  (These last 2 can easily mess up your Design Studio Session, but are useful for debugging)  Also you can add the DEBUG argument to your runtime config in Eclipse to force Design Studio launcher to always start in Debug Mode.
   
   
   
3. By the way, is there any method to modify the component code and do not have to start/stop the DS from Eclipse thousand of times in order to test it?
   I WISH!  I'd love to hear any hacks to do this!!!  This is #1 on my wish list.

[former_member210191 · Accepted solution]

Thanks for your answer Michael. I like to hear I am not alone. SDK components rock but it is very hard to detect errors if they are just supressed.

[reiner_hille-doering]

1. Debugging of Additional Properties View scrips works best with Microsoft Visual Studio debugger. If you have access to it

• Check the Internet Explorer Options. Enable all kinds of JavaScript debugging.
• Run Visual Studio (devenv.exe), attach to "javaw.exe" as "Script"
• Find the scripts in the Solution Explorer and set breakpoints etc.

2.Debugging of component.js code e.g. with Chrome debugger is quite nice. Just run your app locally, hit F12, use Ctrl+O to find your component.js and enjoy. The debug-mode mentioned by Mike helps to understand the context, but is not neede.

3. There is no need to restart Design Studio from Eclipse for changes in your component.js and other JS files. Restart is only needed for changes in contribution.xml and contribution.ztl.

If you see the wrong file, it is always a problem of the Browser cache. Chrome Debugger has an option to disable the cache during debugging, that is very useful to keep turned on.

[mike_howles4]

Reiner,

On points 1 and 3, you just blew my mind!! So for during design time, this is when Control+Right-Click to force a cache-free refresh of the BI App would pick up any changes to the DIV/SAPUI5 SDK Handler code?

Also I'll have to check out the Visual Studio to help debugging the property sheet.

As always, thanks!!

[reiner_hille-doering]

It is difficult to know what the browser do with the different kind of reloads, so I don't know if e.g. Ctrl+F5 really ignores the cache. But "Disable cache (while DevTools is open)" option in Chrome and the "Ctrl+Shift+Del" in all other browsers turned out to be very effective.

Design Studio itself doesn't cache SDK handler files etc.

[former_member210191]

Hi Reiner,

CTRL + Refresh does not really work all the times. At least in my development station. Some changes appear after refreshing but some others do not show at all.

An example: if there is a JS error (and it is supressed), the script stops working. I fix it in JS code (Eclipse). I close the DS dashboard (not DS itself), open it again and, sometimes, it works. But it is always sometimes.

But definitely this is not a stable solution.

Thanks.

Best regards.

[mike_howles4]

Reiner,

Agreed that it's not 100% reliable.  As what may also be alluding to is maybe debugging design-time component behavior is one task (debugging how the Addl Prop Sheet interacts with the component in the canvas) and runtime debugging is a different task (where setting Chrome to use no cache is a more reliable approach)

From my understanding, Eclipse always uses IE (not Chrome) for the Canvas and Addl Prop Sheet right?  Just making sure we are all talking about debugging the same modes.  (Designtime vs Runtime for instance)

[reiner_hille-doering]

Yes, inside of Designer we always use IE. To ensure that it has up-to-date sources, the solution for me is Ctrl+Shift+Del on ANY EXTERNAL IE windows. If you  e.g. then close and open your app in the designer, all windows use newest scripts.