一个浏览器扩展,采用JavaScript框架并使其内部可见,包括视图,模型,类名等。
元素高亮
现在,将鼠标悬停在小部件或视图上时,它将高亮显示页面上的组件。它确切地显示了该对象的全部含义。
上下文菜单
在Chrome中右键单击某个元素时,它会添加一个检查”菜单项以打开DevTools并将您带到元素”面板中的该元素。照明做同样的事情,但是试图找到最匹配的东西:理想地是某种UI小部件,否则是Element或jQuery对象。
照明面板
Chrome DevTools中添加了一个名为Illuminations的新面板。该照明”面板是检查框架对象的地方:小部件/视图,数据(存储,集合,记录,字段)和元素。这些视图显示了代码的层次结构。确实需要进行以上所有操作,才能体会到再次可以进行有用和有趣的调试的感觉。
侧面板包括属性”(按定义该属性的对象排序)和文档”,这些文档将调出您正在查看的组件的文档!
您单击的任何内容都可以在控制台的$ l变量中找到-如果该对象的所有引用都隐藏在JavaScript闭包中,那么这是非常棒的!