flex-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Frédéric THOMAS <webdoubl...@hotmail.com>
Subject RE: [ASJS] debugging output JS?
Date Tue, 29 Jan 2013 17:00:31 GMT
Big yes, that's impressive :)


-----Original Message-----
From: Frank Wienberg [mailto:frank@jangaroo.net] 
Sent: Tuesday, January 29, 2013 5:04 PM
To: dev@flex.apache.org
Subject: Re: [ASJS] debugging output JS?

To give an impression of how you could switch between different debug levels
and also to see how the "AMD" approach compares to the "goog"
approach, I re-compiled Erik's "VanillaSDK" demo with Jangaroo 3 to
AMD-style JavaScript output. This is the output format Mike Schmalle will be
implementing as an alternative emitter for FalconJx. (Sorry I had to use
Jangaroo to build this demo now; Mike is working hard on the FalconJx AMD
emitter and eventually, the result will be much better than Jangaroo, since
Falcon is the better AS3 compiler.)

Here is the result:

In total, there are four variants.
The first and last version correspond to Erik's "intermediate JS" and
"release JS" versions.
To show the full bandwidth of debug levels, I added "linked" and "linked and
minified ... (bootstrapped)". The former is a build where all AMD modules
are merged into a single file, but not minified. The latter is a build where
all AMD modules are merged and minified, but this one file is still loaded
via RequireJS. So if you really want only one big JS file loaded with one
request, you have to use the "release JS" version.

The resulting release version (9.5 kb) is quite similar in size to the
"goog" version (11.5 kb), although it has only been minified with
I think this underpins my point that starting from standard JavaScript code
respecting rules like "avoid accessing global variables", you can do without
Google Closure Compiler's ADVANCED_OPTIMIZATIONS. But of course, we need a
larger example before I'd dare to generalize this conclusion.

All three "debuggable" versions actually load the same HTML page
"debug.html", the difference is coded into the URL hash "joo.debug" and
evaluated by the bootstrap script "new.js":

   - #joo.debug=true or #joo.debug -- load each class by a single request,
   so that you can easily find them in any (good) JavaScript debugger. Each
   file contains full white-space, comments, and non-minified JavaScript
   - #joo.debug=linked -- load all classes by one single request, but still
   with full white-space, comments, and non-minified.
   - #joo.debug=false or no hash -- load all classes by one single request,

All corresponding artifacts are automatically created as part of the build
process. Of course, you can choose to only build the ones you actually need.

*Source Maps*

For the #joo.debug=true
Jangaroo's experimental JavaScript source map support has been used. As far
as I know, the only browser that currently supports source maps is Chrome.
So if you want to see it in action, please use Chrome. And you might have to
enable it first:

   1. In the developer tools (F12), click on the button with the gear icon
   on the bottom right
   2. In the settings dialog that appears, set the check mark in section
   *Sources*, labelled "Enable source maps"
   3. Reload the page

Now, in the "Sources" tab, when you open the "navigator" (arrow button top
left), you'll find an *.as file next to each *.js file that has been
generated from AS.
Try and set a breakpoint e.g. in Example.as, line 66, inside the first click
handler method. Then click on the demo button labelled "Click me".
The debugger should stop at your breakpoint and show the corresponding Call
Stack, Scope Variables, and so on. You can now step through your
ActionScript code, and the corresponding JavaScript code gets executed.
Magic, isn't it? And it can be done for FalconJx, too!

The vision is to combine the minified or at least the linked version with
source maps, so that actually only one JS file is loaded, but is appears in
the debugger as many AS files. To achieve this, we will have to combine the
source map generated by our compiler and the source map generated by the JS
minifier into a direct mapping. Using the source maps API that GCC provides,
this should be quite straight-forward.

Have fun!

View raw message