Source Maps

In about 300 lines, I’ve created a standalone basic JavaScript source map utility for EWB. At the current time it is more of a proof of concept more than a practical tool, but I think Tim could integrate it into his compiler with little work.

There is one function copied from FreePascal’s pas2js utility. One would have to check pas2js’s license agreement to determine if that code can be used verbatim in a commercial product.

I’ve only tested successfully with Chrome. Firefox currently has trouble with the 16 bit encoding of EWB source files (standard file format with BOM encoding). But having “one” good debugger should be a reasonable start.

How it detects line numbers:

I placed lines in various WBC (EWB pascal) files with the function call

mappit(‘unit2file.wbs:80’)

on the 80th line of unit2file.wbs, etc.

I placed 5 of these in two separate files to prove that multiple files could be supported.

The Delphi program I wrote: generatesourcemap.exe scans through the resulting compiled javascript and generates a source map. Just supply a complete path to the javascript generated by EWB.

It also adds a first line to the course code, pointing to the map file. Since the JavaScript file is edited, EWB has to be tricked by updating the file in the cache if you intend to use the IDE to be your web server. Or if you use Apache or similar, you just need to have the map and other source files copied as in my example.

You must create a subdirectory below the output called “source”. to copy the required *.wbs files.

Resulting map file: The resulting map file points to the javascript source code and the EWB source files, and breakpoints for each line of source discovered above.

To debug: Open Chrome, enter Developer debug mode. Then load the EWB HTML file. You will find the “source” directory in your list of files in Chrome’s debugger, open it, then you can open the source files, and can place breakpoints on any line with a mappit.

source code