Browser Side Debugging
The browser side debugger is based on Mozilla technology and the built-in Debug Browser Window 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.
|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.
As shown in the above figure, the debug browser toolbar includes buttons for viewing your applications in one of the supported browsers.
The supported browsers are Internet Explorer, Firefox, Safari, Chrome and Opera and a Morfik XApp should look and work the same in all of them. In Figure 2 the same application which appears in Figure 1, within the Debug Browser Window, is shown running in Apple's Safari browser.
|Figure 2: 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 the Browser or Server side of a Morfik XApp.
Stepping Through High-Level Language Source Code
In Figure 3 you can see a screenshot of Morfik 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 3: Breakpoints set in the browser side high-level source code|
Notice the Breakpoints list at the bottom of the main window of the Morfik worskpace, in Figure 3. 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 4 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 4: Morfik workspace tracing through browser side high level source code|
|Figure 6: Debugger Section of the Morfik Options dialog in the Morfik workspace|
Following Application State
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 7: The Watches view on the lower part of the IDE's main window|
You can see both the Watches tab and the Pin in Figure 7.
As an additional aid to debugging your application the new Debug Browser Windows in Morfik 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 of the error messages shown in the console 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.
Server Side Debugging
Morfik 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.
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 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.
|Figure 8: 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.
Morfik 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.
Morfik'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, you need to acquire a license for Delphi from CodeGear in order to use it.
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 the IDE allows you to set breakpoints at any point of your server side code, just as done in browser side debugging.
|Figure 9: Stepping through, server side, Morfik Basic code.|
In Figure 9 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 9 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.
Monitoring Communications for XApp Debugging
Morfik 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.
The XML, SQL and HTTP monitors in the bottom docking site allow you to inspect the XML packages traded by Server and Browser sides of the XApp, monitor the SQL commands and see all the requests received by the web server respectively.
Wrapping it up
Morfik 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.