Angular Gauntlets

Angular Gauntlets插件简介

Angular Gauntlets插件描述

Angular Gauntlets helps you getting your hs dirty. It makes the components  providers of your Angular application accessible on click on an element in the Chrome DevTools elements panel. 

How to?
Just click on a DOM element in the DevTools elements panel, type one of the following keywds in the console  here we go! 

   $component: click on a DOM element referring to an Angular component to access its instance  playing with it. 
   $context: display a DOM element context, can be its parent Angular component, a ngF row, etc. 
   $scope: equals $component onto Angular components  $context onto child elements. The best alternative of AngularJS Batarang f Angular. 
   $providers: get the list of the all the providers instantiated in your Angular app  play with them. 
   $detectChanges(): triggers Angular change detection to get your changes apply. 
   log$(obs): log the first value of the given observable.
 
Little extra: you can get a preview of all these info in the Angular tab of your DevTools elements panel. Switching  elements will refresh the data immediately.
                                

Angular Gauntlets插件离线安装方法

1.首先用户点击谷歌浏览器右上角的自定义及控制按钮，在下拉框中选择设置。

2.在打开的谷歌浏览器的扩展管理器最左侧选择扩展程序或直接输入：chrome://extensions/

3.找到自己已经下载好的Chrome离线安装文件xxx.crx，然后将其从资源管理器中拖动到Chrome的扩展管理界面中，这时候用户会发现在扩展管理器的中央部分中会多出一个”拖动以安装“的插件按钮。

4.下载 Angular GauntletsChrome插件v1.2.3版本到本地。

5.勾选开发者模式，点击加载已解压的扩展程序，将文件夹选择即可安装插件。

注意：最新版本的chrome浏览器直接拖放安装时会出现“程序包无效CRX-HEADER-INVALID”的报错信息，参照这篇文章即可解决