Ember-inspector: Data tab not working

[Riddlez]

When in my ember project I am trying to select the data tab in the ember inspector but it not showing the data tab basically it does nothing

[teddyzeenny]

Hi, what are the Ember and Ember Data versions? Do you see any errors in the console after clicking the Data tab?

[Riddlez]

HI
I have no errors in my console
and am using the below versions in package json:
"broccoli-asset-rev": "^2.4.5",
"ember-ajax": "^3.0.0",
"ember-cli": "~2.16.2",
"ember-cli-app-version": "^3.0.0",
"ember-cli-babel": "^6.6.0",
"ember-cli-dependency-checker": "^2.0.0",
"ember-cli-eslint": "^4.0.0",
"ember-cli-htmlbars": "^2.0.1",
"ember-cli-htmlbars-inline-precompile": "^1.0.0",
"ember-cli-inject-live-reload": "^1.4.1",
"ember-cli-mirage": "^0.4.0",
"ember-cli-qunit": "^4.0.0",
"ember-cli-sass": "^7.0.0",
"ember-cli-shims": "^1.1.0",
"ember-cli-sri": "^2.1.0",
"ember-cli-uglify": "^2.0.0",
"ember-data": "~2.16.2",
"ember-export-application-global": "^2.0.0",
"ember-load-initializers": "^1.0.0",
"ember-resolver": "^4.0.0",
"ember-simple-auth": "^1.4.0",
"ember-simple-auth-token": "^2.1.0",
"ember-source": "~2.16.0",
"ember-toastr": "^1.7.0",
"ember-truth-helpers": "^2.0.0",
"ember-welcome-page": "^3.0.0",
"loader.js": "^4.2.3",
"toastr": "^2.1.2"

[teddyzeenny]

Can you point me to an online repo or app that I can access that reproduces this issue?

[lifeart]

@teddyzeenny linkedin ember-inspector data tab freezing

[vvscode]

@lifeart it works for me http://take.ms/2gCit4

[Benjy1979]

I had the same issue, it's when the Web Inspector crashes. For instance in this case since upgrading to 3.0 (or rather creating a new project and copying my stuff over) I had to change a model from:

import Model from 'ember-data/model';
// import attr from 'ember-data/attr';
// import { belongsTo, hasMany } from 'ember-data/relationships';

export default Model.extend({
  user_id: DS.attr('number'),
  created: DS.attr(),
  caption: DS.attr(),
  plandata: DS.attr()
});

to

import DS from 'ember-data';
// import attr from 'ember-data/attr';
// import { belongsTo, hasMany } from 'ember-data/relationships';

export default DS.Model.extend({
  user_id: DS.attr('number'),
  created: DS.attr(),
  caption: DS.attr(),
  plandata: DS.attr()
});

The web inspector crashed on the previous version saying that DS didn't exist, and the data tab stopped being clickable. It could have been an old model that I had defined myself awhile back which is no longer working. Or maybe old CLI behaviour, I can't recall, but this fixed it for me.

[teddyzeenny]

@Benjy1979 in the first example you're using DS without importing it, that's probably why it's crashing.

[Benjy1979]

Yes I agree it's a bug, but it wasn't crashing in the previous version of Ember.js. It was probably just circumstantial, or some internal changes in Ember.js have rearranged things so that it became invisible. Just speculating. The main point is that the Web Inspector crashed after Ember.js 3.0 but wasn't previously so that causes the data tab to become unclickable..

[locks]

Yes I agree it's a bug, but it wasn't crashing in the previous version of Ember.js.

Because up until 3.x, DS and Ember were available as globals.

[GottZ]

i +1 this issue. at least i can still navigate through models using the Routes tab but still.. kinda painful and rendering the feature i use the most kinda useless.

does anyone know if it would work with 3.x?
i'd have to upgrade then.

[rwwagner90]

@GottZ are you using DS without importing it?

[GottZ]

nevermind. skip to edit2

nope. import DS from 'ember-data everywhere. i just checked.
well.. i do inject a overridden store into the app and made a few overrides in my application adapter since our api is crap af and does not follow the jsonapi spec correctly. but besides that, nothing.

the only problems being printed are several unexpected console statements i'll get rid of in future anyways and that's it.

i'm currently on 2.18.1
i was on 2.15.1 when it worked fine.

edit1:

oh.. i just noticed something.. i seem to have disabled the "warning" log level. ember-inspector is trying to access some stuff it should not try to access. pretty weird.

nevermind then. will attempt to fix that. it's actually obvious to me why this failed. nothing except ember-inspector tries to access all available models.

edit2:

fixed i'd say.

such successful rubber ducky debugging.

and yes, i'm dynamically generating models and serializers.. as i said.. crap API in wich i have to deal with_someThing_likethis both as keys and remote model names. also don't get me started on inflection. let's just say i learned alot about the internals of ember-data in the progress and why it's painful af to deal with such an api in ember.
(their relationships are includes, they don't accept includes but expect them to be named relationships, they don't accept certain http methods, filtering.. don't even ask.. i'm just happy it's working and upgrade proof.)

i'm GottZ in slack in case you are actually curious about some of the problems i came across while trying to map this api.

[rwwagner90]

@GottZ so this issue is resolved for you? @Riddlez are you still having issues?

[GottZ]

yup totally resolved for me. i also just upgraded to ember 3.0.0 without a problem. no issues with ember-inspector.

[rwwagner90]

I'm going to go ahead and close this. If anyone is still having issues, please feel free to reopen!

[omairrazam]

i faced the same issue with latest Ember

ember-cli: 3.21.2
node: 10.18.1