ウェブアプリのデバッグ出力は position: absolute; or fixed;

webdev

テクニックと呼ぶにはくだらないというか，すでに広くやられていることとは思うのですが，デバッグ出力をコンソールではなくブラウザに出力するようにすると，社内テストの際などに役に立ちます。
もちろん，普通に頭やケツに流し込んだだけでは，デザインが崩れたりする可能性があるので対処します。スタイルシートで position: absolute; 等でオーバーレイさせ（IE 以外では fixed のほうがなおよし），デフォルトで visibility: hidden; にして（display: none; でもいいですが）情報表示用リンクをクリックしたときだけ表示されるようにすると，かっこいいです。さらに，opacity もいじったりして。いわゆる見た目重要ということで。

というような仕組みをいじっていたら1時間くらいあっというまにすぎました。本体じゃないところだと熱中してしまうのは（誰しもそういうことがあるとは思うんですが）悪い癖ですね。
ともかく，これくらいの CSS や JavaScript であれば，とくに最近の JavaScript や DOM バリバリじゃない人でもさくっと書けるのでおすすめです。

試行錯誤のあいだに気づいたことリスト，として

  • IE で blur() とかいじっていたらブラウザが hidden になって焦りました。これなんか悪いことに使われそうでイヤですよね。
  • IE で position: absolute; にすると，left と right，top と bottom は排他的に働きます（片方が auto みたくなる）。Firefox や Opera ではそんなことはないです。
  • Opera だと，position: fixed; の子要素で textarea を使うと，内容物をスクロールしたときにおかしくなってしまいます。