Skip to Content
Author's profile photo Brad Pokroy
Brad Pokroy
December 17, 2014 2 minute read

JavaScript Debugging in NWBC

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 Simon Kemp 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

Screenshot 2014-12-17 17.37.12.png

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

/wp-content/uploads/2014/12/001_609653.png

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.

/wp-content/uploads/2014/12/002_609655.png

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


/wp-content/uploads/2014/12/003_609656.png

5. Select NWBC.exe and press Attach.

/wp-content/uploads/2014/12/004_609658.png

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

/wp-content/uploads/2014/12/005_609662.png

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.

/wp-content/uploads/2014/12/006_609664.png

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

/wp-content/uploads/2014/12/007_609668.png

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.

/wp-content/uploads/2014/12/008_609669.png

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

/wp-content/uploads/2014/12/009_609670.png

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

/wp-content/uploads/2014/12/010_609674.png

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.

Assigned Tags

      3 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Simon Kemp
      Simon Kemp

      As usual good useful stuff Brad. Just to add a little and to answer your question (of course you already know this but adding here for everyone else) you can debug the SAP standard code by inserting a "debugger" statement on the fly into the code using Fiddler as described here

      http://blogs.telerik.com/fiddler/posts/13-08-20/breakpoints-in-fiddler

      I have successfully used the bpafter index.html to add a debugger statement into the index.htm page.

      Cheers,

      Simon

      Author's profile photo Brad Pokroy
      Brad Pokroy
      Blog Post Author

      Thanks Simon. Very cool trick and useful link 🙂

      Cheers,

      Brad

      Author's profile photo Rainer Betrich
      Rainer Betrich

      Hi Simon, Hi Brad -> turning browser debug Tools in SAP BC 6.5 using <Ctrl>-Tab ist still working. Spend a lot of time to get that valuable Information.

      Thanks,

      Rainer

      Â