Morfik debuggers and monitors allow you to debug your application errors in browser and server side code from within the design environment by stepping over and through your high-level source code as well as automatically generated JavaScript code. You can add breakpoints to pause execution anywhere in the browser or server side code. View the current value of a variable by hovering the mouse pointer over it. Track the flow of execution in your code and more.

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

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

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 5.

Figure 5: Morfik 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 6.

Figure 6: Debugger Section of the Morfik Options dialog in the Morfik workspace

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.

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.

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 6, 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 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.

Backend Compilers

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.

document_text16.png   XML Monitor
document_text16.png   SQL Monitor
document_text16.png   HTTP Monitor

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.

Related Topics

Back to top