My PoC is a modified version of the MandelbrotJS demo of DWS. I used the websocket implementation of "Delphi on Rails" and for JSON handling I used "superobject". This made the PoC very easy to make!
Some screenshots of the PoC in action:
First, when it's started:
Next, after the "Compile and Run" button is pressed:
TChromium but the latest version of Google Chrome! I also added a "setInterval" so we can add breakpoints to executing JS code)
Now we can click the "Remote Connect" button to connect to the remote Chrome.exe instance via the remote debugging protocol. When this button is pressed, the debugger is activated and gets (async) a list of loaded script files (in our case only 1 html file). We click on the "Load debug script" button to load the latest script in our debugger:
The debugger is running (we can only "pause" now), and we can add a breakpoint by double clicking on a line, for example line 14:
Because of the "setInterval" this code is executed every second, so we get soon a real breakpoint! Because of my "/*@15*/" code added to the generate JS, the debugger can determine the original Delphi/Pascal source line (with extra offset of "<%pas2js"), which is highlighted and selected in SynEdit (see above).
Also the current stack and the "scope" (local variables) and the properties/values of the local variables are loaded and shown at the left side (note: double clicking on the stack of scope also works: source code position is updated, local variables etc). And hoovering above a variable shows the current value (and the JSON object is also shown for debug purpose).
The values of variables are updated, so it gets refreshed every time. The debugger really works!
And to show the stack and scope can be inspected too (double click on the item):
So go ahead, grab the code and play with it!