How to use ember-inspector - 10 common examples

import { Promise } from 'rsvp';
import TabRoute from "ember-inspector/routes/tab";

export default TabRoute.extend({
  model() {
    // block rendering until first batch arrives
    // Helps prevent flashing of "please refresh the page"
    return new Promise(resolve => {
      this.get('assembler').one('firstMessageReceived', () => {
        resolve(this.get('assembler.topSort'));
      });
      this.get('assembler').start();
    });
  },

  setupController() {
    this._super(...arguments);
    this.get('port').on('promise:instrumentWithStack', this, this.setInstrumentWithStack);
    this.get('port').send('promise:getInstrumentWithStack');
  },

return this.model.filter(item => {
      // check filters
      if (filter && !get(item, `filterValues.${filter}`)) {
        return false;
      }

      // check search
      if (!isEmpty(search)) {
        let searchString = this.recordToString(item);
        return !!searchString.match(new RegExp(`.*${escapeRegExp(search.toLowerCase())}.*`));
      }
      return true;
    });
  }),

}
  }),

  /**
   * Indicate the table's header's height in pixels.
   *
   * @property headerHeight
   * @type {Number}
   */
  headerHeight: computed('isWarningClosed', function() {
    return this.isWarningClosed ? 31 : 56;
  }),

  // bound to the input field, updates the `search` property
  // 300ms after changing
  searchValue: debounceComputed('search', 300),

  // model filtered based on this value
  search: '',

  escapedSearch: computed('search', function() {
    return escapeRegExp(this.search.toLowerCase());
  }),

  filtered: computed('model.@each.name', 'search', function() {
    if (isEmpty(this.escapedSearch)) {
      return this.model;
    }

    return this.model.filter((item) => {
      const regExp = new RegExp(this.escapedSearch);
      return recursiveMatch(item, regExp);

clearInvalidCache() {
    let saved = this.storage.getItem(this.getStorageKey());
    if (saved && saved.columnVisibility) {
      let savedIds = keys(saved.columnVisibility).sort();
      let schemaIds = this.columnSchema.mapBy('id').sort();
      if (!compareArrays(savedIds, schemaIds)) {
        // Clear saved items
        this.storage.removeItem(this.getStorageKey());
      }
    }
  }

import { action, computed } from '@ember/object';
import Controller from '@ember/controller';
import debounceComputed from 'ember-inspector/computed/debounce';
import searchMatch from 'ember-inspector/utils/search-match';

export default Controller.extend({
  init() {
    this._super(...arguments);
    this.deprecations = [];
  },

  search: null,
  searchValue: debounceComputed('search', 300),
  toggleDeprecationWorkflow: false,

  filtered: computed('deprecations.@each.message', 'search', function() {
    return this.deprecations.filter(item => searchMatch(item.message, this.search));
  }),

  openResource: action(function(item) {
    this.adapter.openResource(item.fullSource, item.line);
  }),

  traceSource: action(function(deprecation, source) {
    this.port.send('deprecation:sendStackTraces', {
      deprecation: {
        message: deprecation.message,
        sources: [source]
      }

import { set } from '@ember/object';
import TabRoute from "ember-inspector/routes/tab";

export default TabRoute.extend({
  setupController(controller, model) {
    this._super(controller, model);

    const type = this.modelFor('model_type');

    controller.set('modelType', type);

    this.get('port').on('data:recordsAdded', this, this.addRecords);
    this.get('port').on('data:recordsUpdated', this, this.updateRecords);
    this.get('port').on('data:recordsRemoved', this, this.removeRecords);
    this.get('port').one('data:filters', this, function(message) {
      this.set('controller.filters', message.filters);
    });
    this.get('port').send('data:getFilters');
    this.get('port').send('data:getRecords', { objectId: type.objectId });
  },

import { Promise } from 'rsvp';
import { get } from '@ember/object';
import TabRoute from "ember-inspector/routes/tab";

export default TabRoute.extend({
  setupController(controller) {
    controller.setProperties({
      search: '',
      searchVal: ''
    });
    this._super(...arguments);
  },
  model(params) {
    const type = params.type_id;
    const port = this.get('port');
    return new Promise((resolve, reject) => {
      port.one('container:instances', message => {
        if (message.status === 200) {
          resolve(message.instances);
        } else {
          reject(message);

import { assign } from '@ember/polyfills';
import TabRoute from "ember-inspector/routes/tab";

export default TabRoute.extend({
  model() {
    return [];
  },

  setupController() {
    this._super(...arguments);
    this.get('port').on('view:viewTree', this, this.setViewTree);
    this.get('port').on('view:stopInspecting', this, this.stopInspecting);
    this.get('port').on('view:startInspecting', this, this.startInspecting);
    this.get('port').on('view:inspectDOMElement', this, this.inspectDOMElement);

    this.set('controller.viewTreeLoaded', false);
    this.get('port').send('view:setOptions', { options: this.get('controller.options') });
    this.get('port').send('view:getTree');
  },

import { Promise } from 'rsvp';
import TabRoute from "ember-inspector/routes/tab";
import { oneWay } from '@ember/object/computed';

export default TabRoute.extend({
  version: oneWay('config.VERSION').readOnly(),

  model() {
    const version = this.get('version');
    const port = this.get('port');
    return new Promise(resolve => {
      port.one('general:libraries', message => {
        message.libraries.insertAt(0, {
          name: 'Ember Inspector',
          version
        });
        resolve(message.libraries);
      });
      port.send('general:getLibraries');
    });
  }

import { Promise } from 'rsvp';
import { setProperties } from '@ember/object';
import TabRoute from 'ember-inspector/routes/tab';

export default TabRoute.extend({
  model() {
    return new Promise(resolve => {
      this.port.one('deprecation:deprecationsAdded', resolve);
      this.port.send('deprecation:watch');
    });
  },

  setupController(controller, message) {
    this._super(...arguments);
    this.deprecationsAdded(message);
  },

  activate() {
    this._super(...arguments);
    this.port.on('deprecation:deprecationsAdded', this, this.deprecationsAdded);
  },