Debugging

As explained in the previous paragraph, when compiling in the Delphi IDE in debug mode, the extra file project1.js.map is generated to offer the capability to debug the application directly from Delphi code in the browser. This capability is supported in both the Chrome and Firefox browser.

To start the debugger, press F12 from the browser and go to the Sources tab. On the source window, press shortcut Ctrl-P and you get to see the file list of all files involved in the project.

From the file list, pick unit1.pas:

After picking this file unit1.pas, you can add breakpoints by clicking in the line number gutter:

Now, adding a value in the TWebEdit control and pressing the TWebButton triggers the breakpoint:

and as you can see in the browser debugger, you can step Delphi line by Delphi line through the code and see the values of Delphi variables directly in the browser debugger:

This shows how easy and comfortable it is to debug TMS WEB Core application using the Delphi language directly from the browser.

To make it even more convenient to debug your TMS WEB Core applications in the browser, when you compile your application in Debug mode and you have added a breakpoint in the Delphi IDE, this is automatically converted to a debugger breakpoint in the browser.

For example, set the breakpoint in the Delphi IDE:

and run the web application in the browser results in:

So, the browser debugger is automatically forced to stop just before the line where the breakpoint was set in the IDE. This saves you from locating the code in the browser console and set any breakpoints again from there.

An alternative to setting breakpoints via the IDE, is to set a breakpoint by inserting the identifier {BP} in the code. For every line in the Pascal code that contains {BP}, a JavaScript code line “debugger” will be inserted.