[ALOY-1612] CLI: Be able to use Alloy source-maps in Safari Debugger / Chrome Dev-Tools
|Fix Version/s||CLI Release 7.1.0, Alloy 1.14.0|
DescriptionBased 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!
- Hans Knöchel 2018-03-27
In theory, all we need to do is adding the
//# sourceMappingURL=path/to/source.mapto 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.
- Christopher Williams 2019-06-19 https://github.com/appcelerator/alloy/pull/893
- 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
- Satyam Sekhri 2019-07-10
- 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