首页 开发者工具 Illuminations

Illuminations

用户数 : 493 分类 : 开发者工具 扩展大小 : 1.07MiB 最后更新时间 : 2016-03-13 版本 : 2.0.2016.312
                            A browser extension that takes JavaScript frameworks and makes their internals visible, including views, models, class names, and more.


Element Highlighting

Now, when you hover the mouse over a widget or 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 and bring you to that element in the Elements panel. Illuminations does the same sort of thing, but tries to find the best match: ideally some sort of UI widget, else an Element or jQuery object.


Illumination Panel

There is a new panel added to Chrome DevTools called Illuminations. This Illuminations panel is the place to inspect framework objects: Widgets/Views, Data (stores, collections, records, fields), and 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 and fun debugging can be again.

Side panels include Properties (sorted by the object that defined the property) and Docs that will bring up documentation for 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!

                        
查看更多
下载 如何离线安装? Chrome store

分享

全部评论

    展开更多评论

    错误提示保存失败
    成功提示保存成功
    close
    qr-code

    为打击盗链困扰,本站已启用公众号验证
    微信扫码关注上方公众号,回复“插件”二字获得验证码,验证码5分钟内全站有效。

    正在验证
    验证成功
    下载遇到问题?请添加QQ群:398095333
    close
    qr-code

    为打击盗链困扰,本站已启用公众号验证
    微信扫码关注上方公众号,回复“脚本”二字获得验证码,验证码5分钟内全站有效。

    正在验证
    验证成功