ember handlebars: find which addon is defining a helper (Not present in app/helpers)

Question

Having a hard time finding out where a helper not in app/helpers is defined. The helper was very generically named, I searched my package.json for the helper name but there was nothing. I was stuck hunting around with google to try and figure out what addon defined it.

Given some helper ( {{totally-generic-name param1="foo"}} ) how would one go about finding where it's defined?

(I happen to be on Ember 2.13)

(Note: the helper was contains defined in ember-composable-helpers , so it would have been a LITTLE helpful to search package.json for "helper" but that is a pretty tedious in-direct way of searching, which have may not even yielded the answer)

Answer 1

For me the easiest way is to run a development build of your application ( ember serve ), open development tools of your browser and open a file called <your-app-name>/helpers/<helper-name>.js . In the first line of the file, you see from where it is imported.

Let's assume your application name is foo and you have installed ember-array-helper . Run your application via ember serve and open it in Chrome. Go to development tools Source section. Search for helpers/array.js in subsection Network . You could search for a file per name via ctrl + p . If the helper is provided by an addon this file is autogenerated. It looks like the following:

define('foo/helpers/array', ['exports', 'ember-array-helper/helpers/array'], function (exports, _array) {
  'use strict';

  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  Object.defineProperty(exports, 'default', {
    enumerable: true,
    get: function () {
      return _array.default;
    }
  });
});

In first line your read the name of the import ember-array-helper/helpers/array from which you can guess on the addon name (first part). Note that you could also open the actual helper exported by addon via developer tools by opening /assets/addon-tree-output/ember-array-helper/helpers/array.js . Since the last part is coming from the import, you could easily use that one to search for the file. Now place your breakpoints and inspect this code as much as you like.

The same approach should work in all major browsers.