Ricodigo's blog

We write delicious code.

Simple Bookmarklet to Debug Your Rails Assets and Sprockets Apps

Rails assets pipeline is a really conveniant way to manage your assets. However, the problem is that it doesn’t make it easy to debug your Javascript as it packs all files together. You can get errors such as “error at line 4225” and that doesn’t help much. The workaround is to pass the debug option to your javascript include tag so that your js files aren’t packed together:

<%= javascript_include_tag "application", 
    :debug => Rails.env.development? %> 

However, if like me you include many js files in your rails app, your app will take ages to load in your browser so you may not always want to load all your js files one by one in dev mode especially when you’re not trying to debug your js code. So a quick hack is to add a check for a param such as ‘jsdebug’ in your include tag such as:

<%= javascript_include_tag "application", 
    :debug => Rails.env.development? && params[:jsdebug]  %> 

So now you just need to add ?jsdebug to your location and hit refresh.

In fact, you can get rid of the development check so that you can debug your js even in prod, just make sure to make the param name longer and not easily guessable.

Finally, if you don’t want to type the params manually everytime you want to debug your app’s js, just drag and drop this bookmarlet: js debug.