Debugging a Morfik AppsBuilder Application
From Morfikwiki.com
The entire debugging infrastructure of Morfik AppsBuilder has been revised for version 2.0. As of release 1.3.1.18, many of these changes were back ported into the 1.x version branch. In this revision the debugging of browser and server side code has been further integrated and it became possible to debug both sides of the application, at the same time. To accomplish better integration with the Morfik workspace a technology change was in order. This means that instead of relying on Microsoft Script Debugger, Morfik has opted to use Mozilla technology.
Contents |
[edit] New Browser Side Debugger
Part of the revamped debugging infrastructure is a new browser side debugger which is based on Mozilla technology and a built-in Debug Browser Window which also uses Mozilla technology to run your applications faster. This window is basically a built-in Firefox browser which is always loaded into the workspace thus making debugging snappier and providing more information about the running application. Note that debugging the browser side of a Morfik Web Application is essentially the same as debugging a Morfik Browser Application.
Figure 1 shows the new new Debug Browser Window with a loaded application.
Figure 1 – The Debug Browser Window.
The Debug Browser Window is open by default when the command to run an XApp from within the workspace is selected. From this window all the main browsers can be called up (if present in the computer) so that the user can test the application in whatever browser he/she needs to. Figure 2 shows in detail the toolbar buttons for choosing a browser to execute.
Figure 2 – Browser icons on the top toolbar of the Debug Browser Window.
The supported browsers are Internet Explorer, Firefox, Safari and Opera and a Morfik XApp should look and work the same in all of them. In Figure 3 the same application which appears in Figure 1, within the Debug Browser Window, is shown running in Apple’s Safari browser.
Figure 3 – Booktrader XApp running in Apple’s Safari browser.
From this point on, we will have a more detailed look at the capabilities available when debugging each side of a Morfik XApp.
[edit] Browser Side Debugging
With the new browser side debugger it is no longer necessary to download and install the Microsoft Script Debugger. The is much more stable, not being subject to the compatibility problems that to which the Microsoft solution is all too vulnerable.
[edit] Stepping Through High-Level Language Source Code
While debugging your XApp you can step through your high level language code to better understand how your application is working. Though Morfik tools attempts to make a direct correlation of the JavaScript source code line to a line in your high level source code, this is not always possible. This is mostly due to the fact that a single high level language line of code might generate several lines of Javascript code. In Figure 4 you can see a screenshot of the AppsBuilder workspace with a pair of breakpoints set in the browser side high level source code. In this case the language used was Morfik Basic.
Figure 4 – Breakpoints set in the browser side high-level source code.
Notice the Breakpoints list at the bottom of the main window of the AppsBuilder worskpace, in Figure 4. You can set breakpoints by clicking on the grey gutter on the left side of the editor window. When a breakpoint is set, a small red indicator is displayed in the gutter and the corresponding line of code is highlighted in red.
Once you start to trace through your source code you will see an additional blue line which indicates where the current execution point is. This line can also be identified by a small green arrow which appears in the gutter of the code editor. In Figure 5 you can see the workspace with breakpoints set and the execution point highlighting another line of code.
When the current execution point is over a line where a breakpoint has been set, the breakpoint’s red line will be visible instead of the blue line of the current execution point. You will still be able to know where the execution point is through the small arrow in the gutter section.
Figure 5 – AppsBuilder workspace tracing through browser side high level source code.
[edit] Stepping Through JavaScript Code
While debugging your XApp it is possible to step through the JavaScript source code which is automatically generated by the Morfik compiler, as can be seen in Figure 6.
Figure 6 - AppsBuilder workspace tracing through JavaScript source code.
In order to have access to the generated JavaScript source code you have to enable intermediate code debugging in the Debugger Options dialog, as shown in Figure 7.
Figure 7 – Debugger Section of the Morfik Options dialog in the Morfik workspace.
[edit] Following Application State
You can follow your application state while tracing through your code, either in a high level language or JavaScript through the "Watches" view. This view is available through one of the tabs which can be seen at the bottom of the IDE’s main window as shown in Figure 8.
Figure 8 – The tabs of the panels at the bottom of the main window, with focus on the Watches tab.
When you click on the Watches tab a panel scrolls upward giving you access to the Watches view, as well as all the other tabs which were visible at the bottom of the window. This panel will automatically hide itself as soon as your mouse moves off of it, unless you "pin" it in place. You can do this by clicking on the small "pin" icon on the right hand side of the panel.
Figure 9 – The Watches view on the lower part of the IDE’s main window.
You can see both the Watches tab and the Pin icon indicated by arrows in Figure 9.
Figure 10 – Console in the Debug Browser Window.
As an additional aid to debugging your application the new Debug Browser Windows in Morfik AppsBuilder has a console where errors, warnings and messages are displayed as your application is executed. These are the same messages which will be displayed if the application is executed in Firefox.
| Note | |
 | Some error messages are displayed in the console, as shown in Figure 10. Some of these messages are generated by code which is automatically created by the Morfik Framework or the Morfik compiler. These messages are being addressed, very carefully, to ensure that no change breaks cross-browser compatibility and have no negative impact on application functionality. |
[edit] Server Side Debugging
The Morfik AppsBuilder has its own, built-in, machine level debugger so that you can follow your server side code. Debugging the server side code is very different from debugging the browser side code since on the server side the final product of a compiled Morfik application is a binary executable file.
Nothing could be further from source form script code of the browser side than the binary machine language executable of the server side, even so the similarities far outweigh the differences. Once you are familiarized with both processes you will be able to appreciate this.
| Note | |
|
| Server side debugging is a feature of Morfik Web Application projects which support both server and browser side code. Morfik Browser Application projects focus exclusively on browser side code and therefore offer only browser-side debugging. |
[edit] Intermediate Source Code
The similarities between the debugging processes for the browser and server sides of the application start at the Intermediate Source debugging. You see, Morfik AppsBuilder generates Object Pascal code from all the server side modules in your project, regardless of which language the module was written in. This source code is then compiled into binary form in another compiling process which takes the Object Pascal as input and gives out the binary application.
If you have enabled Intermediate Source debugging by selecting the respective options at the bottom of the Debugger tab of the Debugger Options dialog, as shown in Figure 7, you will be able to access and step through your Object Pascal intermediate source code. This works in the same manner as stepping through your JavaScript code on the browser side of the application.
Figure 11 – Intermediate Object Pascal code generated for the Debugging test project which was written in Morfik Basic.
Though accessing the intermediate source code for the server side application is possible it is generally not necessary to do so. Debugging in the language you originally wrote your modules, should be more than adequate.
[edit] Backend Compilers
Morfik AppsBuilder can use several different compilers as its server-side backend compiler. When you are going to debug the server side of your application, you should choose the target platform as being "Windows, Intel x86". If you choose "Windows, Intel x86 (Delphi)" which uses CodeGear’s Delphi compiler as the backend compiler (for compiling the intermediate Object Pascal code into machine code), you will not be able to debug your application.
The AppsBuilder’s built-in debugger is compatible with the default server side backend compiler, FreePascal, which uses a different format of debug information than Delphi. Also important to have in mind is that different from the FreePascal compiler, which comes bundled with Morfik AppsBuilder, you need to acquire a license for Delphi from CodeGear in order to use it.
[edit] Stepping Through High-Level Language Source Code
While debugging the server side portion of your XApp you can step through your high level language code to better understand how your application is working. The debugger built into AppsBuilder IDE allows you to set breakpoints at any point of your server side code, just as done in browser side debugging.
Figure 12 – Stepping through, server side, Morfik Basic code.
In Figure 12 you can see a breakpoint set in one line and the execution point, already past it, in the following line. Observe not only that the lines are highlighted but that the same icons are visible in the gutter area of the code editor. Visually, there is not much difference between debugging code for the server and browser portions of an XApp, as you may notice.
Also in Figure 12 you can see the watches view in the lower part of the window. Notice that just as in the browser side you can follow the state of your application by using the Watches view.
[edit] Monitoring Communications for XApp Debugging
The AppsBuilder debugger gives you access to a wide variety of information about your application, including the ability to inspect the data packets and commands that flow between the two parts of the application and the server side of the XApp and its database.
In Figure 13 you can see the XML view, indicated by an arrow, which will allow you to inspect the XML packages traded by Server and Browser sides of the XApp.
Figure 13 – XML view during debugging of the server side of an XApp.
In Figure 14 you can see the HTTP view which allows you to see all the requests received by the web server.
Figure 14 – The HTTP view in the Morfik workspace.
Another monitor which is not active by default, but can be activated, is the SQL monitor. In Figure 15 you can see this view in the Morfik workspace main window.
Figure 15 – SQL Monitor in the AppsBuilder workspace.
In order to activate SQL monitoring, which will allow you access to information such as displayed in Figure 15, you need to enable SQL Monitoring in the Monitoring tab of the Debugger Options dialog, as you can see in Figure 16.
Figure 16 – Monitor Section of the Morfik options dialog.
In order to get the SQL events that can be seen in Figure 15, AppsBuilder should be configured as shown in Figure 16. This view, along with the XML view, will allow you to have a better understanding of what goes on under the hood of your XApp. When debugging your applications you can use these options to catch only the events of interest.
[edit] Wrapping it up
Morfik AppsBuilder offers a multitude of debugging options and features which can help you understand what is going on when your application is not behaving as you had expected.
Both server and browser side debugging at the high-level language source code level are available and you can dive into the intermediate code as well, if you are familiar with it and so wish.
Morfik AppsBuilder (1.3.1.18 and up) has introduced an enhanced browser debugger, a built in Debug Browser Window and added support for debugging both sides of the application at the same time.
