rangle / augury Goto Github PK
View Code? Open in Web Editor NEWAngular Debugging and Visualization Tools
Home Page: https://augury.rangle.io
License: MIT License
Angular Debugging and Visualization Tools
Home Page: https://augury.rangle.io
License: MIT License
In backend/adapters/angular2
Line 46 col 33: import {DirectiveProvider} from 'angular2/src/core/linker/element_injector';
Should be import {DirectiveProvider} from 'angular2/src/core/linker/element';
Sorry I don't have time to create a PR at the moment; would do otherwise
Hopefully it'll help people fix the issue if/when they run into it until it's fixed
This could probably be achieved for now, is by passing a ComponentRef returned by bootstrap into inspectNativeElement provided by Angular 2.0
Need to think of proper guidelines documents so as to make external contributions easy, and smooth out the on-boarding experience.
Also, we need to potentially think of original ideas to as to what else could be useful for Angular 2 Dev tools. (This might end up a bigger scale, soul searching task that potentially could involve other devs at Rangle and maybe elsewhere/Google?)
Finally we need more investigation on what kind of hooks Angular 2 exposes to us. Gladly we have a slack channel to ask them.
Using the current instructions installation fails.
I had to do the following manually.. and then after running the example todo app I'm unable to use batarangle.
1201 [2015-11-01 04:36:19] git clone git://github.com/rangle/batarangle
1204 [2015-11-01 04:43:58] npm build
...
1213 [2015-11-01 04:45:25] npm i tappable
1214 [2015-11-01 04:45:33] npm i webpack
1218 [2015-11-01 04:47:27] npm i minimatch
1220 [2015-11-01 04:47:52] npm i inherits
1223 [2015-11-01 04:48:23] npm i inflight
1224 [2015-11-01 04:48:30] npm run webpack
1235 [2015-11-01 04:52:43] npm i rimraf -g
1236 [2015-11-01 04:53:07] npm run clean
1238 [2015-11-01 04:53:33] npm run remove-tsd-loader-typings
1239 [2015-11-01 04:53:47] npm run tsd-update
1244 [2015-11-01 04:55:18] npm i object-assign
Now installing the extension works.
When running the todo app I had to:
(after running npm install)..
1245 [2015-11-01 04:55:23] npm run start
1254 [2015-11-01 04:57:25] npm i jspm -g
I get the following errors:
bootstrap e9b1a9dfad7ad8fdc39a?cbc5**:39 Uncaught Error: Cannot find module "./backend/batarangle-backend"webpackMissingModule @ bootstrap e9b1a9dfad7ad8fdc39a?cbc5**:39(anonymous function) @ bootstrap e9b1a9dfad7ad8fdc39a?cbc5**:39__webpack_require__ @ bootstrap e9b1a9dfad7ad8fdc39a?cbc5**:19(anonymous function) @ bootstrap e9b1a9dfad7ad8fdc39a?cbc5**:39(anonymous function) @ bootstrap e9b1a9dfad7ad8fdc39a?cbc5**:39
2015-11-01 05:10:04.754 system.js:4 GET http://127.0.0.1:3001/APPSOA/Components/DashboardComponent.ts 404 (Not Found)L @ system.js:4(anonymous function) @ system.js:4lib$es6$promise$$internal$$initializePromise @ angular2.dev.js:1554lib$es6$promise$promise$$Promise @ angular2.dev.js:1845(anonymous function) @ system.js:4(anonymous function) @ system.js:4(anonymous function) @ system.js:4(anonymous function) @ system.js:5(anonymous function) @ system.js:5(anonymous function) @ system.js:5(anonymous function) @ system.js:5(anonymous function) @ system.js:5(anonymous function) @ system.js:4run @ angular2.dev.js:138zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219run @ angular2.dev.js:138zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
I'm trying to run batarangle on my Angular2 app (found here https://github.com/robianmcd/tag-trends) but I get the following output in the console and none of my components are shown in the batarangle frontend
Backend: Message Received: Object {name: "init", tabId: 39} Object {id: "cppbdcpcfamjjmdinkfmddacbdgpdboa"}
Backend: Message Received: Object {name: "message", tabId: 39, message: Object}message: ObjectactionType: "START_COMPONENT_TREE_INSPECTION"__proto__: Objectname: "message"tabId: 39__proto__: Object
Uncaught TypeError: Cannot read property 'properties' of undefined
Angular2Adapter._getComponentProperties @ angular2.ts:273
I modified my bootstrap file to look like this
import {bootstrap} from 'angular2/platform/browser';
import {bind} from 'angular2/angular2';
import {AppViewListener} from 'angular2/src/core/linker/view_listener';
import {DebugElementViewListener, inspectNativeElement} from 'angular2/src/platform/dom/debug/debug_element_view_listener';
import {App} from "./components/app/app";
import {UrlUtil} from './services/urlUtil';
bootstrap(App, [
bind(AppViewListener).toClass(DebugElementViewListener)
]).then(applicationReference => {
window['ng']['probe'] = inspectNativeElement;
});
I'm running Alpha 48 so maybe this is happening because of the mismatched angular versions. I can run batarangle with the example app just fine. Any idea?
This repository was made by copying the code from the batarangle repo (not a fork).
We need to cleanup the example application in the new repo.
Without browserify, failing tests cause indefinite hanging. (See comments in #72). Since the tests are already getting bundled by webpack, running it through browserify is redundant. Find out how we can take out browserify without tests hanging.
Objective: Allow local tests and enable CI integration for each PR and merge.
Another thing that needs to get done is to fix the example application.
I believe that currently adding, deleting or editing tasks does not work, this needs to be fixed
When I use gulp build there's Duplicate identifier 'Promise' error in es6-promise.d.ts and es6-shim.d.ts files. And I checked the target is ES5 in tsconfig. Is there anything I can do to resolve this error? And my dev box is Windows 10. Thanks!
Using the code to connect Batarangle to the Angular 2 app from the README generates an error in the console with Angular2 beta 0:
import { AppViewListener } from 'angular2/src/core/linker/view_listener';
import { DebugElementViewListener } from 'angular2/platform/common_dom';
import { bind } from 'angular2/core';
bootstrap(AppComponent, [
bind(AppViewListener).toClass(DebugElementViewListener)
]);
As soon as the Angular2 tab in devtools is opened for the first time, we get this:
Uncaught TypeError: nativeElement.setAttribute is not a function
Angular2Adapter._emitNativeElement
@ angular2.ts:133Angular2Adapter._traverseTree
@ angular2.ts:109(anonymous function)
@ angular2.ts:122forEach
@ es6-shim.js:1107Angular2Adapter._traverseTree
@ angular2.ts:121(anonymous function)
@ angular2.ts:57forEach
@ es6-shim.js:1107Angular2Adapter.setup
@ angular2.ts:56(anonymous function)
@ entry.ts:19__webpack_require__
@ bootstrap 11a0ead175d757e7a340?343e:19(anonymous function)
@ bootstrap 11a0ead175d757e7a340?343e:39__webpack_require__
@ bootstrap 11a0ead175d757e7a340?343e:19(anonymous function)
@ bootstrap 11a0ead175d757e7a340?343e:39(anonymous function)
@ bootstrap 11a0ead175d757e7a340?343e:39
Subsequent DOM updates don't seem to be handled by the Batarangle front end.
If I include sourcemaps in an app, I can open the original typescript source file and set breakpoints.
However, stacktraces still reference the .js file so clicking through those links takes me to the wrong place.
Probably a chrome issue but it seems like you guys could drive the fix?
Need to install all the typings dependencies from tsd install as opposed to some being linked from the node_modules folder using tsd link. This way the typings can reference each other from a common location.
For example angular2 comes with a typings for es6-promise with angular2 referencing it. Also chrome typings installed from tsd repo have es6-promise as a dependency, typings for which get installed into /typings folder.
During compilation both the es6-promise from node_modules/angular2 and es6-promise from typings folder (referenced by chrome.d.ts) are present on the build path, causing a compile time error of duplicate occurrence of symbol.
Search seems to be breaking/just not working at all in some cases.
NgFor & NgIf first; other directives to be followed.
I suppose a logo is required first, but afterwards, maybe something aligned with this spec?
We want to be able to click a magnifying glass within Chrome Dev Tools and get back some information about the component.
The view on the left that shows all the components as gray blocks nested within each other feels too large and spread out. With deep complex hierarchies or long repeated lists it's going to be tiresome scrolling around the list while keeping a sense of where you are within the list.
Have you considered any other layouts?
Inside the example app you include the AppViewListener
this way:
import {AppViewListener} from 'angular2/src/core/linker/view_listener.js';
This results in Cannot find module angular2/src/core/linker/view_listener.js
for me.
Provide logic to find out if Angular 2.0 is used within the context of the inspected application.
If Angular 2.0 is present, show our component inspector and the angular panel, otherwise show nothing.
Need to investigate on how to do that, the answer might come from the angular team. This is inspired by the similar check present in React Dev Tools extension.
Being able to see a count of all the different components being used at a given time would be awesome. So example: 1 root-component, 1 header-component, 1 body-component, 5 collapsible-component, 2 item-component, 1 footer-component, etc.
This would be good for seeing what components are used the most for performance sake and if there's and fishy business happening in larger applications.
@igor-ka as we talked about
Feature goal: The user should be able to assess the impact of change detection on each component at-a-glance.
@abmohan โ we're probably looking to prototype the best way of doing this.
/cc @winkerVSbecks
Currently the our "backend" script gets injected on the onload event of the inspected apps document.
This results in a situation where if the dev tools page was closed and re-open a refresh button has to be pressed in order to get the script injected again.
Need to investigate and provide a better workflow in terms of script injection. React Dev Tools source code will probably have an answer to this problem.
Objective: Provide everything needed to get up and running as soon as possible, whether you're a contributor or an end-user.
[1] We should probably remove any references to a release date.
Lint errors within backend/adapters/angular2.ts file need to be addressed
We need to render a tree like structure into an "Angular" panel of Chrome Dev Tools to show an HTML like representation of the component tree with mock data.
Components loaded with DynamicComponentLoader.loadNextToLocation are currently not getting included into batarangle.
Great work otherwise!
I am trying to use batarangle with this repo:
https://github.com/robianmcd/ng2-movies
But having above message in the components panel. Also, nothing shows in angular 2 panel in developers tools.
As of this commit in alpha-48, Angular is importing RxJS modules via rxjs
rather than @reactive/rxjs
. #45 did not update Batarangle's dependencies accordingly, resulting in this warning on npm install
:
[email protected] requires a peer of [email protected] but none was installed.
npm run build
then barfs on Cannot resolve module rxjs/*
for all rxjs modules, and the resultant extension is nonfunctional.
Changing the import in package.json
and updating the import statements in /backend/base
, /frontend/dispatcher/dispatcher
and /stores/abstract-store
seems to resolve the problem and results in a successful build, with all tests still passing. Submitting PR with these changes now.
Extract properties and events from debug element and show it in the info panel.
When trying to build with gulp build, the transpiled typescript files gets put in app\app\ts this is because, gulp-rename does not normalize the directory names, so the line path.dirname = path.dirname.replace('app/ts', 'js');
will actually do nothing on windows, since path.dirname will have \ instead of / in the path.
By adding the line path.dirname = path.dirname.replace('app\\ts', 'js');
after that one, everything works in windows too, this is a workaround though, since I think the real solution is to fix gulp-rename.
Add a build and packaging process to this repo so that this extension can be developed in ES6 or TypeScript, as per investigation.
Objective: Provide a playground of different kinds of Angular application and a showcase of the tool's capabilities across them.
/cc @AbdellaToronto
Currently the tsc command produces 2 compile time errors related to the Angular 2.0 debug classes that we are importing.
This looks promising to use with webpack: https://www.npmjs.com/package/tslint-loader
Objective: Clean house and lay down the foundation for the next phase of features.
Objective: Foster an inclusive environment and lower the barrier to entry in participating to the project.
Currently the data shown on the component inspector pane is disorganized.
Need to give the data shown proper labels and decide what is most useful to show.
Once a reference to a root component has been retrieved a tree of components needs to be traversed to extract useful information. This need to be wrapped into some kind of structure to pass further to display.
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.