Ember.js Debugging 3 — JavaScript

Photo by Nathan Smith

I already covered the console object, which is built-in to the browser and is essential for debugging your Ember apps. Today I'll review features useful for debugging in JavaScript itself.

Ember.js Debugging 2 — Firebug

Firebug is a legendarily awesome Firefox add-on with just about everything a web developer could want. It has equivalents for almost all features in the built-in tools, and much more. Although it's separate from Mozilla, they support the project. The current version is 1.10.3, which is what I have. (For non-Firefox browsers, Firebug Lite is available. I haven't tried it yet.)

Firefox vs Firebug

So why would you use the built-in tools?

Ember.js Debugging 1 — Firefox

Note: Debugging was going to part 5 of the "Tools & Resources" series, but when I started outlining it and doing additional research, it became apparent that it's simply too big a topic for that. I've instead spun it out into a separate series.

This post is about the tools built-in to Firefox which are relevant to debugging Ember.js apps. I'll be using the latest version, which is 15 as of this post.

Mozilla Development Network

The MDN site is incredible — a wealth of information about everything a web developer could want to know about the browser platform:

However, the most important section (for us) isn't linked from here — or anywhere else on the site that I could find. I had to stumble across it a different way, but now I can save you the trouble:

Ember.js Tools & Resources 4 — jsFiddle

You've hopefully heard of Gist (gist.github.com), the service that lets you dump some code into a box, hit save, and get a URL that you can share with others — without even logging in. (It has more cool features, but I couldn't find docs or a tutorial to link to...)

Well, jsFiddle is like Gist on steroids. Not only can you dump code and get a shareable URL, you can execute the code, play with it, and save new versions as you go. You can even give them names and collect them under your user account (if you're logged in) for your future convenience and others' benefit. Lastly, others can easily fork your fiddle in order to modify and re-share it.

It's an essential tool for experimenting with client-side code (which is what we'll be using it for in this blog), as well as hosting client-side miniapps to share with others when reporting bugs or asking for help. There are three panes for your HTML, CSS, and JavaScript, and a fourth pane that shows the results of executing your code — essentially, a mini-browser.

Here's what it looks like:

Ember.js Tools & Resources 3 — Community

Many of these resources are less than a month old. This is not just because I left out the older stuff due to out-of-dateness, but also because there's been a lot of growth lately in the landscape around the Ember.js core. (Like this blog!)

Aggregators

Ember.js Weekly Wrapup bradleypriest.com

More like biweekly, but I'm not complaining. Fifteen posts since it's debut on May 7, each one summarizing what's new in Ember-land since the last. The highlight is the hand-picked list of repo commits and pull-requests with short explanations. How awesome is that? Go thank @bradleypriest.

Ember.js Dashboard code418.com/ember.js-dashboard/

A four-column screen of recent Ember-related items pulled from Twitter (emberjs search), the GitHub repo, StackOverflow's ember.js tag, and the emberjs Subreddit. It's a buffet of real-time Ember.js activity (other than the Subreddit, which is stagnating). Implemented in Ember, you can find the source on GitHub. Go thank @pangratz.

Ember.js Tools & Resources 2 — Official Docs & Starter Kit

Documentation

Official docs (all on the website) include the API docs, the giant "documentation" page, and the guides. They are all inconsistent and out-of-date to varying degrees due to the rapidly-changing nature of the project. This will likely be addressed as part of the upcoming 1.0 release.

API Docs

http://emberjs.com/api/

The API docs currently featured on the website in the navbar are the "edge" docs, generated from the master branch of the repository.  As of this post, they were last generated 2012-09-13.

http://docs.emberjs.com/

These are the API docs generated from the latest "stable" release, 1.0-pre.

The docs are automatically generated from the inline documentation in the actual library files using YUIdoc. You can learn more about that by checking out the source for the Ember website.

Ember.js Tools & Resources 1 — Official Libraries

Dependencies

jQuery

A JavaScript utility library so useful and important that most of the major websites in the world now include it, and most major JavaScript projects build on top of it.  If you're not already familiar with it, take an hour or two right now to fix that.  I'm no fan of Microsoft, but the best videos for newcomers to jQuery I've seen are chapters 14-17 of this series. Go watch them.

Website: http://jquery.com/
GitHub: https://github.com/jquery/jquery
Downloads:

• jquery.min.js (v1.7.2, Google CDN-hosted)
• jquery.min.js (v1.8.2, Google CDN-hosted)

Ember is not yet compatible with jQuery 1.8.

Update: I was wrong! The core team have been using jQuery 1.8 on master without problems. Thanks to Luke Melia for answering my comment, and Ember Noob reader Sylvain Mina for catching the error.

The Framework

The three pieces of the framework are Ember, Ember-Data, and Handlebars.