Mouseover DOM Inspector

MDOMI

Jacky's BLOG看到的,一個很厲害的即時DOM Inspector(文件樹閱覽器?),而且是bookmarklet形式,只要把它加入我的最愛裡面,以後隨時有網站想看一下文件的配置,只要點選該書簽就可以了,不用限定在有設好連結的站台,使用方法很簡單,只要把滑鼠游標移到想看的物件上,游標旁邊就會出現這個物件的相關資訊,包含ID、class、祖先物件、該物件的屬性(attribute),還有寬、高、和位置(X、Y),實在是很厲害。

不過我發現有點小問題,就是我的blog用Firefox看時,沒辦法用這個工具,不過用IE看時卻OK,我覺得應該是content-type的問題,因為我送給Firefox的是text/html,給IE的是text/html,會有這樣的區別是因為IE無法正確的處理text/html,經過測試後,果然是這個問題,而且用text/html時JavaScript的錯誤訊息幾乎都是和innerHTML有關,innerHTML這個物件在正確支援DOM的環境下是不太好的,而且會破壞文件樹的結構,所以Firefox在xhtml的mime-type下才會不讓這個物件執行吧。

在發現這個問題後,我到該網站留了言,沒想到一下子就獲得對方的回覆(該地早上10:30),他說這個問題有在他的TO DO LIST裡面,只是看來不會很快的更新,不管如何,總是可以期待的。

除了MDOMI以外,slayeroffice還有很多很不錯的JavaScript Boolmarklet,像是Style Sheet Tweak,可以馬上看到修改CSS的變化,這也是實用性很高的工具,只不過都有上面提到的問題,實在是小可惜。

補充:現在MDOMI已經支援text/html的content/type了。