[ALOY-1612] CLI: Be able to use Alloy source-maps in Safari Debugger / Chrome Dev-Tools

GitHub Issuen/a
Resolution Date2019-07-12T23:23:30.000+0000
Affected Version/sn/a
Fix Version/sCLI Release 7.1.0, Alloy 1.14.0
ReporterHans Knöchel
AssigneeChristopher Williams


Based on a recent discussion with [~cbowley]! Currently, when debugging Alloy in Safari / Chrome, the dev-experience is pretty bad, because the developer sees the generated spaghetti code instead of the actual Alloy code. But there is help! We generate proper [source-maps](https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/) already (look into build/map/*, but it seems like they are not actively used. In addition, it seems like they are indeed used during compile time - for compilation errors when using Babel, where they are doing a great job in indicating the actual line number and character of the error. If we could adapt source-maps to the Safari- and Chrome-debugger, we could enable a whole new debugging experience, e.g. by integrating it into our editor plugins and be able to create web-based debuggers like some others do. Thoughts welcome!


  1. Hans Knöchel 2018-03-27 In theory, all we need to do is adding the //# sourceMappingURL=path/to/source.map to the generated files and the debuggers will pick it up via their source map protocol. Read more [here](https://developers.google.com/web/updates/2013/06/sourceMappingURL-and-sourceURL-syntax-changed). [~fmiao], do you think this is a change possible in Alloy? I am just reading through the source where we are [copying the generated files](https://github.com/appcelerator/alloy/blob/master/Alloy/utils.js#L248-L301) and thought that we could eventually simply inject the source-map command during generation and be good to go. The benefit for the whole platform would be huge! *EDIT*: I hacked the comment into the generated files, but it seems like absolute paths may not work? [Here](https://abload.de/img/bildschirmfoto2018-04wpo0m.png) is a screenshot of the hack in its current state.
  2. Christopher Williams 2019-06-19 https://github.com/appcelerator/alloy/pull/893
  3. Satyam Sekhri 2019-06-21 [~cwilliams][~eharris] When debugging an Alloy project using the Safari/Chrome debugger on mac the original JS file from the alloy project is shown int he debugger. The breakpoints in those JS files works fine. However on a windows machine the debug of Alloy project in chrome debugger does not show the project JS files. Test Env: Mac OS 10.14.3, Win 10 Pro Ti SDK: 8.1.0.v20190619134801 Appc CLI: 7.1.0-master.22 Node: 10.13.0 Alloy: 1.14.0-1 JDK: 1.8.0_144 Xcode: 10.2.1
  4. Satyam Sekhri 2019-07-10
  5. Satyam Sekhri 2019-07-12 Verified on: Mac OS 10.14.3 Ti SDK: 8.1.0.v20190709083308 Appc CLI: 7.1.0-master.24 Node: 8.16.0 Alloy: 1.14.0-1 JDK: 1.8.0_144 Xcode: 10.2.1

JSON Source