Use browser debugging tools in the NWBC side panel?

[Former Member]

Hi,

I've had a bit of a dig but couldn't find any information on if it is possible to use the IE developer tools within the NWBC side panel. We are developing some SAPUI5 side panels for NWBC and it would be nice to be able to use the developer tools to interactively debug the application as it is running in the NWBC side panel. So far the best we could think of was to use javascript alerts - but that's a bit clunky.

I suppose we can always run the application directly in the browser but then we don't have access to the NWBC data context.

If any one has any experience or suggestions please let me know.

Thanks,

Simon

[Former Member · Accepted solution]

Back on to this again... more broadly I'd like to re-frame the question to "How can we debug Javascript in NWBC?"

My understanding is that NWBC (desktop) uses the WebBrowser control from Internet Explorer. I have come across this web page that describes a technique to debug Javascript in the WebBrowser control, but I wonder if it would work for NWBC desktop

http://blogs.perl.org/users/mark_leighton_fisher/2011/09/debugging-javascript-in-a-webbrowser-contro...

Can anyone help? (cc. Former Member )

Thanks,

Simon

[Former Member · Accepted solution]

Hi Simon,

sorry I did not read your initial post... but in the meantime you have found something which is correct and which works with NWBC Desktop.

As soon as you have enabled script debugging in Internet Explorer it is possible to attach any script debugger to NWBC Desktop.

To activate the setting just go to Internet Explorer | Tools | Internet Options |  Advanced | Browsing and uncheck "Disable script debugging (Other)".

Then attach a debugger like Visual Studio as it is written in your link. Don't forget to set the code type to Script and then you can see the script running inside the canvas area.

Unfortunately the developer tools cannot be used for the webbrowser control, so that examinig html/script code inside NWBC Desktop is always a bit tricky and difficult.

Best Regards,

Thomas

[Former Member · Accepted solution]

Thanks Thomas. A colleague of mine is going to try this today and then perhaps he/I will blog about how to set it up.

[Former Member · Accepted solution]

Hi

We tried this out and it works! But we have one question, do you know how to set a breakpoint and get the debugger to stop in code where you cannot add in a "Debugger" statement? In order for us to debug the standard SAP code we would need to be able to set a breakpoint as we can't just easily add a debugger statement to the standard code.

If we run a page, then set a breakpoint we then have to refresh the page to get the code to run again and it seems to remove the breakpoint we set...

Thanks,

Simon

[Former Member · Accepted solution]

Hi Simon,

this is something I cannot confirm, because for me it worked with the breakpoints after refresh and navigate back and forward. But I guess this depends on the script debugger.

I have another solution for that problem but this is a bit more tricky, but sometimes very very helpful 🙂

You can use fiddler2 to pimp the script coming with the server response and set a debugger; statement at the right position. Then you will be automatically asked to start the debugger and this happens every time when you come through the pimped code. Sometimes this is more comfortable as stepping through all the code manually.

I am sure, that you know about fiddler as web debugging tool and you can add simply breakpoints after each response and then you can write something to the response like the debugger statement. But this is exhausting as you break after each single response and have to check if this is the right one and then go further. The best way is to modify the rule file. You can find this rule file in fiddler | Rules | CustomizeRules. Then you can pimp the file in any editor and you can write your own methods.

In this case the best approach is to add a method and call it in the right event handler. Here is a simple example which should work:

Just add a method PimpSession(oSession)

// replace string with another string in response and mark magenta if replacing was done

static function PimpResponse(oSession: Session)

{

     //return;    =>activate this if you don't want to pimp something

     oSession.utilDecodeResponse();                                           

     var str2Replace= "callFunctionXY(value){";

     var replacement= "callFunctionXY(value){ debugger;";

     if (oSession.utilFindInResponse(str2Replace, false) >= 0)

    {

          oSession.utilReplaceInResponse(str2Replace, replacement);

          oSession["ui-bold"]="true";

          oSession["ui-color"] = "magenta";

     }

}

and add this method call to static function OnBeforeResponse(oSession: Session)

Now fiddler will automatically set the debugger statement to each response were the string "callFunctionXY(value){" can be found and adds the debugger; statement into the method.

This is a great possibility to work with scripts running inside NWBC, and together with the attached script debugger it is much easier to come into the correct code position to check.

I hope this gives you a new idea how to achieve debugging in NWBC.

Best Regards,

Thomas

[Former Member · Accepted solution]

That's great thanks Thomas!

[bradp]

Hi Simon and Thomas,

Thanks for providing the solution for this. I've documented the steps in a blog here:

Cheers,

Brad