JavaScript Debugging in NWBC

[bradp]

While working on a project where we are using NWBC Client with UI5 Applications, some custom and some standard, we were unable to debug the JavaScript and see the JavaScript console for the UI5 Applications when they were running in the NWBC client as the F12 Developer tools are deactivated when Internet Explorer is used as an embedded control.

Thanks to skemp for finding the solution to this problem in this discussion: Use browser debugging tools in the NWBC side panel? and in this external link: Debugging JavaScript in a WebBrowser Control from VS2010 | Mark Leighton Fisher [blogs.perl.org]

So I thought I would document the following steps to help others facing this issue.

1. Download Visual Studio 2013 free Community edition here: Visual Studio 2013 Free Community Edition

2. Hold the control key and go to Help->Tools->IE Settings Dialog in the NWBC Client.

3. Make sure the "Disable script debugging" checkboxes for both Internet Explorer and Other are not checked and that "Display a notification about every script error" is enabled as shown in the highlighted options below.

4. Make sure that NWBC is open and open Visual Studio 2013. In Visual Studio go to DEBUG->Attach to Process...

5. Select NWBC.exe and press Attach.

6. Here you will see the open Internet Explorer sessions within NWBC.

7. If we open a new tab with a custom UI5 Application you will notice another Internet Explorer session appears and you can see the code and console messages in the output section below when the "JavaScript Language Service" dropdown option is selected.

8. Changing the "JavaScript Language Service" dropdown option to "Debug" you can see all the JavaScript errors.

9. For some reason which I am not sure of, you are unable to debug and step through by setting break points in the code above. In order to debug your code you will need to add in a debugger; statement into your code as shown below. This unfortunately is not an option if its a SAP standard UI5 Application.

10. Now when this UI5 Application is opened via NWBC it will stop in the Visual Studio Debugger as shown below.

11. You can now use the Visual Studio Debug controls shown below to debug your JavaScript code.

If anyone manages to find out a way to debug SAP Standard UI5 Javascript code without needing to put in the debugger; statement I would love to know.