Hatena::Groupsubtech

ういはるかぜの化学

Saturday, December 07, 2013

Internet Explorerの互換表示リスト 2013 23:58 Internet Explorerの互換表示リスト 2013 - ういはるかぜの化学 を含むブックマーク はてなブックマーク - Internet Explorerの互換表示リスト 2013 - ういはるかぜの化学

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

IEには8以降で互換表示(IE7モードやIE8モード、IE9モードなど)があり、アクセスしたサイトで自動的に発動できるよう対象ドメインをリスト化したXMLがあります(コピペ。

2年ちょっと前にInternet Explorerの互換表示リスト - ういはるかぜの化学 - subtechというエントリを書いてて、そのころはWindows 8がDeveloper PreviewだったのでInternet Explorer 10もまだPreviewでした。ということで2013年12月というかInternet Explorer 11での互換表示リストを見て、何となく内容を想像してみることにします。

Internet Explorer 11の互換表示リストの固定のURLは見当たらなかったのでレジストリのHKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\BrowserEmulationからURLを拾ってきました。

https://iecvlist.microsoft.com/IE11/1375395130872/iecompatviewlist.xml

<?xml version="1.0" encoding="utf-8" ?>
<iecompatlistdescription>
    <version>1152921505002015225</version>
    <ttl>1</ttl>
    <ua id="Chrome 19">Mozilla/5.0 (Windows NT 6.2) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.52 Safari/536.5</ua>
    <ua id="Chrome 28">Mozilla/5.0 (Windows NT 6.2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36</ua>
    <ua id="FireFox 12">Mozilla/5.0 (Windows NT 6.2; rv:12.0) Gecko/20100101 Firefox/12.0</ua>
    <ua id="FireFox Token">Mozilla/5.0 ($PLATFORM; Trident/7.0; rv:11.0) like Gecko/20100101 Firefox/12.0</ua>
    <ua id="FireFox 22 Token">Mozilla/5.0 ($PLATFORM; Trident/7.0; rv:11.0) like Gecko/20100101 Firefox/22.0</ua>
    <ua id="IE 10">Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)</ua>
    <ua id="IE9Win7">Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)</ua>
    <ua id="IE10 Trident 7.0 Token">Mozilla/5.0 (compatible; MSIE 10.0; $PLATFORM; Trident/7.0)</ua>
    <ua id="IE10 Trident 6.0 Token">Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)</ua>
    <ua id="IE11">Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko</ua>
    <f12ua category="desktop" name="Internet Explorer 10">Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)</f12ua>
    <f12ua category="desktop" name="Internet Explorer 9">Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)</f12ua>
    <f12ua category="desktop" name="Internet Explorer 8">Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0)</f12ua>
    <f12ua category="desktop" name="Internet Explorer 7">Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0)</f12ua>
    <f12ua category="desktop" name="Internet Explorer 6">Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)</f12ua>
    <f12ua category="non-desktop" name="IE10 - Windows Phone 8">Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch)</f12ua>
    <f12ua category="non-desktop" name="IE9 - Windows Phone 7">Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0)</f12ua>
    <f12ua category="non-desktop" name="IE - Xbox One">Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0; Xbox; Xbox One)</f12ua>
    <f12ua category="non-desktop" name="IE - Xbox 360">Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; Xbox)</f12ua>
    <f12ua category="other" name="Google Chrome">Mozilla/5.0 (Windows NT 6.2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36</f12ua>
    <f12ua category="other" name="Mozilla Firefox">Mozilla/5.0 (Windows NT 6.2; rv:12.0) Gecko/20100101 Firefox/23.0</f12ua>
    <f12ua category="other" name="Opera">Mozilla/5.0 (Windows NT 6.2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36 OPR/15.0.1147.153</f12ua>
    <f12ua category="other" name="Apple Safari (iPad)">Mozilla/5.0 (iPad; CPU OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5355d Safari/8536.25</f12ua>
    <f12ua category="other" name="Bing Bot">Mozilla/5.0 (compatible; bingbot/2.0; +http://www.bing.com/bingbot.htm)</f12ua>
    <domain docMode="EmulateIE7" versionVector="7" uaString="7" featureSwitch="overrideXUACompatible:false">example.com</domain>
    <domain docMode="EmulateIE7" versionVector="7" uaString="7" featureSwitch="requiresActiveX:true">example.com</domain>
    <domain docMode="IE9">example.com</domain>
    <domain featureSwitch="createElementWithMarkup:false">example.com</domain>
    <domain uaString="Firefox Token">example.com</domain>
    <domain>example.com
        <path docMode="EmulateIE10" versionVector="10" uaString="IE 10">/p</path>
    </domain>
    <domain>example.com
        <path uaString="IE 10">/Bugs</path>
    </domain>
    <domain>example.com</domain>
    <gpu vendorId="0x8086" deviceId="0x0046" startMatchInclusive="8.15.0010.2104" endMatchExclusive="8.15.0010.2142" umdFilename="igd10umd64.dll" />
    <gpu vendorId="0x8086" deviceId="0x2E93" startMatchInclusive="8.15.10.2202" endMatchExclusive="8.15.10.2203" Os="OS_Vista" />
    <gpu vendorId="0x8086" deviceId="0xA011" startMatchInclusive="8.14.10.1929" endMatchExclusive="8.14.10.2230" />
    <gpu vendorId="0x8086" deviceId="0xA011" subSysId="0x83ac1043" startMatchInclusive="8.14.10.2230" endMatchExclusive="8.14.10.2231" />
    <RequiresActiveX>
        <domain>example.com</domain>
    </RequiresActiveX>
    <GDITextMetrics>
        <domain exclude="true">example.com
            <path>/path/to/page</path>
        </domain>
    </GDITextMetrics>
    <NoFlash>
        <domain>example.com
            <platform>arm</platform>
        </domain>
        <domain>example.com</domain>
    </NoFlash>
    <BFCache>
        <domain>example.com</domain>
    </BFCache>
    <EnableUTF8QS>
        <domain>example.com</domain>
    </EnableUTF8QS>
    <NoPrerender>
    </NoPrerender>
    <EPMCompatMode>
        <domain>example.com</domain>
    </EPMCompatMode>
    <DisableEPMNotification>
        <domain>www.example.com</domain>
    </DisableEPMNotification>
</iecompatlistdescription>

おお…Internet Explorer 9のころからすごい変わってますね。基本的にはiecompatlistdescription要素の下にいろいろ並んでいる形になっています。

<ua id="IE 10">Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)</ua>

ua要素は下のほうで定義されている、このドメインではどのUser-Agentを装ってアクセスするかというもので使われるUser-Agentの定義です。Chrome 19とかFirefox 22とかありますね。

と思ったのですけど実際アクセスするとUser-Agentも変わっておらず使われている雰囲気がないので謎です。

<f12ua category="desktop" name="Internet Explorer 10">Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)</f12ua>

f12ua要素はF12開発者ツールでテスト用に偽装するためのUser-Agentのリストです。

category属性は desktop, non-desktop, other という値をとるようですがなんに使われているのか謎です(プロファイルが変わるわけではないみたい)。

ちなみにIE - Xbox Oneというのがありますね。Internet Explorer 10相当だということが見て取れます。

<domain docMode="EmulateIE7" versionVector="7" uaString="7" featureSwitch="overrideXUACompatible:false">example.com</domain>

domain要素でfeatureSwitch="overrideXUACompatible:false"というのがあるパターン。

overrideXUACompatible:falseというのが新しいです。みる感じこれはX-UA-Compatibleを無視するための指定のような気がします(あるいは逆かもしれない…)。

gpu要素

gpu要素はどうも互換性のないディスプレイドライバの列挙のような感じです。

その中にはベンダーID、バージョン(範囲)からファイル名といったものが指定されています。

<gpu vendorId="0x8086" deviceId="0x0046" startMatchInclusive="8.15.0010.2104" endMatchExclusive="8.15.0010.2142" umdFilename="igd10umd64.dll" />
    <gpu vendorId="0x8086" deviceId="0x2E93" startMatchInclusive="8.15.10.2202" endMatchExclusive="8.15.10.2203" Os="OS_Vista" />

GDITextMetrics要素

GDITextMetrics要素はたぶんInternet Explorer 9からのDirectWriteのテキストメトリクスGDI互換に戻す指定だと思われます。

NoFlash要素

NoFlash要素はFlashを動作させないようにする指定のようです。特にdomain要素にplatform要素があり、armと指定されていることからARMデバイスでFlashを動かしたくないというようなものがあるようです。

BFCache要素

BFCache要素は多分ですがBack Forward Cache、つまり戻るキャッシュの制御だと思われます。

戻るキャッシュというのはページで戻るボタンを押してもJavaScriptの状態が保持されていたりするアレです。それを無効にする(のか有効にするのか…)ための要素だと思われます。

EnableUTF8QS要素

EnableUTF8QS要素はEnable UTF-8 Query Stringの略で、多分クエリストリングをUTF-8にするかどうかの指定だと思います。が、これもまたここに指定があると有効なのか無効なのかは謎です。

NoPrerender要素

NoPrerender要素はプリレンダリングを無効にする指定のようです。つまりprerenderの対象として指定されているドメインのURLがあってもプリレンダリングしない、ということのような気がします。

EPMCompatMode要素

EPMCompatMode要素はEnhanced Protected Modeの互換モードってことのようですがよくわかりません。が、まあきっとEPM有効だと何か動かないサイトに対する指定だということは予想がつきます。

DisableEPMNotification要素

DisableEPMNotification要素はEPMの通知を無効にするってことでしょうか…割と謎です。しかもこれ、www.windowsphone.comしか指定がないという。

まとめ

互換表示リストもバージョンを負うことにだんだん複雑というか項目が増えてきてなかなか味わい深いですね。

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

Friday, December 06, 2013

Internet Explorerの環境依存トラブルの原因を探る 14:01 Internet Explorerの環境依存トラブルの原因を探る - ういはるかぜの化学 を含むブックマーク はてなブックマーク - Internet Explorerの環境依存トラブルの原因を探る - ういはるかぜの化学

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

ちょうど電話番号が載っているサイトをIE10で見ると真っ暗になったりフリーズする!? | 株式会社LIGというエントリがちょっと話題になっていました。どうも電話番号的な文字列が含まれているとハングアップするバグがある!!という話ですが、以下の理由からInternet Explorerのバグというより何らかの外的要因(環境依存)の予感がしています。

  • Internet Explorer 10には電話番号を認識する機能はない(Windows 8.111にはあります)
  • ごく単純なHTMLで止まってしまう(らしい)
  • ごく一部のコンピューターでのみで再現する(大多数は再現しない)
  • 「ドキュメントモードをIE7標準にすると電話番号が消える」

特に最後のは何かしらが電話番号的な文字列を探して加工しているような感じの挙動に見えます。

問題の出どころと試してみること

実際にブラウザに影響を与える外的要因となるのは以下のようなものがあるのでこのあたりを疑っていきます。

  • アドオン
    • ツールバー
    • Browser Helper Object(目に見えないブラウザ拡張)
  • 外部プロセスからの干渉
  • ディスプレイドライバ周り

問題は外的な要因によるものと仮定して原因を探るには以下のような方法があります。

  • アドオンをすべて無効にして起動する
  • Internet Explorerの設定をリセットする
  • GPUアクセラレーションをオフにしてみる
  • 別なユーザーなどで起動してみる等

例の問題はコンテンツのレンダリングによるものというよりはコンテンツそのものに干渉しようとした何かが問題となっている雰囲気があるのでGPUアクセラレーションをオフにするとかでは解決しない気がしますね。

アドオンをすべて無効にして起動する

まず最初に試してみるべきはアドオンを完全無効化した状態で起動してみることです。アドオンを無効にするにはアドオンの管理画面からぽちぽちやるのではなくInternet Explorerをアドオンなしモードで起動するのが漏れもなく簡単です。

Windows 7/Vista

スタートメニューでInternet Explorerを検索すると「Internet Explorer (アドオンなし)」という項目が見つかるのでそれで起動します。

Windows 8

ファイル名を指定して実行やコマンドプロンプトから iexplore.exe -extoff とオプションを指定して起動します。

f:id:mayuki:20131207135333p:image

※スクリーンショットはInternet Explorer 11

この状態ではInternet Explorerはアドオンが無効となっています。これで問題が発生するかどうかを確認します。

もし問題が発生しないのであれば問題の原因はアドオンにあることになるのでアドオンの管理から一つ一つしらみつぶししていくことになります。

Internet Explorerの設定をリセットする

アドオンを無効にしてもやはり問題が発生する、そんなときはInternet Explorerの設定をリセットします。リセットするとすべての設定はデフォルトに戻り、アドオンはすべて無効化されます。なおユーザーのデーター(お気に入りとかパスワードとか履歴とか)は残ります。

リセットはインターネットオプションの「詳細設定」から「リセット」をクリックすることで実行できます。

f:id:mayuki:20131207135500p:image

それでも問題が起こる…

ここまで来ると問題を見つけるのはかなり難しくなります。アドオン以外で怪しいものとすると、GPUや外部プロセスといったあたりになります。

GPUアクセラレーションをオフにする

色々なサイトでちょこちょこ固まったりクラッシュするという場合にはGPUアクセラレーションを疑ってみるのも解決になるかもしれません。

まずはドライバの更新がないか確認してみます。特にない場合にはGPUアクセラレーションをオフにするのを試してみます。

GPUアクセラレーションをオフにするにはインターネットオプションの詳細設定から「GPU レンダリングでなく、ソフトウェア レンダリングを使用する」のチェックを入れることでGPUを使わなくなります(当然パフォーマンスが落ちます)。なおチェックを付けられないときはそもそもGPUを利用していません。

f:id:mayuki:20131207135335p:image

それ以外で問題を引き起こすもの

外部のアプリケーションから干渉を受けている場合、なかなか問題の原因を見つけようにも見つけにくいので結構お手上げ状態になります。あのアプリが実はページの内容を見張っていた!とか探すのが難しいです。

それでもできるいくつかの試せることとして以下のようなものがあります。

  • 管理者として実行してみる
    • 管理者として実行することでInternet Explorerが昇格した状態になり、一般プロセスからの干渉を受けなくなります。ただし問題を引き起こしているプロセスが昇格していたりシステム権限だったりすると効果はありません。
  • 別なユーザーで起動してみる
    • 何らかのソフトウェアが影響を与えている場合には別なユーザーとして実行してみるのも手ではありますが、結局のところコンピュータに入っているものは同じなので全ユーザーで実行されていたらお手上げです。

この辺を試してちゃんと動くとすればそれはやはり外部から影響を受けているとみてよいでしょう。

まとめ

あの環境では起こるのに他のほとんどの環境では起こらないというときはまずInternet Explorerそのもののバグというよりは環境依存の問題のほうが高くなります。逆に大多数の環境で再現するのであればInternet Explorerのバグ、と考えても大丈夫だと思います。

またアドオンは知らないうちに仕込まれていたりするので一度無効にして起動してみるというのは覚えておいて損はないと思います。

おまけ: (超上級者向け)IEDiagCmd.exeでレポートを出して眺める

Program Files\Internet Explorerにiediagcmd.exeという実行ファイルがありまして、これを実行すると診断情報を詰め込んだIEDiag.cabというものを吐きだしてくれます。

この中にはアドオン情報などが入ったXMLやログファイルが詰め込まれているのですが、残念なことにビューアーがない(Platform Preview時代とかはあった)のでエクストリーム生XML閲覧となります。

誰かこれのビューアーを作ってくれないですかねー。

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

Thursday, December 05, 2013

Internet Explorerのちょっと便利な機能 03:45 Internet Explorerのちょっと便利な機能 - ういはるかぜの化学 を含むブックマーク はてなブックマーク - Internet Explorerのちょっと便利な機能 - ういはるかぜの化学

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

今日はInternet Explorerであまり知られてそうで知られていないちょっと便利に使える機能を紹介します。

クリップボードの文字列で検索する、URLを開く

Google ChromeなどではクリップボードにあるURLをアドレスバーに貼り付けるとともに移動ということができるのですが、デスクトップ用のInternet Explorerではアドレスバーに貼り付けて移動というのはなかったりします。

そのかわりクリップボードの内容で開くというメニューがコンテキストメニューとショートカットキーで用意されています。

f:id:mayuki:20131206033920p:image

URLまたは検索したい文字列をクリップボードにコピーした状態でコンテキストメニューを表示するとコピーしたアドレスに移動(コピーした文字列で検索)という項目が選べ、移動できます。また、Ctrl+Shift+Lを押すことでもその機能を発動できます。

ちなみにあえて「デスクトップ用の」と書いたのはいわゆる新しいUIInternet Explorerにはちゃんと貼り付けて移動が用意されているためです。

f:id:mayuki:20131206033921p:image

右クリックまたはタップアンドホールドするとコンテキストメニューが表示されて選択できます。

アクセラレーターを使う

デスクトップ版のInternet Explorerにはアクセラレーターと呼ばれる簡易的な拡張が用意されています。

例えば…

  • 選択した文字列を検索する
  • 選択した文字列を翻訳する
  • ページを送る

などなどがコンテキストメニューから実行できる便利ツールです。

f:id:mayuki:20131206033922p:image

これらを利用するには…

といった方法で追加することができます。他にもはてなブックマークのアクセラレーターもあったりするのでどうぞご利用ください。

実体は単なるHTMLが呼び出されるだけなので作ることができますので我こそはという方は作ってみるとよいのではないでしょうか。まあ新しいUIのほうでは動かないですけど…。

OpenService アクセラレータ開発者向けガイド

ActiveX フィルター

ActiveX フィルターという機能がInternet Explorer 9から追加されました。

これは何かというとActiveXを利用を許可しないようにする機能です。ActiveXつまりページ内プラグイン的なものを動作させたくないと思っている場合には役に立ちます。

例えば、Flashを見たくない(意図的に)、プラグインによる脆弱性が不安、何か変なプラグインがアクティブ化されてパフォーマンスが落ちるのが嫌などなどそういう時に使えます。

ActiveXフィルターはメニューのセーフティーの中にActiveX フィルターという項目があるのでそれを選択するだけとオン/オフは実に簡単です。

最近はFlashコンテンツも減ってきたのでActiveXフィルターオンで使っていて、どうしても必要な時だけ解除するという使い方でも結構いけるのでオススメです。

新しいセッション

「新しいセッション」は割と知られていない機能ですが、セッションCookieを引き継がず新しいウィンドウを開く機能です。

セッションCookieはブラウザが起動している間のみ有効なCookieで、例えばはてなにログインするときに「次回から入力を省略する」というチェックを外すとログイン状態はセッションCookieで保持され、ブラウザを閉じるとログアウトされた状態になります。

「新しいセッション」を実行するとセッションCookieを引き継がずに新しく開くことができるため、複数ログインに利用できたりといった使い方ができます。ただし永続的なCookieは引き継がれてしまうので使えないこともあります。

この機能はAltキーを押すことで表示されるファイルメニューから発動できます。

f:id:mayuki:20131206033923p:image

まとめ

というわけでメジャーなようなマイナーな機能を紹介してみました。ActiveXフィルターとかアクセラレーターはそれなりにオススメですし、コピーしたURLを開くのもわかりにくいですけど便利です。

時間がないので内容がだいぶ雑くなってるのではないかとかなんとか…。

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

Wednesday, December 04, 2013

modern.ieをつかう 01:50 modern.ieをつかう - ういはるかぜの化学 を含むブックマーク はてなブックマーク - modern.ieをつかう - ういはるかぜの化学

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

modern.ieというのはMicrosoftが運営しているモダンなInternet Explorerやほかのブラウザとの相互運用性を担保したモダンなWeb開発するための手助けをしてくれるサイトです。

このサイトでは技術文章的なコンテンツやリンク誘導以外に以下のようなコンテンツを提供しています。

  • Webページの互換性問題を診断するスキャナー
  • Internet Explorerの入った仮想マシンのイメージのダウンロード

Webページの互換性問題を診断するスキャナー

WebページのURLを入力するとWebページをスキャンしてブラウザ間での互換性問題やInternet Explorerの互換性の問題などをチェックして報告してくれるツールです。

コードスキャンのページから利用できます。

f:id:mayuki:20131205014602p:image:w640

URLを入力して実行すると問題となりそうなポイントを探り出して報告してくれます。また報告の中では理由と対処方法がかかれています。

f:id:mayuki:20131205014600p:image:w320 f:id:mayuki:20131205014601p:image:w320

ちなみにこのスキャナーはnode.jsで動くソースコードとして公開されているのでローカル環境でも利用できます(Apache Licenseです)。

https://github.com/InternetExplorer/modern.IE-static-code-scan

Internet Explorerの入った仮想マシンのイメージのダウンロード

Internet Explorerの入ったWindows仮想マシンのイメージをダウンロードして開発・テスト目的に利用することができます。なんと無料です。

http://www.modern.ie/ja/virtualization-tools#downloads

とくにすごいのがそのイメージの対応プラットフォームの数です。以下のバリエーションの通りWindowsのみならずMacLinuxでも使えるように各種イメージが用意されています。

さらにそれぞれイメージはOSInternet Explorerの組み合わせで用意されています(ものによってはなかったりしますが)。

開発時におおよそ必要そうなバリエーションがありますね。

この用意されたバージョンの中から必要なバージョンのイメージをダウンロードして普段使っている仮想化ソフトウェアで利用することで開発・テストすることができます。

まとめ

というわけでmodern.ieをちょっと紹介してみました。特にVMイメージのダウンロードはだいぶ捗るのでご存じない方は是非利用するとよいのではないかと思います。

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

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の簡易バージョンです。

Firebug Lite : Firebug

もしかしたら今では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