Инструмент JQuery для отображения выбранных элементов DOM в режиме реального времени

Question

Недавно я был на веб-сайте CodeSchool и прошел курс JQueryAir, в котором есть веб-редактор текста, который в реальном времени показывает, какие элементы DOM выбираются при написании кода JQuery.Это достигается путем выделения выделенных элементов html-страницы светло-серым цветом.

Кто-нибудь знает текстовый редактор (или плагин), который может воссоздать эту функцию?Я в основном рассчитываю использовать его для практических целей.Или, если вы знаете сайт, который позволил бы мне делать то же самое, это тоже было бы здорово.

Вот скриншот, чтобы дать вам представление о том, что я имею в виду:

При изменении JQuery на нижней панели высвечивается HTML выше.

Любой совет приветствуется - спасибо!

Answer 1

Простой способ сделать это (хотя, возможно, не так динамично, как хотелось бы) - использовать консоль FireBug (или аналогичную в Chrome, IE9 и т. Д.).После загрузки страницы, содержащей ссылку jQuery в FireFox, перейдите на вкладку «Консоль» FireBug и вставьте ее.

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

Нажмите Enter.Вы можете изменить селектор, чтобы увидеть результаты, хотя они будут добавлены, пока вы не обновите страницу.Используйте стрелку вверх, чтобы вернуть ваш последний селектор для редактирования.

РЕДАКТИРОВАТЬ: ОК, это было до того, как вы добавили скриншот, показывающий желаемую подсветку исходного HTML-кода.Тем не менее, возможно, этот метод пригодится в какой-то момент.