JQuery 工具实时显示选定的 DOM 元素
我最近在 CodeSchool 的网站上学习了 JQueryAir 课程，该课程具有基于 Web 的文本编辑器，可以实时显示在编写 JQuery 代码时选择的 DOM 元素。它通过以浅灰色突出显示 html 页面的选定元素来实现此目的。
有谁知道可以重新创建该功能的文本编辑器（或插件）？我主要希望将其用于练习目的。或者，如果您知道一个网站可以让我做同样的事情，那就太好了。
下面是一个屏幕截图，让您了解我的意思：
随着底部面板中的 JQuery 发生变化，上面的 html 被突出显示。
任何建议表示赞赏 - 谢谢！
I was recently on CodeSchool's website and took the JQueryAir course that features a web-based text editor that shows - in real time - what elements of the DOM are being selected as you write your JQuery code. It does this by highlighting the selected elements of the html page in light gray.
Does anyone know of text editor (or plugin) that can recreate that functionality? I'm mainly looking to use it for practice purposes. Or if you know of a website that would allow me to do they same thing, that would be great too.
Here is a screenshot to give you an idea of what I mean:
As the JQuery in the bottom panel changes, the html above is highlighted.
Any advice appreciated - thanks!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
执行此操作的一个简单方法（尽管可能不像您希望的那样动态）是使用 FireBug 的控制台（或 Chrome、IE9 等中的类似控制台）。在 FireFox 中加载包含 jQuery 引用的页面后，转到 FireBug 的“控制台”选项卡并粘贴此内容。
按 Enter 键。您可以更改选择器以查看结果，但在刷新页面之前它们将是累加的。使用向上箭头返回最近的选择器进行编辑。
编辑：好的，这是在您添加显示所需 HTML 源代码突出显示的屏幕截图之前。不过，也许这种方法在某些时候会派上用场。
A simple way to do this (although perhaps not quite as dynamic as you would like) is to use FireBug's console (or similar in Chrome, IE9 etc.). After loading a page containing a jQuery reference in FireFox, go to FireBug's Console tab and paste this.
Hit Enter. You can change the selector to see the results, though they will be additive until you refresh the page. Use the up arrow to bring back your most recent selector to edit.
EDIT: OK, this was before you added the screenshot showing the desired HTML source highlighting. Still, perhaps this method will come in handy at some point.