After months of intensive research and development and after we released the beta a couple of weeks ago, we are thrilled to introduce the official release of TMS WEB Core v2.3. This release comes packed with a remarkable new feature: debugging web applications directly from the Delphi IDE.

While so far debugging was offered from the browser console and fortunately based on the Object Pascal language due to the source map files generated by the pas2js compiler, now Delphi developers can stick to the familiar Delphi IDE and use debugging directly out of the IDE of the web application running in the browser.

Despite the considerable technical challenges, our team of experts, led by José Leon Serna and Roman Kassebaum, set out to offer a seamless debugging experience for TMS WEB Core web apps directly from the Delphi IDE. We took advantage of the Chrome browser engine DevTools Protocol, allowing for debugging to be taken over by an external application. This technical feat is achieved through a WebSocket server that facilitates communication between the browser and the TMS WEB Core Delphi IDE plugin. In the spirit of "eating our own dog food," we implemented this WebSocket server using TMS FNC WebSocket. Additionally, we harnessed IDE extension APIs and introduced custom code hooks to seamlessly integrate this custom debugging interface into the Delphi IDE.

At this time, the DevTools Protocol is compatible with Google Chrome and Microsoft Edge Chromium browsers. Therefore, debugging from the Delphi IDE is operational only when you choose to run the app in either Google Chrome or Microsoft Edge Chromium. While support for the FireFox browser is under consideration due to its incomplete DevTools Protocol implementation, it's worth noting that debugging using Object Pascal code from the browser console remains available for all browsers that TMS WEB Core supports.

From within the Delphi IDE, you have the flexibility to globally define your debugging preference – either from the Delphi IDE or the browser console. Access this setting via Tools > Options > TMS WEB > "Enable Debugging inside IDE". Alternatively, you can set this preference at the project level through Project Options > TMS WEB > "Enable Debugging inside IDE".

When debugging from the Delphi IDE is enabled, you can set breakpoints in the Delphi code editor. The IDE will automatically pause the app at these breakpoints, allowing you to utilize shortcuts like F7, F8, and F4 to step in, step over, or step through lines of code. Hovering over variables will display their values in a tooltip, and you can also inspect values via Debug > Evaluate/Modify. However, please be aware that if you wish to inspect objects or object properties, the expression provided must be in JavaScript, as the browser exclusively understands JavaScript expressions. Currently, transpiling Object Pascal expressions to JavaScript on-the-fly is a complex task and is not supported. Thankfully, JavaScript expressions for variables closely correspond to Object Pascal expressions, making inspection feasible with some adjustment.

There is a subtle difference when debugging from the Delphi IDE: a new browser instance is launched for each session, and when you terminate the debugging session from the IDE, the IDE will also close the associated browser instance. This behavior is due to the unique WebSocket communication channel established between the IDE and the browser instance used for debugging. However, this does not prevent you from manually opening the browser console for the browser associated with the debugging session to inspect the DOM, code, network activity, and more.

To experience this exciting feature firsthand, we invite you to watch our video showcasing how to debug a TMS WEB Core web app running in the browser directly from the Delphi IDE.

We are delighted to make the v2.3 release available to all active TMS WEB Core subscribers. We love to hear your feedback about this new debug feature! And meanwhile, our team is already taking on new challenges to further enhance the TMS WEB Core experience. Watch out this space for further announcement coming later this year!