Mouseover DOM Inspector
在Jacky's BLOG看到的，一個很厲害的即時DOM Inspector（文件樹閱覽器?），而且是bookmarklet形式，只要把它加入我的最愛裡面，以後隨時有網站想看一下文件的配置，只要點選該書簽就可以了，不用限定在有設好連結的站台，使用方法很簡單，只要把滑鼠游標移到想看的物件上，游標旁邊就會出現這個物件的相關資訊，包含ID、class、祖先物件、該物件的屬性（attribute），還有寬、高、和位置（X、Y），實在是很厲害。
不過我發現有點小問題，就是我的blog用Firefox看時，沒辦法用這個工具，不過用IE看時卻OK，我覺得應該是content-type的問題，因為我送給Firefox的是application/xhtml+xml，給IE的是text/html，會有這樣的區別是因為IE無法正確的處理application/xhtml+xml，經過測試後，果然是這個問題，而且用application/xhtml+xml時JavaScript的錯誤訊息幾乎都是和innerHTML有關，innerHTML這個物件在正確支援DOM的環境下是不太好的，而且會破壞文件樹的結構，所以Firefox在xhtml的mime-type下才會不讓這個物件執行吧。
在發現這個問題後，我到該網站留了言，沒想到一下子就獲得對方的回覆（該地早上10:30），他說這個問題有在他的TO DO LIST裡面，只是看來不會很快的更新，不管如何，總是可以期待的。
除了MDOMI以外，slayeroffice還有很多很不錯的JavaScript Boolmarklet，像是Style Sheet Tweak，可以馬上看到修改CSS的變化，這也是實用性很高的工具，只不過都有上面提到的問題，實在是小可惜。
補充：現在MDOMI已經支援application/xhtml+xml的content/type了。
引用(http://othree.net/mt/mt-tb.cgi/1)
目前無人引用。
1由bcse在 2004-12-18 21:30:34 發表：
> 我送給Firefox的是application/xhtml+xml，給IE的是text/html
可以請問一下這裡要怎麼作嗎?
2由OOO在 2004-12-19 17:58:41 發表：
我是用php來做的，我不確定我有沒有寫過，不過這裡雖然是用movabletype，不過他只生出xml檔案，xml+xslt轉換到xhtml這不我是用php達成的，如果你有需用我在把原始檔放上來，你那裡用plog應該不會太難改^^。
3由bcse在 2004-12-23 13:49:08 發表：
那麼就麻煩你把原始檔放上來了 感謝!!
4由bcse在 2004-12-23 14:13:16 發表：
我剛剛去查了一下函式庫，發現了 get_browser，這樣應該可以了，謝謝。(接下來我要試試看 Konquer, Opera, Safari, OmniWeb 吃不吃 application/xhtml+xml ...)
5由OOO在 2004-12-23 16:25:29 發表：
http://blog.othree.net/show_source/
其實要把原始檔公開已經想弄好一陣子了，這次是順便把這功能做出來^^，說明一下我判斷的方法，程式最前面一段是從phpMyAdmin裡面抓出來的，用來判斷使用者的瀏覽器和版本，不過送出XHTML1.0還是1.1是用HTTP_ACCEPT這個環境變數來判斷的（152行），支援application/xhtml+xml這種content type的瀏覽器我才送出XHTML1.1（Another HTML-lint例外）。
6由bcse在 2004-12-24 00:56:52 發表：
非常感謝!! 不過你的 Source Code 實在是太長，我希望能簡短，所以還是自己寫了。我只寫了 27 行，判斷能力就沒你這麼好了。
7由bcse在 2004-12-24 01:08:38 發表：
才用了一下我就又把它拿掉... 雖然很想拿 100 分，但是這樣我的 JavaScript 就通通都不能用了 XD 真是打擾你了!!
8由bcse在 2004-12-24 01:50:49 發表：
另外有個問題我很好奇。是不是將網頁的 content-type 設成 application/xhtml+xml 的話，最底端就會有一條空白? 因為我的會有一條空白，而你的則是相同粗細的一條黑線。
9由OOO在 2004-12-25 10:27:14 發表：
我想javascript的問題是CDATA的問題，你可以參考一下http://blog.othree.net/archives/entries/000086/000086-final.html這頁的javascript是用 包起來的（CSS也是），不過你要是全部連在外部檔案就沒關係了。至於那條黑線是我故意的，你可以試試看位html標籤上底色（和body同顏色）看看白線會不會消失，因為我就是這樣，本來也是在一些情況下下面會留白。
10由OOO在 2004-12-25 10:28:41 發表：
忘了說我判斷的地方在152行而已^^b，上面回文有說喔。
11由bcse在 2004-12-25 18:38:04 發表：
原來可以直接問瀏覽器支不支援，我只會非常少的 PHP ，所以之前沒看懂那一段，真是感謝!! 我的 JavaScript 大多是連外部檔案，但還是失效，改用 IE 開啟則又一切正常。另外其實沒有全部失效，今天再測試一次發現只有部份失效而已，只是那幾個部份都還滿重要的...。我將 HTML 上底色後，那條白線就消失了，謝謝。
12由OOO在 2004-12-27 21:27:01 發表：
javascript的部份，還有可能是用的寫法不支援，有些方法（例如inndeHTML）在text/html的content-type是沒問題的，但是application/xml+xhtml下是不支援的，你可以檢查一下，或是看看Firefox的java主控台，有什麼錯誤訊息，基本上用application/xml+xhtml就會被限制用DOM了。
13由 Poncs 在 2006-06-08 01:02:33 發表：
哈囉~~~
因為我也對實作DOM Inspector很有興趣,可以麻煩再分享source code一次嗎?麻煩了^^拜託
14由 OOO 在 2006-06-15 10:40:13 發表：
Hello
這東西不是我做的，要看原始碼也不難，研究一下他的bookmarklet就可以了^^。
15由 Poncs 在 2006-06-18 00:48:13 發表：
ok~~~我知道了.....謝謝^^
16由eWTC在 2007-10-04 07:33:38 發表：
太好了，在这里找到了答案。搞了很久没有搞定。