Hatena::Groupsubtech

ういはるかぜの化学

Tuesday, December 03, 2013

Internet Explorer 6への開発対応で便利なツール 04:57 Internet Explorer 6への開発対応で便利なツール - ういはるかぜの化学 を含むブックマーク はてなブックマーク - Internet Explorer 6への開発対応で便利なツール - ういはるかぜの化学

このエントリーInternet Explorer Advent Calendar 2013の3日目です。

最近は随分と減ってきてはいますがいわゆるIE6対応という10年前のInternet Explorer対応する羽目になることがWeb開発者の方であればあったりします。今のバージョン11なので5世代も前のバージョンです。利用できる技術の差やバグなど色々と大変です。

そんなIE6対応がなかなか厳しい理由として、今ではなくてはならないF12開発者ツールのようなものがついていないためデバッグに手間取るというところがあります。そこでIE6で利用できる便利なツールを紹介します。

Firebug Lite

Firebug Liteはあの一世を風靡したFirebugの簡易バージョンです。

no title

しかしたら今ではFirebug存在を知らない人もいるかも…。Firebugについて簡単に説明するとFirefoxWeb開発用のアドインで、Google ChromeデベロッパーツールやInternet ExplorerのF12開発者ツールのご先祖様というかそれらはFirebugがあるから生まれたといっても過言ではないといった存在です。

昔はページをマークアップする際にFirebugを使うと捗るのでFirefoxを立ち上げるとかよく聞いたものです。

f:id:mayuki:20131204044947p:image:w640

スクリーンショットInternet Explorer 7です

それはそれとしてFirebug LiteはおおざっぱにいえばFirebugのインスペクタ部分だけ切り出してブックマークレットで起動できるようにしたものという感じのツールです。そして何よりFirefox以外で動きます。具体的にはIE6+, Firefox, Opera, Safari and ChromeということでなんとIE6で動きます。便利!

レイアウト上の問題解決の手助けになることがまれにありますので覚えておいて損はないかと思います

使い方はStable channelbookmarkletブックマークレットになっているのでお気に入りに入れておき、対象のページで発動すればおっけーです。

Microsoft Script Debugger

HTMLというかスタイルの問題解決にはFirebug Liteが使えるのでよかったよかったという話ですがFirebug LiteにはスクリプトデバッガはついていませんのでJavaScriptデバッグはまるで捗りません。そこでMicrosoft Script Debuggerです。

Error 404 - Not Found

Script DebuggerはActive Scriptホストしているアプリスクリプトデバッグするツールです。要するにJScriptとかVBScriptデバッグするためのツールです。これを使ってIEにアタッチできます

正直使い勝手は最悪ですがとりあえずステップ実行できるのでまあないよりはマシではないでしょうか。可能であればScript EditorとかVisual Studioを使ったほうがよいと思います

使い方

まずダウンロードセンターからscd10jp.exeというセットアップファイルダウンロードします。そしてダウンロードしたら実行してインストールします。

インストール後、Script Debuggerを起動する前にInternet Explorerオプションから「詳細設定」タブの「スクリプトデバッグを使用しない (Internet Explorer)」のチェックを外しておきます

チェックが外れた状態になったら一度Internet Explorerを開きなおしてScript Debuggerを起動します。起動する方法ですがショートカットなどは作られないのでインストールされたフォルダ(インストール時に聞かれますが既定ではProgram FilesのMicrosoft Script Debugger)にあるmsscrdbg.exeを直接実行します。

f:id:mayuki:20131204044948p:image

するとどうすればいいのかわからないMicrosoft Script Debuggerというウィンドウが開きます。と、ここで一度Internet Explorerに戻ってデバッグしたいページを開いておきます

ページを開いたらMicrosoft Script Debuggerというウィンドウの「表示」から「実行中のドキュメント」という項目を選択します。そうすると「実行中のドキュメント」というウィンドウが開きます

f:id:mayuki:20131204044949p:image

で、デバッグしたいスクリプトに以下のようなdebuggerステートメントを埋め込みます

debugger;

あるいは次のステートメントで中断というボタンクリックします。

その状態でリロードするとドキュメントが開かれて停止しますので後は「実行中のドキュメントからファイルを開いてブレークポイントを設置したりステップ実行したりすればよいでしょう。ちなみにリロードするとブレークポイントは吹き飛びますので最悪です。

f:id:mayuki:20131204044950p:image

これでデバッグがはかどる…かもしれません。

しかしウォッチウィンドウとかもないのでやっぱりできればScript EditorとかVisual Studioを使ったほうがよいと思いますね…あれ…もしかしてこれ別に便利じゃない…?

まとめ

このように開発ツールも全然ないのでInternet Explorer 9以下ははやく捨てましょう。

トラックバック - http://subtech.g.hatena.ne.jp/mayuki/20131203