Bottom Docking Site

Located, by default, across the bottom of the workspace, the bottom docking site contains a series of inspectors which can be used when performing management tasks for your project or while debugging.


Bottom_Docking_Site.png
Bottom Docking Site


NewDocument32.png Output Inspector

This inspector displays the output from the compiler and the linker, including any errors encountered during the compilation or linking steps. It also displays messages output by the DebugOut function.


output-panel.png
Output Inspector


A popup menu is available when any area in the Output inspector is right-clicked. The popup menu choices include:

Save: Saves the contents of the Output inspector to a file.
Copy: Copies the contents of the Output inspector to the Clipboard.
Clear: Clears the contents of the Output inspector.

Stop32.png Errors Inspector

This inspector displays real-time syntax errors and warnings when working with the Code Editor. The inspector's contents are organized in a tabular format, containing the following columns:


errors-panel.png
Errors Inspector


Type: Error or Warning icons.
Description: A description of the Error or Warning.
Source: The name of the resource in which is the Error or Warning was generated.
Target: Identifies the Source as either a Browser or Server resource.
Line: The line number in the source code where the error or warning was generated.
Column: The column number in the source code where the error or warning was generated.


A popup menu is available when any area in the Errors inspector is right-clicked. The popup menu choices include:

Filter: Filters the display by errors, warnings or all.
Sort By: Sorts the display by Type, Description, Source, Target, Line or Column.
Save: Saves the contents of the Output inspector to a file.
Copy: Copies the contents of the Output inspector to the Clipboard.
Clear: Clears the contents of the Output inspector.

In addition to the Sort By option above, columns may also be sorted by clicking their column titles; reverse sort order is not supported. The individual columns of the grid can be resized by dragging the column title's vertical delimiter; the columns cannot be reordered.

Double-clicking a row in the grid will take you directly to that line in your source code.

Note: Resolving errors is an important task in application development, as your project will not compile while errors are present in the Errors inspector. Also, compiler errors can exhibit a cascading effect – in other words, a single error can generate numerous other errors. In this case, fixing one error may automatically fix many others.


Note: The real-time errors displayed in the Errors inspector are not the same as run-time errors. Whereas real-time errors displayed in the Errors inspector are typically code syntax-related, run-time errors do not make themselves known until your application is actually executing, and are typically caused by program logic errors or references to resources (such as memory, files, objects, etc.) that are not available.

text_code_server32.png Search Inspector

The search inspector displays the results of a text search. The search function searches either the current source code file or all source code files for the specified text.


search-panel.png
Search Inspector


The inspector's contents are organized in a tabular format, containing the following columns:

Source Line: The line of text containing the search term.
Source: The name of the resource containing the Source Line.
Path: The file system path to the Source.
Target: Identifies the Source as either a Browser or Server resource.
Line: The line number in the source code where the error or warning was generated.
Column: The column number in the source code where the error or warning was generated.

To perform a search at any time, press [Ctrl + F] to display the Find Text dialog box. In the above example the text "showmessage" is being searched.

Double-clicking a row in the grid will take you directly to that line in your source code.


A popup menu is available when any area in the Search Results inspector is right-clicked. The popup menu choices include:

Save: Saves the contents of the Search Results inspector to a file.
Copy: Copies the contents of the Search Results inspector to the Clipboard.
Clear: Clears the contents of the Search Results inspector.


NewDocument32.png Log Inspector

The Log inspector displays the contents of the log. The log is populated at run-time by the server-side debugger, and logs the steps your application goes through during startup. The information that is logged includes modules (DLL's) that get loaded and threads that are created by your application.


bottom-dock-log.png
Log Inspector


A popup menu is available when any area in the Log inspector is right-clicked. The popup menu choices include:

Save: Saves the contents of the Log inspector to a file.
Copy: Copies the contents of the Log inspector to the Clipboard.
Clear: Clears the contents of the Log inspector.

bug_yellow32.png Watches Inspector

The Watches inspector displays those variables that have been set to be “watched” at run-time. Monitoring your application's state by watching your variables while your application is executing is a very handy debugging technique, particularly when your variables are being assigned unexpected values (perhaps at unexpected times).


bottom-dock-watch.png
Watches Inspector


The inspector's contents are organized in a tabular format, containing the following columns:

Name: The name of the variable being watched.
Value: The value of the variable being watched.
Type: The data type of the variable being watched.

To add a variable to the watch list:

While the inspector is active, right-click (or press [Ctrl + A]) to display the popup menu and select the “Add Watch” option. A new row will be created in the inspector where you may enter the name of your variable in the Name column.

While in the Code Editor, either
(1) press the Add Watch button in the Debug tab of the Ribbon bar,
(2) right-click to display the popup menu and select the Debug | Add Watch... option, or
(3) press [Ctrl + F5]. In either case, the Watch Properties dialog box will display, where you may enter the variable name in the Expression field:


watch-properties.png
Watches Inspector


While your application is running, you may at any time view the Watches inspector to check the value of your watched variable(s).

A popup menu is available when any area in the Watches inspector is right-clicked. The popup menu choices include:

Enabled: Enables/disables the watch variable.
Delete: Removes the watch variable.
Properties: Displays the Watch Properties dialog box.
Add Watch: Adds a new watch variable.
Delete All: Removes all watch variables.
Disable All: Disables all watch variables.
Enable All: Enables all watch variables.
Note: When performing browser-side debugging, only local and global variables in your source code can be watched; classes properties and fields are not supported.

bug_yellow32.png Breakpoints Inspector

The Breakpoints inspector displays a list of breakpoints that have been set in your application's source code.

When a breakpoint is set, a small red indicator is displayed in the gutter and the corresponding line of code is highlighted in red. At run-time, when your application encounters a breakpoint, the Code Editor will display the line of code containing the breakpoint.


breakpoint-panel.png
Breakpoints Inspector


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. 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 so that you will still be able to identify where the execution point is through the small arrow in the gutter section.

The inspector's contents are organized in a tabular format, containing the following columns:

Filename: The name of the resource containing the breakpoint.
Line: The line number of the breakpoint.
Condition: A logical condition under which the breakpoint will halt application execution. Setting this option has no effect.
Pass Count: The number of times the breakpoint has been encountered.Setting this option has no effect.

To add a breakpoint to a line of code, place the cursor on the line and: Click the gutter next to the line. Select the Debug | Add Breakpoint option from the Ribbon bar. Press [F5].

A popup menu is available when any area in the Breakpoint inspector is right-clicked. The popup menu choices include:

Enabled: Enables/disables the breakpoint.
Delete: Removes the breakpoint.
View Source: Places the cursor in the source code where the breakpoint is set.
Add Breakpoint: Displays the Breakpoint Properties dialog box.
Delete All: Removes all breakpoints.
Disable All: Disables all breakpoints.
Enable All: Enables all breakpoints.

bug_yellow32.png Call Stack Inspector

This inspector displays the nesting level of procedure and function calls during application execution. The Call Stack relies on a breakpoint being set since the information displayed in the Call Stack is dependent on a specific moment of time being encountered; a breakpoint is the means by which time is momentarily stopped and the state of the application can be examined. The Call Stack can also be examined when a run-time error occurs; inspecting the call stack at this point can be a very effective debugging method debugging.


bottom-dock-callstack.png
Call Stack Inspector


When viewing the contents of the Call Stack inspector, the topmost entry is the procedure or function where the breakpoint was encountered. If this procedure or function was called by one or more procedures or functions, they will be listed beneath the first entry in the reverse order in which they were called. For example, if Procedure1 (which was called by a JavaScript anonymous function) calls Procedure2, which in turn calls Function3, and a breakpoint is set in Function3, then the Call Stack inspector will contain the following upon encountering the breakpoint:

Function3
Procedure2
Procedure1
anonymous

When a breakpoint is not active, the Call Stack inspector will contain one entry stating “process not accessible.”

A popup menu is available when any area in the Call Stack inspector is right-clicked. The popup menu choices include:

Save: Saves the contents of the Call Stack inspector to a file.
Copy: Copies the contents of the Call Stack inspector to the Clipboard.
View Source: Displays the resource containing the breakpoint.

document_text32.png XML Inspector

The XML inspector enables you to view the XML packages that are traded between the server and browser sides of your application. The communication between server and browser is accomplished via SOAP (Simple Object Access Protocol), which is an XML-based messaging protocol. These XML packages are only created when WebMethods and Web Services are invoked.


bottom-dock-xml.png
XML Inspector


Also viewable in this inspector are the XML communications associated with SOAP calls issued by the server-side to an external publisher of Web Services. In addition, when communicating with external sources, you will see the full URL address in the HTML inspector.

Note: In order to enable XML inspection, you must place a check in the "Monitor SOAP XML Messages" check box in the Morfik Options / Trace dialog box.
trace-options-.png
Morfik Options Dialog


The inspector's contents are divided into left and right sections:

Left section

Displays a tree structure representing the entire content of the XML package. Individual branches may be expanded or collapsed as needed.

Right section

Displays the individual content of a selected branch.

A popup menu is available when any area in the XML inspector is right-clicked. The popup menu choices include:

Save: Saves the contents of the XML inspector to a file.
Copy: Copies the contents of the XML inspector to the Clipboard.
Clear: Clears the contents of the XML inspector.

document_text32.png JSON Inspector

The JSON inspector displays JSON data received and sent by the server. JSON has replaced XML as the internal data exchange format for Morfik between the browser client and the server. A discussion of JSON can be found here.

Left section

Displays the word JSON followed by the Web Method the call to the server was made through. Selecting one of the top level items on the left displays the corresponding messages in the right section. The tree can be expanded to reveal separate request and response data and the request and response tree items may also be clicked on to display the individual items included in the message.

Right section

Displays the corresponding data for the item in the left section tree view that has been selected. The display could be both the request and response JSON objects, the individual request and response objects or the individual items that constitute the request or response objects.

Right-clicking on any line reveals a popup menu with options to Save the highlighted JSON message to a text file, copy the message to the clipboard or clear all messages.

bottom-dock-JSON.png
JSON Inspector


document_text32.png SQL Inspector

The SQL inspector enables you to view the SQL statements that are submitted to the database server.


bottom-dock-sql.png
SQL Inspector


Note: In order to enable SQL inspection, you must place a check in the "Monitor SQL check box" in the Morfik Options / Trace dialog box, and also check one or more SQL Monitor Options.

The inspector's contents are organized in a tabular format, containing the following columns:

Event: The type of SQL event triggered.
Connection:
Transaction: The SQL transaction handle created by the database server.
Statement: The SQL statement handle created by the database server.
Error:
Time:
Info: The SQL-related operation, usually a SQL query.


A popup menu is available when any area in the XML inspector is right-clicked. The popup menu choices include:

Save: Saves the contents of the XML inspector to a file.
Copy: Copies the contents of the XML inspector to the Clipboard.
Clear: Clears the contents of the XML inspector.

Double-clicking a row in the grid loads the SQL trace document into the Code Editor; this document contains detailed information about the SQL event.

document_text32.png HTTP Inspector

The HTTP inspector enables you to view all the HTTP requests/responses received by the web server.


http-panel.png
HTTP Inspector


Note: In order to enable HTTP inspection, you must place a check in the "Monitor HTTP Request/Response" check box in the Morfik Options / Trace dialog box.


The inspector's contents are organized in a tabular format, containing the following columns:

HTTP Request: The basic HTTP GET/POST information.
Time: The time taken to process the request server-side, from the moment that the request arrives until it is processed and a response is prepared to be sent back.
Cache Control: The Cache-Control directive returned in the HTTP response.
Last Modified: The Date & time response file resource was last modified.
URL: The URL of the requested resource.
Parameters: The Full HTTP request.

A popup menu is available when any area in the HTTP inspector is right-clicked. The popup menu choices include:

Save: Saves the contents of the HTTP inspector to a file.
Copy: Copies the contents of the HTTP inspector to the Clipboard.
Clear: Clears the contents of the HTTP inspector.
View HTTP: Loads the HTTP trace document into the Code Editor.
View HTML Snippet: Displays the HTTP request locally.

Double-clicking a row in the grid loads the HTTP trace document into the Code Editor; this document contains detailed information about the HTTP event. This action is the same as the View HTTP popup menu choice above.

This document contains the information in the HTTP header for both the HTTP request and response. The HTTP header content is as defined by the Morfik framework (in the case of the response header) and as seen by the framework in the case of the request header. This is different to picking up this information across “the wire,” where an HTTP sniffer program may show additional or slightly different information.


How Do I: Use the Debugging Monitors?

This video covers the HTTP, XML and SQL debugging monitors available in Morfik Bottom Docking site. You will see these monitors in action and view contents of each monitor when an application is running.


The player will show in this paragraph

HTTP, XML and SQL Monitors Video

Related Topics

Back to top