用於實時顯示所選DOM元素的JQuery工具

Question

我最近在CodeSchool的網站上參加了JQueryAir課程，其中包含一個基於Web的文本編輯器，該編輯器可以實時顯示當您編寫DOM時選擇了哪些DOM元素你的JQuery代碼。它通過以淺灰色突出顯示html頁面的選定元素來實現這一點。

有誰知道文本編輯器（或插件），可以重新創建該功能？我主要是爲了實踐目的而使用它。或者如果你知道一個網站可以讓我做同樣的事情，那也會很棒。

下面是截圖給你我的意思的想法：

由於JQuery的底部面板的變化，HTML上方突出。

任何意見讚賞 - 謝謝！

Answer 1

一個簡單的方法來做到這一點（儘管可能不像你想的那樣動態）是使用FireBug的控制檯（或類似的Chrome，IE9等）。在FireFox中加載包含jQuery參考的頁面後，轉到FireBug的Console選項卡並粘貼。

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

按Enter鍵。您可以更改選擇器以查看結果，但它們會一直添加，直到刷新頁面。使用向上箭頭將您最近的選擇器重新編輯。

編輯：好的，這是之前你添加屏幕截圖顯示所需的HTML源高亮。不過，也許這種方法在某些時候會派上用場。