emberjs / ember-inspector Goto Github PK
View Code? Open in Web Editor NEWAdds an Ember tab to the browser's Developer Tools that allows you to inspect Ember objects in your application.
License: MIT License
Adds an Ember tab to the browser's Developer Tools that allows you to inspect Ember objects in your application.
License: MIT License
When using the extension's view tree and highlighting a view we'll call App.WrappingView
, an exception is raised: "TypeError: Cannot call method 'getBoundingClientRect' of undefined".
App.WrappingView = Ember.View.extend({
tagName: ""
});
Because tagName
is set to an empty string, Ember doesn't create an element for the view, which is causing the exception.
The reason why I'm using a view like this is because I need to select a template to render based on the type of the model passed in:
isTypeA
and isTypeB
are computed properties defined on App.WrappingController
, but I use {{render "wrapping" model}}
in the parent template, which creates a view as well. Therefore, I am using tagName: ""
to cut down on unnecessary HTML tags.
Maybe Ember provides an easier way to achieve what I'm doing (please do tell!), but regardless the extension should be able to handle this corner case gracefully.
You can recreate it running the peepcode ember.js example code.
here is the console output:
Ember Debugger Active
getTree
Uncaught TypeError: Cannot read property '1' of null
inspectView
viewTree
sendTree
(anonymous function)
The error does not break the app. Wonder if i should uninstall the extension, it is confusing to get errors that are created by the extension?
I hope I soon get past the steepness of the learning curve.
Keep up to good work, mates!
Will there be support for the Fixture Adapter, when using the Data tab?
Even better might be to include a code example of building an extension on Ember.DataAdapter, and show how to include/initialize that inside one's project.
This could be very handy inside JSBin examples.
The extension stopped working for my app and I cannot figure out why. I debugged the extension a bit and see that the extension's ApplicationRoute's setupController function never seems to run (https://github.com/tildeio/ember-extension/blob/master/app/routes/application.js#L3).
I am using ember 1.0.0-rc.7. Any idea why the extensions application route would not run? Or what I should look at next? I'm happy to fix it, but I've hit a wall.
Also, my app is not inside of an iframe. Nor am I using the file protocol. Thanks
Once the ember-extension tab is the current one, attempting to switch to another DevTools tab using any of the available key commands doesn't work.
Assuming this isn't considered bad form, I think this would be nice to do. I imagine we'll be adding new features to this and releasing quite frequently.
Using #4 in order to get something to start loading, I'm getting:
Uncaught TypeError: Cannot set property 'ember690' of undefined
When I open up the console for try.discourse.org. The Ember tab is blank besides the "Back" button.
low priority, but would be nice.
Clicking on a layer to select it works only if I move the mouse without hovering any other layer. The selection is lost when hovering any other layer.
Denying load of chrome-extension://ganlifbpkcplnldliibcbegplfmcfigp/scripts/vendor/jquery/jquery.min.map. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
I am using following verison of libraries and this is not working for me.
DEBUG: ------------------------------- ember-1.0.0-rc.1.js:339
DEBUG: Ember.VERSION : 1.0.0-rc.1 ember-1.0.0-rc.1.js:339
DEBUG: Handlebars.VERSION : 1.0.0-rc.3 ember-1.0.0-rc.1.js:339
DEBUG: jQuery.VERSION : 1.7 ember-1.0.0-rc.1.js:339
DEBUG: -------------------------------
When I hover over the menu in the ember-devtool tab, I got the following errors
Uncaught TypeError: Object [object Object] has no method 'highlightView'
Uncaught TypeError: Cannot read property 'style' of undefined
When a promise returned from the route's model
hook delays rendering on page load, the initial view tree isn't sent.
Right now I have array prototype extensions disabled (but function and string prototypes enabled) because of an external lib that I don't control (which breaks when the prototypes are extended). But I can't use ember-debug because it assumes the extensions are present. An example is the basic_adapter where _messageCallbacks
is initialized to a primitive array []
but is later assumed to have the pushObject
method defined. There are likely more occurrences but this is the first one that halts the app from loading.
It doesn't do anything when I load a page with either Console or Ember extension open. Loading the page and then opening the console works as expected.
When I click on the routes tab i see this exception in the console in chrome 29 and ember 1.0.
Uncaught TypeError: Object #<Object> has no method 'getHandler'
buildSubTree
(anonymous function)
ComputedPropertyPrototype.get ember.js:4423
get ember.js:1916
Ember.Observable.Ember.Mixin.create.get ember.js:13775
Ember.Object.extend.sendTree
Ember.Object.extend.messages.getTree
sendEvent ember.js:2334
Ember.Evented.Ember.Mixin.create.trigger ember.js:14420
(anonymous function)
Backburner.run ember.js:5579
Ember.run ember.js:5915
(anonymous function)
it happens on this line routeHandler = container.lookup('router:main').router.getHandler(handler);
The router object exists and looks okay to me so I'm not sure why it is missing this method.
Router {recognizer: RouteRecognizer, callbacks: Array[1], triggerEvent: function, map: function, hasRoute: function…}
callbacks: Array[1]
recognizer: RouteRecognizer
triggerEvent: function triggerEvent(handlerInfos, ignoreFailure, args) {
__proto__: Object
activeTransition: null
generate: function (handlerName) {
handleURL: function (url) {
hasRoute: function (route) {
isActive: function (handlerName) {
log: null
map: function (callback) {
paramsForHandler: function (handlerName, contexts) {
replaceURL: function (url) {
replaceWith: function (name) {
reset: function () {
transitionTo: function (name) {
trigger: function (name) {
updateURL: function () {
__proto__: Object
Just wanted to start off saying this extension is really awesome! I was wondering when the data tab was going to be able to work like how it's shown in the preview images on the Chrome Store. I know Ember-Data just had a lot of work done to it so I was wondering if that's the reason it was taken out.
Also, if there's anything I can do please let me know. Thanks!
For profiling reasons, it would be great if we could display application instrumentation and other performance related data:
I'm getting the following error in the extension's background page:
Error in event handler for 'undefined': Invocation of form tabs.sendMessage(undefined, object) doesn't match definition tabs.sendMessage(integer tabId, any message, optional function responseCallback) Error: Invocation of form tabs.sendMessage(undefined, object) doesn't match definition tabs.sendMessage(integer tabId, any message, optional function responseCallback)
at Object.normalizeArgumentsAndValidate (schemaUtils:119:11)
at Object.<anonymous> (schema_generated_bindings:301:32)
at chrome-extension://lieolkpmflijjjlgloapenjekgkfbgep/background-script.js:26:19
at chrome.Event.dispatchToListener (event_bindings:353:21)
at chrome.Event.dispatch_ (event_bindings:339:27)
at chrome.Event.dispatch (event_bindings:359:17)
at Object.chromeHidden.Port.dispatchOnMessage (miscellaneous_bindings:255:22) event_bindings:343
chrome.Event.dispatch_ event_bindings:343
chrome.Event.dispatch event_bindings:359
chromeHidden.Port.dispatchOnMessage
Chrome: Version 27.0.1430.0 dev
I just finished the Ember.js Getting started app from the guides, however the ember-extension keeps telling me Ember could not be detected.
I got all the library files from the guides links:
Any Advice?
If you enter an application at a route that is not part of the route set, ember-extension reports No Ember Application Detected
. Console shows that Ember loaded successfully but did not transition into any route.
It would be nice be able to browse possible routes through the extension to debug this.
Not sure if fiddle or jsbin has an API, but it would be pretty rad if you could export your current controller/view/route to jsbin/fiddle.
Not quite sure how this would work -- or even the specifics of it. But the goal is to try to get some useful template / starting point with relevant code into a fiddle for diagnosis.
Using latest Starter Kit, opening the index.html page and then opening the dev tools, Ember tab shows "No Ember Application Detected." Console shows Ember starting up.
I love the extension, but it may be worth warning users somewhere in the docs that the extension uses window events.
One of our apps also uses window events and without a guard to ignore messages sent by the extension, it was handling (incorrectly) communication from the extension.
The following line causes this error:
I think the string it is trying to match is "(generated application controller)"
.
Curiously, I only get this error when changing the nesting of my routes.
Ember isn't being detected when using RequireJS (or AMD in general, I suppose) to load Ember.
When I close and reopen the Chrome Developer tools, it does detect Ember and my application, routes, ..
But after a page-refresh it doesn't detect it.
This is quite unproductive during development.
Locking does not work if watch
does not have { nospawn: true }
. However, setting nospawn
is preventing watch from working correctly.
Ember app is not detected in Chromium
Version 28.0.1500.71 Ubuntu 13.04 (28.0.1500.71-0ubuntu1.13.04.1)
https://dl.dropboxusercontent.com/u/1711055/Screenshot%20from%202013-09-03%2000%3A11%3A24.png
The app is a simple todo, and don't show any error in console. Any idea?
Someone more are interested in have this to firefox too?
While testing ember-inspector 0.0.4 in Firefox 25.0 on Mac, the ember-inspector tab displays blank pane in the develop tools area. There are no warnings or error messages in the UI.
After launching Firefox using /Applications/Firefox.app/Contents/MacOS/firefox-bin
from the terminal, I see Warning: An attempt was made to open a tool with an id of "ember-inspector", which is not listed in Telemetry._histograms. Location: telemetry.js/toolOpened()
when I click on the Ember tab.
I will research further but wanted to document the issue in case others experience the same problem.
When installing via the store, file support has to be turned on manually by the user. I believe we can check if it's supported via chrome.extension.isAllowedFileSchemeAccess
(see http://developer.chrome.com/extensions/extension.html). We should show instructions for how to turn it on instead of showing "App not detected."
Hey,
I'd like to get an unofficial nightly build published to the chrome web store, but the chrome web store doesn't seem to like chrome extensions with the file permission needed.
What is the file permission used for?
i did a thing in the new resolver that doesn't play nicely the with inspector:
I have the new resolver build a key based on the namespace + fullName. This looked strange without braces around it.
ember-cli/ember-resolver@79a3f7c
but it seems the regex extracting controllerName from subclasses merely checks for the existence of '('
https://github.com/tildeio/ember-extension/blob/master/ember_debug/view_debug.js#L490
Now, what I have done isn't final, and I am open to changes, but https://github.com/tildeio/ember-extension/blob/master/ember_debug/view_debug.js#L490 should likely be /^\(subclass of (.*)\).test(className)
as match
can return null.
Much of the work done in transitioning routes and rendering views is done asynchronously, so there may have to be some sort of announcement later that the process is complete.
failed building when exist space in path on windows
G:\WebTools\my Repo\JavaScripts\Ember\ember-extension>grunt build build_xpi
Running "clean:0" (clean) task
Cleaning "tmp"...OK
Running "ember_handlebars:compile" (ember_handlebars) task
File "tmp/public/ember_extension/templates.js" created.
Running "transpile:main" (transpile) task
Running "concat:main" (concat) task
File "tmp/public/ember_extension.js" created.
Running "concat:main_css" (concat) task
File "tmp/public/ember_extension.css" created.
Running "transpile:ember_debug" (transpile) task
Running "copy:ember_debug" (copy) task
Created 1 directories, copied 2 files
Running "concat:ember_debug" (concat) task
File "tmp/public/ember_debug.js" created.
Running "jshint:all" (jshint) task
>> 46 files lint free.
Running "copy:chrome_extension" (copy) task
Created 2 directories, copied 16 files
Running "wrap:chrome_ember_debug" (wrap) task
Wrapping tmp/public/ember_debug.js -> dist_chrome/ember_debug/ember_debug.js...OK
Wrapped 1 files
Running "copy:firefox_extension" (copy) task
Created 2 directories, copied 16 files
Running "wrap:firefox_ember_debug" (wrap) task
Wrapping tmp/public/ember_debug.js -> dist_firefox/data/ember_debug/ember_debug.js...OK
Wrapped 1 files
Running "mozilla-addon-sdk:1_14" (mozilla-addon-sdk) task
Downloading: https://ftp.mozilla.org/pub/mozilla.org/labs/jetpack/addon-sdk-1.14.tar.gz
Running "mozilla-cfx-xpi:stable" (mozilla-cfx-xpi) task
Creating dist dir 'G:\WebTools\my Repo\JavaScripts\Ember\ember-extension\tmp\xpi'...
Creating xpi...
Warning: There was an error running mozilla-cfx-xpi. Error: 'G:\WebTools\my' is not recognized as an internal or external co
mmand,
operable program or batch file. Use --force to continue.
Aborted due to warnings.
G:\WebTools\my Repo\JavaScripts\Ember\ember-extension>
For the Ember panel the escape key won't toggle the console like it does in the other Chrome inspector panels.
In my app where I use es6-transpiller I had to do the follow in order for extension to detect my models :
App.Post = App.__container__.lookupFactory('model:post');
It should not be necessary.
If this is something that have to be fixed on the ember side, seems important to fix before 1.0 release.
A handy feature for the extension would be some clear visual way to show what routes and controllers, etc are "generated". Meaning there is no specific code defined and they are using Ember defaults.
Also, the inverse would be handy, show where there are controllers that don't have a backing route.
For the latter the use case I am thinking of is occasionally I am defining a controller and maybe misname it or forget something in the naming convention pattern. This kind of mistake is not always obvious when staring at the code and not immediately realizing you forgot a pluralization or some minor difference. The extension could be great in catching these kinds of nuances.
This might also be a convenient way to identify "controllers" that stem from views or components and are not really represented in the routes hierarchy.
I am not sure if there is an easy way to do this or not with Ember. Probably have to scan all the registered and compiled handlebars templates perhaps?
Orphaned might not be the right term, but the concept is to see stuff that is not tied to the router in a direct way.
Let me know if this kind of feature is feasible and I could take a stab at mocking up a UI.
If it is not really feasible feel free to close this issue.
The current version not supported of multi application . Please add this feature.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.