Download

HTML文章の構造を視覚化　（Last modified : 10 Aug 2006 21:29:08 +0900）

上記リンク上で右クリック→ブックマークに追加

動作確認 (2006/08/10)
Opera 9.01
Minefield 3.0a1 (ID:2006080904)
注意事項
Firefox1.5以上でも動くはず
IE6以下はoutline property、dataスキームに未対応かつBookmarkletの制限のため不可。IE7Betaはしらん
IEはコレでガマンしてね→outlineのかわりにborderを使ってレイアウト崩壊上等な視覚化をするIE専用Bookmarklet
面倒なのでframeで構成されたページに未対応。ていうか今時frameて

説明

?Bで人気だったA Handy CSS Debugging SnippetにインスパイヤされてCSSのoutlineを使ってHTML文章の構造を視覚化するBookmarkletを作ってみた。

Bookmarkletを実行後、視覚化されている状態でこのBookmarkletを実行すると視覚化を解除します。

本腰を入れてのデバッグというよりちょっとした確認に使うのが乙女の嗜み。

Bookmarkletの詳細

Bookmarkletの整形前 

javascript:
(function(){
  var h,l,n,d=document,id='cssDebug-VTSOAX';
  h=d.getElementsByTagName('head')[0];
  n=d.getElementById(id);
  if(n==undefined){
    l=d.createElement('link');
    l.setAttribute('id',id);
    l.setAttribute('rel','stylesheet');
    l.setAttribute('type','text/css');
    l.setAttribute('href','data:text/css;base64,KiB7b3V0bGluZTogMnB4IGRvdHRlZCByZWQgIWltcG9ydGFudDt9DQoqICoge291dGxpbmU6IDJweCBkb3R0ZWQgZ3JlZW4gIWltcG9ydGFudDt9DQoqICogKiB7b3V0bGluZTogMnB4IGRvdHRlZCBvcmFuZ2UgIWltcG9ydGFudDt9DQoqICogKiAqIHtvdXRsaW5lOiAycHggZG90dGVkIGJsdWUgIWltcG9ydGFudDt9DQoqICogKiAqICoge291dGxpbmU6IDFweCBzb2xpZCByZWQgIWltcG9ydGFudDt9DQoqICogKiAqICogKiB7b3V0bGluZTogMXB4IHNvbGlkIGdyZWVuICFpbXBvcnRhbnQ7fQ0KKiAqICogKiAqICogKiB7b3V0bGluZTogMXB4IHNvbGlkIG9yYW5nZSAhaW1wb3J0YW50O30NCiogKiAqICogKiAqICogKiB7b3V0bGluZTogMXB4IHNvbGlkIGJsdWUgIWltcG9ydGFudDt9');
    h.appendChild(l);
  }
  else{
    h.removeChild(n);
  }
}
)()

dataスキームの中身 

* {outline: 2px dotted red !important;}
* * {outline: 2px dotted green !important;}
* * * {outline: 2px dotted orange !important;}
* * * * {outline: 2px dotted blue !important;}
* * * * * {outline: 1px solid red !important;}
* * * * * * {outline: 1px solid green !important;}
* * * * * * * {outline: 1px solid orange !important;}
* * * * * * * * {outline: 1px solid blue !important;}