Search code examples
ember.jsember-app-kitember-cli

Ember appkit - debugging


We are currently using requirejs/backbone for development and firebug for debugging. We are thinking of moving to Ember and using ember appkit.

I noticed that because of the new ES6 javascript modules, the application needs to be pre-compiled into a single javascript file app.js.

I am concerned that this will make it difficult to debug problems because you are dealing with a massive single file instead of small ones that we have at the moment and can easily find in firebug.

Has this been an issue for people, are there any good solutions?


Solution

  • As kingpin2k mentions, Ember App Kit has been effectively superseded by Ember-CLI. I would recommend looking into that. Depending on your needs and planning, Ember-CLI may or may not be suitable for your situation. Some people have successfully put Ember-CLI apps in production, but this is brand new technology, so caveat emptor.

    Ember-CLI provides a build system based on Broccoli that will transpile ES6-modules, compact the output into a single Javascript file, and lots more. Ember-CLI is still under heavy development, but is already shaping up quite nicely. In my opinion, the clean code organization and fast Broccoli build are really quite awesome.

    Modern browsers such as Firefox and Chrome come with an integrated debugger that will show you the original source when source maps are supplied. This will eventually be provided to the browser in Ember-CLI projects as well when you run the development server. However, this functionality is currently incomplete. It is possible to get some source map support in Ember-CLI now, have a look at this issue.

    In the mean time, there are more ways to debug code of course, and I suspect that before proper source map support lands in Ember-CLI/Broccoli, liberal use of console logging and such may be sufficient. Running Ember-CLI's live-reload development server means that when you change and save a file in your project, the results will be shown almost instantaneously in the browser; the Broccoli build is blazing fast.

    Keep in mind that minifying and combining all Javascript code into a single output file is a common approach in single page application frameworks such as Ember, Angular, and Backbone. Debugging these applications with breakpoints and such will happen more and more through the browser's debug tools in combination with source maps.

    Update

    By now the Ember core team actively recommends Ember-CLI. It is quite awesome.