Illuminations

Illuminations插件简介

Illuminations插件描述

A browser extension that takes JavaScript framewks  makes their internals visible, including views, models, class names,  me.


Element Highlighting

Now, when you hover the mouse over a widget  view, it will highlight the component on the page. It shows you exactly what that object is all about.


Contextual Menu

When you right click on an element in Chrome, it adds an "Inspect" menu item to open the DevTools  bring you to that element in the Elements panel. Illuminations does the same st of thing, but tries to find the best match: ideally some st of UI widget, else an Element  jQuery object.


Illumination Panel

There is a new panel added to Chrome DevTools called Illuminations. This Illuminations panel is the place to inspect framewk objects: Widgets/Views, Data (stes, collections, recds, fields),  Elements. These views show the hierarchical structure of your code. It really takes some playing around with all of the above to get a feel of how useful  fun debugging can be again.

Side panels include Properties (sted by the object that defined the property)  Docs that will bring up documentation f the component you are looking at!

And whatever you click on can be found in the $l variable in the console  which is awesome if all the references to that object are hidden in JavaScript closures!

                                

Illuminations插件离线安装方法

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

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

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

4.下载 IlluminationsChrome插件v2.0.2016.312版本到本地。

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

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