BlogAll Blog Posts | Next Post | Previous Post
Tuesday, September 12, 2023
After months and months of research & development, we're eager to share with you the first beta of TMS WEB Core v2.3 that features debugging web apps from the Delphi IDE.
Since its inception, TMS WEB Core offered a debugging experience via the browser console. Thanks to a generated source map file, it is fortunately already possible to step through Object Pascal code and inspect Object Pascal variables from the browser, it is still a two step process to develop from the Delphi IDE and debug from the browser console.
Even though technically extremely challenging, our team of experts José Leon Serna & Roman Kassebaum set their goal on offering a debugging experience for TMS WEB Core web apps directly out of the Delphi IDE. Fortunately, the Chrome browser engine features the DevTools Protocol with which it is possible to take over debugging from an external application, in this case the Delphi IDE. Technically this works via a WebSocket server with which the browser communicates in this case to the TMS WEB Core Delphi IDE plugin. Keeping the "eat your own dogfood" mantra in mind, this WebSocket server was implemented using TMS FNC WebSocket. On the other side, we could fortunately also find sufficient IDE extension APIs as well as a few places where we needed to hook code, to add this custom debugging interface to the Delphi IDE.
At this moment, the DevTools Protocol is available with Google Chrome browser and Microsoft Edge Chromium browser. So only if you instruct TMS WEB Core to run the app in either Google Chrome or Microsoft Edge Chromium, the debugging from the Delphi IDE will be working. The FireFox browser does noy fully implement the DevTools Protocol, so it remains under research if we will technically also be able to bring this debugging experience for FireFox. Of course, it still remains possible to debug using Object Pascal code from the browser console in all browsers TMS WEB Core can target.
Configuration and limitations
From the Delphi IDE, you can globally define whether you want debugging from the Delphi IDE or debugging from the browser console. This setting is under Tools, Options, TMS WEB, "Debugging IDE / Browser". But you can also define this at project level under Project Options, TMS WEB, "Debugging IDE / Browser".
Another subtle difference when you debug from the Delphi IDE is that the Delphi IDE starts a new browser instance for every session and also, when you terminate the debugging session from the IDE, the IDE will close this browser instance. This is because there is a unique websocket communication channel between the IDE and the browser instance used for debugging. Nothing prevents you to still open the browser console for the browser where the debugging session is running and inspect the DOM, code, networking tab etc...
See it for yourself
Check our first video showing how you can debug a TMS WEB Core web app running in the browser from the Delphi IDE:
Get started with the beta
We have made the v2.3 beta available now for all active TMS ALL-ACCESS users. Login on our website under Account / My Products and download and install this beta. Our team is very interested to hear about your experiences and closely work together in case some glitches might be found in this beta or to listen for your further ideas to improve the experience with TMS WEB Core. As always, you can follow-up in the Support Center or via direct email.
This blog post has received 11 comments.
All Blog Posts | Next Post | Previous Post