Hebikuzure's Tech Memo

2009年4月19日

三つの異なった視点からのスクリプト エラーのハンドリング

Filed under: Internet Explorer — hebikuzure @ 10:22 PM

Handling script errors from three different perspectives
http://blogs.msdn.com/ie/archive/2009/04/08/handling-script-errors-from-three-different-perspectives.aspx


引き続き IE Blog からの試訳です。

以下の文章は IE Blog の 4/8 の記事 Handling script errors from three different perspectives を hebikuzure が私的に試訳したものです。翻訳については Microsoft Corporation およびマイクロソフト株式会社とは無関係に hebikuzure が公開情報に基づき独自に行ったものであり、この文書の内容についての文責は公開者である hebikuzure にあります。翻訳の内容および技術的内容については正確を期すよう十分な注意を払っておりますが、誤りや不正確な部分が含まれている可能性がありますので、本文書を利用される際には原文も併せてご確認ください。


三つの異なった視点からのスクリプト エラーのハンドリング

過去数か月の間、さまざまな種類の Web サイトの互換性問題の診断を助力する事に無類の楽しみを感じていました。さて私は今、Web サイトの問題のデバッグを “無類の楽しみ” と呼びましたが、なぜでしょう。それは IE8 の拡張されたスクリプト エラー ダイアログと開発者ツールが使えるからです! スクリプト エラーは、しばしばページ レイアウト上での多くの視覚的な相違の原因となる、Web サイトの互換性の問題の中でも最も一般的な問題だと分かりました。こうしたエラーは沢山の疑問を引き起こします。スクリプト エラーの起きるページはどのように直せるのか? スクリプト エラーが発生したページに対してどうすれば有効なフィードバックができるのか? また開発者であれば、スクリプト エラーの解決に IE8 に組み込まれた開発者ツールをどう役立てるのか?

この投稿ではスクリプト エラーの生じるページに遭遇した際の三つのシナリオを示し、それぞれのシナリオで IE8 で達成された強化について明らかにし、そうした強化機能をどのように利用するのかを説明します。

“Web をぶらつく

最初のシナリオでは、あなたは JavaScript や HTML、その他の Web を構成する要素であるテクノロジーについて何も知らないと仮定しましょう。あるサイトを訪れて、なんだかうまく動作していないと思います; Web サイト上に表示されているものが変に見えるのかもしれません。さらにステータス バーに小さな “警告” アイコンが表示されている事にも気付きました。さてどうすればよいでしょう。

まず、Web ブラウザーの利用者のおおよそ 99% がこのシナリオのユーザーに該当すると念頭に置く事が重要です。この点は忘れてしまいがちです。こうした人々は Web が “ちゃんと動く” 事を望んでいます。ユーザーへの調査研究やテレメトリー データから、Web サイトでの問題に遭遇したユーザーの多くが更新ボタンを押して問題を解決しようとしています (更新によってネットワーク接続の遅さによって生じる一般的な問題、たとえばスタイル シートや依存しているスクリプトのタイムアウトあるいは不完全なダウンロードのためにページが正しく表示されないといった問題を解決できるからでしょう) 。Internet Explorer 8 の標準モードは Web 標準に準拠するための変更が加えられているので、このモードで表示されるサイトでもっとも多く互換性の問題が生じると私たちは予測しています。そのためユーザーが互換表示ボタンに気づきやすいよう、更新ボタンの隣に表示しています。互換表示ボタンはユーザーが直面した問題を解決できるでしょう。

まとめ

  • 互換表示: IE8 のレンダリング エンジン (と DOM) を以前のバージョンのブラウザー (例えば IE7) と互換性のあるレガシー モードに切り替えます

お役に立てますか?”

二番目のシナリオでは、問題のため作業を完了できず、企業 Web ポータルのカスタマー サポート担当者と電話やオンライン チャットで話しています。サポート担当者は、問題が既知のものであるかどうかなど、問題に関連した詳細情報を収集しようとします。さてあなたは何をすればよいでしょう?

多くの Web サイトではスクリプト エラーが発生しても (“作業” の定義にもよりますが) 作業を続けられます。とは言え場合によっては、スクリプト エラーによって作業を進める事ができない場合もあります。Internet Explorer では控えめなユーザー インターフェイスで Web サイトに問題が生じた事を知らせています。IE8 では、以前のバージョンのブラウザーと同様、ステータス バーでキャッチされないエラーが発生した事を通知しています (エラーがキャッチされないという事は、Web サイトにエラー状態を停止するためのエラー ハンドラーや try/catch コードが無い事を意味していまいす) 。ページ上のスクリプト エラーについての追加情報を確認する方法は、アイコンをダブルクリックするだけです。

IE8 では、スクリプト エラー ダイアログの見た目を更新しました (下図で IE7 と IE8 を比較してください) 。これでダイアログが読みやすくなり、複数のスクリプト エラーの場合でもシンプルに表示されるようになりました。また利用者の第一番の要望に耳を傾け、ダイアログでの コピー/ペーストをサポートしました。これにより、ダイアログが拡張表示されている場合もそうでない場合も Ctrl+C でエラーの全体がクリップボードにコピーできます。また個々のエラーを選択する事で同じように一つずつコピーできます。コピーをする際に SHIFT を押す事で XML 形式で出力する事もサポートされています。

スクリプト エラー ダイアログからコピーした情報をフィードバックに利用する事で、Web サイトやサポート担当者は素早くエラーを診断でき、サイト訪問者全体に対するユーザビリティーを向上できます。

まとめ

  • スクリプト エラー ダイアログは分かりやすい表示になりました (読みやすく理解しやすく、かつ文字数を少なくしました)
  • リスト表示により複数のスクリプト エラーを見つけやすくしました
  • コピー/ペーストをサポートしました (Ctrl+C キーボード ショートカットまたは “エラーの詳細のコピー” ボタンが利用できます)

コードを噛み砕きバグを退治する

IE blog の読者の多くは Web 開発者でしょうから、最後のシナリオは皆さんが本家の領域でしょう。あなたは自分自身のページの制作者か、または他の人が書いたコードについて一通りの十分な理解があるとしましょう。新しい Web サイトの構築を開始したら、スクリプト エラーに見舞われました。IE8 はこんな時に役立ちます。

Internet Explorer 8 の主要な強化点について説明するため、次の外部リソースでホストされたスクリプト (ごく一般的なデザイン パターンです) を使っている Web ページの例について検討しましょう。主要なドキュメント (index.html) は以下の内容を含んでいます:

1: <!DOCTYPE html>
2: <html>
3: 	<head>
4: 		<title>Getting started</title>
5: 	</head>
6: 	<body onload="begin()">
7: 		<script type="text/javascript" src="external.js"></script>
8: 	</body>
9: </html>

外部スクリプト “external.js” のソースは以下の通りです:

1: /* external.js */
2: function begin()
3: {
4: var oDiv = documnt.createElement('DIV');
5: }

IE8 では長く存在していたバグを修正し、エラー発生時の正しいファイル名と行番号が報告されるようにしました:

Web 開発者は多くの場合、スクリプト エラーに関する問題についてさらにいくらかのコンテキスト情報を必要とします。スクリプト エラー ダイアログはその第一歩ですが、組み込みの開発者ツールは開発者の真の必需品です; IE8 で F12 を押すだけで起動できます。スクリプト エラーのデバッグを行う場合、このツールのスクリプト タブで多くの作業をする事になるでしょう:

IE8 に組み込まれたスクリプト デバッガーでもそれ以外にインストールしているスクリプト デバッガーでも、作業がしやすいようにしました。既定ではパフォーマンスに悪影響を与えないよう、スクリプト デバッガーは無効になっています。そのためまずデバッグを有効にする必要があります。IE8 では、デバッグを有効にするためにインターネット オプションのコントロールパネルを探しまわる (そして後で無効に戻すのを忘れてしまうかもしれません) 必要はありません。その代わり、“デバッグ開始” ボタンを押すだけでプロセスでのデバッグが有効になります (プロセスが終了するまでこの設定が有効です) 。開発者ツールにあるデバッグの開始/停止ボタンはコントロール パネルの構成である IE 全体のスクリプト デバッグの設定には影響しません。“エラー時にブレーク” ボタン (赤い X 印の付いた一時停止ボタン) が既定で有効になっており、デバッガーは即座に問題をキャッチし、ツール内のソース表示でエラーの発生箇所を正確に示します (上掲のスクリーンショットを参照してください) 。

デバッグが有効であると、すべてのスクリプト エラーは自動的にコンソール ウィンドウに伝達されます。エラー メッセージの右側の位置情報をクリックするだけで、それぞれのエラーがソース コードのどのコンテキストで発生したのか確認できます。さらに実行コンテキストのコール スタック (グローバルな “onload” ハンドラーとして呼ばれた後の “begin” ファンクション) の確認、ローカル変数の検査、式のウォッチし、コードのステップ実行などのデバッガーに期待されている基本的な動作を行う事ができます。開発者ツールでは現在のページのために読み込まれているすべてのスクリプトとソースを素早く切り替える方法も提供しています。詳細な情報は Jscript のデバッグについてのドキュメント でご確認ください。

私がスクリプト タブでの作業中に見つけたかなり便利な秘訣を三つ紹介しましょう。

すべてブレーク – “すべてブレーク” ボタン (“エラー時にブレーク” ボタンの左隣の一時停止ボタン) は次にどんなスクリプトが実行されても、スクリプトの実行を一時停止します。単純なページでは、この機能は非常に便利です。例えば、begin ファンクションが実際には ‘onload’ ではなく ‘onclick’ から呼ばれていると仮定しましょう。デバッガーを動作させ、“すべてブレーク” ボタンを押すと、デバッグ対象としたい実行経路を呼び出している部分を特定できます — この場合では、body 要素をクリックすると、その時点からの JavaScript の実行をトレースできます。ただしこの方法は、スクリプトがタイマーによって呼ばれる場合もあるので常にうまくいく訳ではありません。そうしたシナリオの場合、ファンクションを見つけるために検索ボックスを使い、明示的なブレークポイントを設定します。

右クリックしてウォッチ式を追加 – 特定の変数を観察したい場合、ソース ウィンドウで変数を見つけて右クリックし、“ウォッチ式の追加” を選択します。このテクニックは変数のみ捕捉し、ウォッチ ウィンドウに変数とその値、種類を格納します。式全体を追加するには式を選択して右クリックし、“ウォッチ式の追加” を選択します。

コンソール ウィンドウ – デバッガーが一時停止した際、多くの場合に私はコンソール ウィンドウを使って調査のため変数の照会を何度か試してみます。コンソール ウィンドウを十分活用するには、コンソール ロギングの利用を検討すべきです。コンソール ロギングは alert() のようなデバッグ手法より好ましい、非同期的な代替手法です。console.log() は alert() と同様の機能を提供しますが、モーダル ウィンドウを作成しません (そのためフォーカスの移動も生じません) 。コンソール オブジェクトは異なるロギング レベルを提供します: 上の図のようなログ、情報、警告、エラーです。

外部スクリプト デバッガー

Visual Studio 2008 のような外部スクリプト デバッガーを IE8 の中で使いたい場合は、コントロール パネルで IE のスクリプト デバッグを有効にする必要があります。この設定をすると、Internet Explorer でスクリプト エラーが発生した際に IE8 に組み込まれた開発者ツールを使うかそれ以外のデバッガーを使うか選択する画面が表示されます:

また Visual Studio 2008 からデバッグ目的で IE8 を起動した場合は、手動で切り替えなくてもプロセス単位のデバッグが自動的に有効になります。

全体として、IE8 は最上の開発者用ツールを一通り備えていますが、この記事ではスクリプト タブで利用できる機能について説明しただけです。プロファイリング、HTML と CSS の検査と編集、レイアウトについてのトラブルシュートなどその他の多くの機能が IE8 に組み込まれ利用可能になっています。開発者ツールによって、Web 開発者はスクリプト エラーのトラブルシュートと問題の修正に必要なツールを手に入れたのです。

まとめ

  • スクリプト エラー報告で正確な行/ファイル情報が表示されます
  • 開発者ツールによって、タブごとのデバッグか自動的に有効になります
  • IE8 開発者ツールにはフル機能のスクリプト デバッガーが組み込まれています

IE8 では、エンド ユーザーにとっても Web 開発者にとってもスクリプト エラーのハンドリングは容易になりました。私たちと同様に、このツールを活用してください。

Travis Leithead
プログラム マネージャー


広告

コメントする »

まだコメントはありません。

RSS feed for comments on this post. TrackBack URI

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

WordPress.com で無料サイトやブログを作成.

%d人のブロガーが「いいね」をつけました。