Home/ Questions/Q 6759679
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T13:58:30+00:00

I was recently on CodeSchool’s website and took the JQueryAir course that features a

  • 0

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:

enter image description here

As the JQuery in the bottom panel changes, the html above is highlighted.

Any advice appreciated – thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

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

    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.

    • 0