JQuery工具实时显示选定的DOM元素

Question

我最近在CodeSchool的网站上学习了JQueryAir课程，该课程以基于Web的文本编辑器为特色，实时显示在编写JQuery代码时选择了哪些DOM元素。它通过以浅灰色突出显示html页面的选定元素来实现此目的。

有没有人知道可以重新创建该功能的文本编辑器（或插件）？我主要是想将它用于练习目的。或者如果你知道一个允许我做同样事情的网站，那也会很棒。

这是一个截图，让您了解我的意思：

当底部面板中的JQuery发生变化时，上面的html会突出显示。

任何建议表示赞赏 - 谢谢！

Answer 1

执行此操作的简单方法（尽管可能不像您希望的那样动态）是使用FireBug的控制台（或类似Chrome，IE9等）。在FireFox中加载包含jQuery引用的页面后，转到FireBug的Console选项卡并粘贴它。

$("p").css("background-color", "gray");

按Enter键。您可以更改选择器以查看结果，但在刷新页面之前它们将是添加的。使用向上箭头将您最近的选择器带回来进行编辑。

编辑：好的，这是在您添加显示所需HTML源突出显示的屏幕截图之前。不过，也许这种方法在某些时候会派上用场。