{"id":181,"date":"2016-11-17T22:55:14","date_gmt":"2016-11-17T22:55:14","guid":{"rendered":"http:\/\/www.onux.com\/jspp\/blog\/?p=181"},"modified":"2016-11-17T22:55:14","modified_gmt":"2016-11-17T22:55:14","slug":"js-0422-debugging-with-source-maps","status":"publish","type":"post","link":"https:\/\/www.onux.com\/jspp\/blog\/js-0422-debugging-with-source-maps\/","title":{"rendered":"JS++ 0.4.2.2: Debugging with Source Maps"},"content":{"rendered":"<p>JS++ 0.4.2.2 is being released today with support for in-browser debugging via <a href=\"https:\/\/docs.google.com\/document\/d\/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k\/edit?hl=en_US&#038;pli=1&#038;pli=1\" target=\"_blank\">source maps<\/a>. Source maps allow you to debug your JS++ programs from a web browser of your choice that supports source maps debugging: Google Chrome, Mozilla Firefox, Microsoft Edge (untested), etc. With source maps, you can set breakpoints, log messages, and more with all locations pointing back to the original source JS++ file&mdash;rather than the generated <code>.jspp.js<\/code> file.<\/p>\n<p>At the time of this writing, the recommended web browser to use for source maps debugging is Google Chrome.<\/p>\n<p>In order to leverage source maps, compile your JS++ files with the <code>--debug<\/code> (or <code>-d<\/code>) flag:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.onux.com\/jspp\/blog\/wp-content\/uploads\/2016\/11\/source-maps-compiler.png\" alt=\"Compiling source maps with JS++\" width=\"420\" height=\"95\" class=\"alignnone size-full wp-image-182\" \/><\/p>\n<p>This will generate a <code>.map<\/code> file, which maps the generated code back to the original JS++ source code.<\/p>\n<p>When you run the generated code in your web browser, you will notice that <code>console.log<\/code> statements point to the original source <code>.jspp<\/code> file&#8217;s location rather than the locations of the generated code:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.onux.com\/jspp\/blog\/wp-content\/uploads\/2016\/11\/source-maps-1.png\" alt=\"Source Maps - console.log Original Location\" width=\"399\" height=\"170\" class=\"alignnone size-full wp-image-184\" \/><\/p>\n<p>In addition, you can set breakpoints, step into, step over, step out and use all the features you&#8217;d expect from your debugger:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.onux.com\/jspp\/blog\/wp-content\/uploads\/2016\/11\/source-maps-2.png\" alt=\"Source Maps - Set Breakpoint\" width=\"689\" height=\"266\" class=\"alignnone size-full wp-image-186\" \/><\/p>\n<p>Finally, we have worked to improve Microsoft Windows integration even more. In JS++ 0.4.2, we gave you Windows context menu integration. However, due to restrictions in Windows, this only allowed compilation of one file. JS++ is a multi-file, modular programming language. Thus, we needed users to be able to select multiple files and compile them. You can now do this in the latest version of JS++:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.onux.com\/jspp\/blog\/wp-content\/uploads\/2016\/11\/jspp-windows-multifile.png\" alt=\"jspp-windows-multifile\" width=\"584\" height=\"129\" class=\"alignnone size-full wp-image-188\" \/><\/p>\n<p>Another problem with Windows integration was that the JS++ CLI compiler would pop up and immediately exit. If you had an error, there was no way to know what to fix. With the latest version of JS++, you will now receive a popup dialog notifying you of the compilation results:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.onux.com\/jspp\/blog\/wp-content\/uploads\/2016\/11\/jspp-windows-multifile2.png\" alt=\"jspp-windows-multifile2\" width=\"479\" height=\"174\" class=\"alignnone size-full wp-image-190\" \/><\/p>\n<p>Get the latest download of JS++ by navigating to <a href=\"https:\/\/www.onux.com\/jspp\/\" target=\"_blank\">our home page<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>JS++ 0.4.2.2 is being released today with support for in-browser debugging via source maps. Source maps allow you to debug your JS++ programs from a web browser of your choice that supports source maps debugging: Google Chrome, Mozilla Firefox, Microsoft Edge (untested), etc. With source maps, you can set breakpoints, log messages, and more with &hellip; <a href=\"https:\/\/www.onux.com\/jspp\/blog\/js-0422-debugging-with-source-maps\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;JS++ 0.4.2.2: Debugging with Source Maps&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2,4],"tags":[],"_links":{"self":[{"href":"https:\/\/www.onux.com\/jspp\/blog\/wp-json\/wp\/v2\/posts\/181"}],"collection":[{"href":"https:\/\/www.onux.com\/jspp\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.onux.com\/jspp\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.onux.com\/jspp\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.onux.com\/jspp\/blog\/wp-json\/wp\/v2\/comments?post=181"}],"version-history":[{"count":6,"href":"https:\/\/www.onux.com\/jspp\/blog\/wp-json\/wp\/v2\/posts\/181\/revisions"}],"predecessor-version":[{"id":192,"href":"https:\/\/www.onux.com\/jspp\/blog\/wp-json\/wp\/v2\/posts\/181\/revisions\/192"}],"wp:attachment":[{"href":"https:\/\/www.onux.com\/jspp\/blog\/wp-json\/wp\/v2\/media?parent=181"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.onux.com\/jspp\/blog\/wp-json\/wp\/v2\/categories?post=181"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.onux.com\/jspp\/blog\/wp-json\/wp\/v2\/tags?post=181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}