extension ExtPose

ng-inspector for AngularJS

Description from extension meta

Inspector pane for AngularJS apps

Image from store ng-inspector for AngularJS
Description from store ng-inspector is a browser extension that displays an inspector panel showing the AngularJS scope hierarchy in the current page in real time, as well as which controllers or directives are associated with which scope. Hovering over a scope in the inspector will highlight the DOM element that scope is attached to. Clicking on a model will console.log that model's contents. The extension adds a button next to the address bar with the Angular logo that toggles the pane on and off. Please submit bug reports and suggestions at the GitHub repo: https://github.com/rev087/ng-inspector/issues/

Latest reviews

  • (2020-04-09) Sean Haddy: It works pretty well for angular inspection BUT if you're launching a local web server, you can get connection issues after first inspection. The angular lookup ties up server resources upon inspection, and doesn't release once the browser session is dropped. This can be very bad for memory usage as well as, many environments will fail to start up after second session launch. You have to disable every time you want to launch a new debug session.
  • (2020-03-02) Fabian Picone: Not showing any scope
  • (2019-10-26) Patrick Lieberherr: Unfortunately, the chrome tab crashes sometimes when the extension is open
  • (2019-10-01) Daniel Jackson: Push button, nothing happens :(
  • (2018-12-19) Chris Olsen: Impossible to find the element's scope that you are looking for and the UI overlays the right side of your page, making it almost impossible to use.
  • (2018-12-14) 汪滔: 还可以,就是因为刚刚在用的时候是vscode打开的,所以用不上,这个插件必须以网络协议打开,不能以文件协议打开页面,如果同样是vscode撸的代码,解决方案是:在vscode的扩展商店中下载Live Server,然后次插件才能有用!!!
  • (2018-10-03) xue jin: 说一下,这个工具有点很明显,可以显示不同作用域里面的自定义属性和方法,和其他的插件不同的是,其他的插件会显示不同作用域里面的所有属性和方法,对于初学者而言从一个包含所有系统属性作用域中找有没有自己的属性很麻烦,这个工具筛选出了自定义的属性,很好,另外,刚开始我用vscode在浏览器中打开html页面点击这个工具无效,摸索了好久,才发现必须在web服务器中才能打开这个工具,也就是访问自己编写的页码的url不能是file://D盘/test这样的地址,而必须是服务的形式,http://127.0.0.1:8080/test这样的形式,否则无效,另外,还有一点,每次刷新页面就必须把这个工具从新点一遍,很是麻烦,写下来给以后的人参考使用,初次使用有的时候真实不知道问题出在哪里,好在我是个热心人
  • (2018-08-01) Paul Green: Locks up my browser and maxes CPU
  • (2018-06-15) W Wesley: this extension looks amazing & helpful, but pity part is that my whole ng1 web app turned to very very slow while i using this extension, hope this would be fixed.
  • (2017-11-22) Wouter Van der Auwera: Doesn't seem to work?
  • (2017-11-07) Ali Gökay Duman: didn't work Angular:4/ubuntu 16.04/chrome:latest
  • (2017-10-31) Scott Blanch: Won't show up in console.
  • (2017-09-12) Kyle Harrison: Love this tool, or well I did anyways One thing that's slaying me right now is that the CSS seems off in it. Field names are white against a white background. I'm required to hover over the item in the list to see the field name :\
  • (2017-07-07) Artem Novikov: Ужасно тормозит.
  • (2017-06-28) Michael Taylor: could not dev without!
  • (2017-06-13) Luke Legrand: Nothing appears when I click the button...
  • (2017-05-08) John Grant: Cannot read property '$root' of undefined
  • (2017-04-23) Duncan Gossage: It didn't work Version 58.0.3029.81 (64-bit) Windows 10 I didn't dislike it, I was just disappointed. However, suddenly it worked. The only difference I could see was that instead of double clicking my index.html page into Chrome. I actually opened my application from a localhost port. So there you go, serve it to some sort of localhost and you can use this...
  • (2017-04-19) Yoon Tylor: well done, very useful
  • (2017-03-10) gradin Cronos: clicking the icon on the address bar does not show the console
  • (2017-02-26) Daniel: Not working.
  • (2017-02-20) mohammad alraoosh: Best angular inspector,
  • (2017-02-17) Jeff Roylance: Almost perfect!!! The one tweak needed(IMO) would be for the extension to not coverup the webpage :-) Overall though, it really is far better than anything else out there for angular debugging. Great Work!!!
  • (2017-02-16) Clairton Luz: it's good but it's not show me form.name.$error and form.$valid and this is what I need.
  • (2017-02-09) Michael Potts: Doesn't work.

Latest issues

  • (2019-10-17, v:0.5.10) Mauro Zuccato: ES6 functions break the plugin
    $scope.myES5Function=function(){ return 'ES5return'; }; //work everything $scope.myES6Function=()=>{ return 'ES6return'; }; //crash everything only returning '1' object (?)
  • (2019-02-04, v:0.5.10) breaks Firebase console
    Firebase console (using AngularJS 1.6.4-) is broken.
  • (2018-04-13, v:0.5.10) Awasthi Rajnikant: Split firebase console UI
    Resolve ASAP!!!
  • (2017-11-11, v:0.5.10) David Lappert: Breaks Angular Material <= 1.1.5
    When using this Chrome Extension, Angular Material 1.1.5 breaks. The "flex" attribute is not being translated to its associated class (i.e. layout="column" flex="75" should be converted to class="layout-column flex-75"). Great tool, but since my site uses the Angular Material framework, I am unable to use this extension.
  • (2017-10-25, v:0.5.10) Veeresh Devireddy: Page is crashing!
    ng-inspector.js:791 ng-inspector: An error occurred attempting to invoke directive: platformGaugeWidget Error: [ng:areq] http://errors.angularjs.org/1.5.11/ng/areq?p0=fn&p1=not%20a%20function%2C%20got%20Object at js-lib-body-concat.js?20171018-161851:7 at gb (js-lib-body-concat.js?20171018-161851:24) at Qa (js-lib-body-concat.js?20171018-161851:24) at Function.fb.$$annotate (js-lib-body-concat.js?20171018-161851:204) at e (js-lib-body-concat.js?20171018-161851:42) at Object.invoke (js-lib-body-concat.js?20171018-161851:42) at new Service (ng-inspector.js:789) at Function.NGI.Service.Service.parseQueue (ng-inspector.js:893) at new Module (ng-inspector.js:1110) at Function.NGI.Module.Module.register (ng-inspector.js:1120) Service @ ng-inspector.js:791 NGI.Service.Service.parseQueue @ ng-inspector.js:893 Module @ ng-inspector.js:1110 NGI.Module.Module.register @ ng-inspector.js:1120 NGI.Module.Module.register @ ng-inspector.js:1125 NGI.Module.Module.register @ ng-inspector.js:1125 App @ ng-inspector.js:981 NGI.App.App.bootstrap @ ng-inspector.js:1031 window.angular.bootstrap @ ng-inspector.js:1512 (anonymous) @ wrappers.ts:180 Promise resolved (async) (anonymous) @ wrappers.ts:179 i @ js-lib-head-concat.js?20171018-161851:43 add @ js-lib-head-concat.js?20171018-161851:43 n.fn.ready @ js-lib-head-concat.js?20171018-161851:43 (anonymous) @ wrappers.ts:174 AngularWrapperDecorators.bootstrap @ wrappers.ts:173 exports.bootstrap @ wrappers.ts:453 configuredBootstrap @ MainAppModuleCode.ts:238 (anonymous) @ AppDynamics.ts:177 js-lib-body-concat.js?20171018-161851:120 $transition is now deprecated. Use $animate from ngAnimate instead.
  • (2017-08-01, v:0.5.10) Дмитрий Солодкий: Angular 4 supported?
    Angular 4 supported?
  • (2017-06-15, v:0.5.10) Long Zheng: Breaks Firebase UI
    When this extension is enabled in Google Chrome, visiting Firebase console, the UI breaks. The main view is about 20px tall and you can't see anything. Disabling the extension fixes the page.
  • (2017-04-26, v:0.5.10) google analytics
    error in google analytics page
  • (2017-02-27, v:0.5.10) Dave Vaughan: Angular 1.5.3 app wrecked
    with this extension open. took ages to find it, but after disabling this the app works perfectly.
  • (2017-02-24, v:0.5.10) Treniese Ladson: stopped working after first use
    Day one was perfect. However, I'm trying to use it again and it just gives me a gray icon.

Statistics

Installs
60,672 history
Category
Rating
3.7 (292 votes)
Last update / version
2015-04-16 / 0.5.10
Listing languages
en

Links