Hatena::ブログ(Diary)

IT戦記 このページをアンテナに追加 RSSフィード Twitter

2008-03-24

Apple 謹製の JavaScript デバッガ「Drosera」が便利な件

Drosera とは

1000speakers 後のハッカソン山岸くん が「Drosera っていうアプリがある!」って発見して、教えてもらいました。

Drosera は WebKit 用の JavaScript デバッガで、 Windows XP でも Mac でも動くみたいです。

WebKit Build Archives | WebKit からダウンロードした WebKitアーカイブの中に同封されています。

で、実際に使ってみた感じ

D

できること

  • ステップ実行
  • コールスタックを見る
  • レキシカルな変数をウォッチする

などなどです。

まとめ

Web インスペクタと併用すれば効果抜群ですね!

IE6 と IE7 と IE8 を同じマシンで共存させる方法

追記:

現在は IETester というソフトウェアを使うのがベストだと思います><

f:id:amachang:20100609165917p:image

結論から言うと

Jeremy Smith’s blog: Success! IE 6, 7, and 8 Running on Same Machine (Plus 5.5 and 5.01) に書いてある通りで

  1. IE8インストール
  2. no titleIE7 Standalone をインストール
  3. no title の Multiple IEインストール

の順で、共存させることができました。

IE8 を入れるのを戸惑っている人は

入れてみたらいかがでしょうか。

ちなみに

以下のサイトからダウンロードできる Standalone IE6IE8共存できませんでした。

browsers.evolt.org

VMware Fusion で同時起動したところ

左から IE6, IE7, IE8, Firefox 3.0b4, Safari 3.1, Opera 9.5b1

f:id:amachang:20080324185458p:image

いい感じです。

DOM Range のテストケースを書きました

W3CDOM Range という便利なオブジェクトが勧告されています。

http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html

DOM Range って何?

DOM Range とは、 DOM ツリーの任意の範囲を表すための仕様です。

DOM Range を使うと、「ここからここまでのノードを全部削除」とか「ここからここまでの要素をここに移動」というような操作が簡単にできます。

もちろん、ノードの途中も選択できます。

また、 DOM Range はコンテンツをマウスなどで選択したときの選択範囲を表す Selection オブジェクトからも使われています。

(ちなみに Selection オブジェクトの仕様は HTML5 で定義されています。 http://www.whatwg.org/specs/web-apps/current-work/#selection1

どのブラウザに実装されているの?

現在、以下のブラウザで使うことができます。

そろそろ、ちゃんと DOM Range 使いたい!

というわけで、テストを書きました。

WebKit nightly, Firefox 3.0b4, Opera 9.5b1 での実行例

f:id:amachang:20080324170735p:image

リンクはこちら

http://amachang.art-code.org/rangetest/

まだまだ、バグがある

どこがバグってるのか細かくは見てないのですが、どのブラウザもそれなりにバグってる感じですね。

僕のテストが間違ってたら教えてください。