Greetings All,

This blog will give you a bit ease in ember debugging. After reading this you will find yourself in a position where you will able to see your whole ember application source code from browser. As we all know, EmberJS is a JavaScript framework and gives us ability to design some ambitious App.

First let’s see what we are going to resolve:

    • Create a new basic ember application, if you not aware with how to create new Ember App then please follow this link Quick Start Ember.
    • If you are done with first step then open http://localhost:4200/on your favorite browser and press ctrl + u to see the whole source code of your App. It will look like below screen shot.
    • Now go to your project folder and open app/application.hbs file and try to edit same. Here, I am going to add a simple heading :

<h1> This is my heading </h1>

  • Again. come to the browser and refresh your URL then open source code by pressing ctrl + u. Oops, what happed? It is still showing same source code event if you have added a new heading in your code and able to see that heading in view page as well but where is the source code for that heading? Little interesting, is it not?

Now, we will see, how we are going to resolve:
Don’t be afraid, it is very ease to do and very simple as well. Thanks to ember as they are now providing a tool to do same. we just need to install them. The tool name is Ember Fast Boot.

Let first see, what is this tool and how it will resolve the issue? After that we will see the configuration of this tool in our code.

Ember Fast Boot is a tool which gives an enhancement in our ember application to render our app in browser by interpreting from server. Here serve name is node. Without ember fast boot, our ember app was rendering only from client side and all the Java Script code was minifying and included in one of the script tag. Those minified file also includes our HTML code for heading which we have done in our .hbs file because ember bind hbs file in Java Script code.

Let’s try to do it:

  • Open the terminal, go to you project directory where your package.json file is lying.
  • Run this command in your project directory:
 ember install ember-cli-fastboot 
  • Start your server by just typing ember serve and now open your browser with same URL i.e. http://localhost:4200/ and press ctrl + u to open source code. Now you will able to see the source code of your heading. This will look like below screen shot.

It’s time to be happy, you have done it. Now, you are able to see the source code of heading and this will make your debugging life more easy with ember.

Please stop, we are not ending here, suppose you again want to go in your previous mode then what to do?

No worries, again very simple.

Just need to hit your browser with:

 http://localhost:4200/?fastboot=false 

Above flag will disable your Ember Fast Boot tool and you will found your app in same mode as it was earlier.

Thanks for reading.

Further, you can post your views in comments box it will help me to make my future blogs a bit better. And of course, if you are facing any issue with these steps let me know. It will always make me happy to help you.

Hope to see you soon, until then Happy Learning…………..