初心者のためのJavaScriptデバッグ
- 必要な知識： 基本的なJavaScript
- 必要なもの： Webブラウザ、次のいずれか：Google Chrome、Firefox（Firebug付き）またはOpera
- プロジェクト時間： 30分
過去5年間、主にjQueryやPrototypeなどのフレームワークの台頭のおかげで、 JavaScript Web上でスクリプトを作成するための第1層言語になりました。この人気の高まりと使いやすさにより、Gmailなどの本格的なアプリケーションが作成されました。このアプリケーションには、才能のある開発者のチームが作成する必要のある数千行のJavaScriptコードが含まれています。
ただし、この複雑さが増す結果、問題が発生した場合、開発者は問題の原因をすばやく突き止めて効率的に修正するために、強力なJavaScriptデバッグツールを必要とします。シンプルな どこ 経由でダンプ alert（） 対話はもはやそれをカットしません。
このチュートリアルでは、JavaScriptのデバッグの負担を軽減するために現在使用できる最新の開発者ツールの機能の概要を説明します。主にChromeデベロッパーツールとFirebugに焦点を当てますが、これらの機能の多くはOperaDragonflyなどの他のツールで利用できます。
- すべてのウェブデザイン記事を読む ここに
01.コンソール–概要
ほとんどの開発者ツールでは、あなたの親友は コンソール ;エラーログ、DOMの検査、JavaScriptのデバッグなどに利用される多目的パネル。ブラウザによっては、次のコマンドを使用していつでもこのパネルを簡単に起動できます。
- Chrome開発ツールとOperaDragonfly – Ctrl + Shift + I
- Firebug-F12
スクリプトのデバッグを支援するために、コンソールパネルには、実行中に発生したコード内のエラーが自動的に表示されます。各エラーの横にファイルと行番号が表示され、メッセージをクリックすると、インラインJavaScriptデバッグのためにその行にジャンプします。便利です。
これ以上alerts（）はありません–コンソールにデータを記録します
ただし、コンソールはエラーを受動的に表示するためだけのものではありません。また、を介して渡されたコマンドにも応答します。 APIコンソール そしてその コマンドラインAPI 。おそらく最もよく知られていて最も役立つツールは 。ログ（） コマンド。
任意の形式のコードを作成するときは、変数を検査するために変数の値を出力できると便利です。開発者が行った時代には、 alert（） 視覚的なプリントアウトを提供するための対話。
今日、より良い解決策は console.log 渡された値を次のようにコンソールパネルに出力するメソッド：
dquo;）; //コンソールパネルに「キャプテンのログ」を出力します
これを使用して、計算された変数の値を出力する場合があります。例えば：
関数calcPhotos（）{
total_photos_diff = total_photos-prev_total_photos;
//コンソールにログインします
console.log（total_photos_diff）;
}
の使用に対するこのアプローチの利点 alert（） 対話では、コードの実行は停止されないため、変数の結果を複数回出力して、介入を必要とせずに変化を監視できます。
var t = 3、
p = 1;
関数calcPhotos（total_photos、prev_total_photos）{
var total_photos_diff = total_photos-prev_total_photos;
//コンソールにログインします
console.log（total_photos_diff）;
//値を更新します
t = t * 1.3;
p = p * 1.1;
}
setInterval（function（）{
calcPhotos（t、p）;
}、100）;
02.識別可能なロギング
上記の例では、ループによって多くの変数がコンソールに記録されます。大量の変数がダンプされた場合、視覚的に圧倒されるまでの時間は簡単にわかります。
多くの人が標準のログ機能を知っていますが、コンソールに記録されているさまざまなタイプのデータを区別できる他のコンソールAPIコマンドがあることを知っておくと便利です。おそらくこれらの中で最も有用なものは次のとおりです。
console.info（） ：「情報」ログ呼び出しを示す視覚的な「情報」アイコンと色分け（青）を提供します。重要なことが起こったことを示すのに役立ちます
console.warn（） ：「警告」ログ呼び出しを示す視覚的な「警告」アイコンと色分け（黄色）を提供します。何かが許容範囲外になっているときにログに記録するのに便利です
console.error（） ：「エラー」ログ呼び出しを示す視覚的な「エラー」アイコンと色分け（赤）を提供します。強調表示する必要のあるエラー状態が発生したことを示すのに役立ちます
注：Chrome開発ツールは現在、さまざまな種類のログを視覚的に区別していません。
03.関連するログ呼び出しのグループ化
代替のロギング呼び出しを使用すると、コンソールに出力される情報を意味的および視覚的に区別でき、読みやすさが向上します。エラーメッセージを関連する呼び出しのブロックにグループ化することで、これをさらに改善したいと思うかもしれません。私たちはこれを使用して行うことができます console.group（） ：
//最初のグループ化を開始します
console.group（ '写真計算'）;
console.info（ '合計の差は' + total_photos_diff）;
console.log（total_photos_diff）;
console.groupEnd（）; //グループを終了します
// 2番目のグループ化を開始します
console.group（ '変数のインクリメント'）;
console.log（ '写真の総数は現在：' + t）;
console.log（ '前の合計写真は現在：' + p）;
console.groupEnd（）; //グループを終了します
これにより、コンソールにグループ化された出力が生成されます。視覚的表現はツールによって異なります。 OperaDragonflyでの外観は次のとおりです。
上記の例は、コンソールAPIで可能なことのほんの一部にすぎません。他にも便利なコマンドがたくさんあります。私は読むことをお勧めします Firebugの公式Wikiページ コマンドのリストについては、さまざまなツール間でのサポートが必ずしも普遍的であるとは限らないことに注意してください。
04.スクリプト実行の一時停止
コンソールへのログ記録は便利ですが、コードがすばやく実行され、複数の変数を追跡しようとすると、すぐに手に負えなくなる可能性があります。
作業を楽にするために、JavaScriptデバッグツールを使用して特定の時点でコードの実行を一時停止し、現在のコードステータスを自由に評価できます。最新の開発ツールでコードの実行を一時停止する最も一般的な方法は、 ブレークポイント 。
05.ブレークポイントの操作
ブレークポイントを設定するには、[スクリプト]タブに移動し、作業中のスクリプトをリストから選択します。次に、実行を一時停止する行を見つけ、マージンをクリックしてブレークポイントをアクティブにします。視覚的なインジケーターが表示されます。ここでページをリロードすると、指定した時点で実行が停止します。
実行を一時停止すると、カーソルを任意の変数に合わせることができ、デバッガーは現在の時点での値に関する情報をツールチップに表示します。
準備ができたら、次のいずれかを使用してコードの実行を続行することを選択できます。 実行制御ボタン 通常、サイドパネルの上部にあります。コードをステップスルーするために使用できるオプションは次のとおりです。
-
「続行」：別のブレークポイントが検出されるまでコードの実行を続行します。
- 「ステップオーバー」：コードを1行ずつステップ実行して、各行が更新される変数にどのように影響するかを確認できるようにします。コードが別の関数を呼び出す場合、JavaScriptデバッグはそのコードにジャンプしません。代わりに、「ステップオーバー」され、フォーカスは現在の機能のままになります。
- 「ステップイン」：ステップオーバーと同様ですが、関数呼び出しで「ステップイン」をクリックすると、デバッガーがその実行を関数定義の最初の行に移動します。
- 「ステップアウト」：「ステップイン」ボタンをクリックして関数定義にステップインした場合、「ステップアウト」ボタンをクリックすると、関数定義の残りの部分が実行され、デバッガーはその実行を親関数に移動します。
手順を進める際に、サイドパネルを使用して、ローカル、クロージャ、グローバルスコープ変数の更新など、コードの状態の変化を追跡できます。
06.条件付きブレークポイント
ブレークポイントはコードの実行を停止するため、特定の条件が満たされた場合にのみブレークポイントを起動することが望ましい場合があります。たとえば、コードで50ミリ秒ごとに起動するループを使用している場合は、反復ごとにデバッガーを停止したくないでしょう。これを回避するには、
条件付きブレークポイント 。
上記の例では、コードの実行は、 total_photos_diff 変数が200より大きいため、デバッガーでの余分なクリックが大幅に削減されます。条件付きブレークポイントをアクティブにするには、マージンのブレークポイントを右クリックし、[ブレークポイントの編集]を選択して条件付きブレークポイントダイアログを表示します。
07.コードからブレークポイントを設定する
開発ツールのインターフェースを使用してブレークポイントを設定することは、必ずしも便利であるとは限りません。
コードから直接デバッガーを起動する方が簡単な場合もあります。これは、debuggerキーワードを使用して実行できます。以下の例は、コード内の条件ステートメントを介してコードの実行を一時停止する方法を示しています。
if（total_photos_diff> 300）{
デバッガ; //デバッガーを起動し、実行を一時停止します
}
実行を一時停止する他の方法
開発者ツールは、ブレークポイントを手動で設定するだけでなく、さまざまなシナリオに応じてコードの実行を停止する多くの機会を提供します。
08.DOMミューテーションを破る
DOMミューテーションを処理するコードをデバッグする場合は、開発者ツールを使用すると、DOMノードが変更されたときにコードの実行を一時停止できます。
[要素]パネルを使用して、変更するノードを右クリックすると、DOMの変更時に中断するための一連のオプションが表示されます。再読み込みすると、次に要素が変更されたときにスクリプトの実行が停止します。
DOMブレークポイントサイドパネルを使用して、設定したブレークポイントを追跡できます。
09.すべての/キャッチされていない例外で一時停止します
ほとんどの開発ツールでは、例外が発生したときにスクリプトの実行を一時停止できます。 Chrome開発ツールでは、この機能は、インターフェースの最下行にある[一時停止]アイコンを使用して切り替えることができます。
すべての例外で中断するか、スクリプトで処理されない例外で中断するかを選択できます。以下の例は、キャッチされていない例外と「キャッチされた」（try / catchを介して処理される）例外を示しています。
var t = 3、
p = 1;
関数calcPhotos（total_photos、prev_total_photos）{
var total_photos_diff = total_photos-prev_total_photos;
//最初のグループ化を開始します
console.info（ '合計の差は' + total_photos_diff）;
//値を更新します
t = t + 5;
p = p + 1;
//キャッチされない例外-一時停止します
if（total_photos_diff> 300）{
0をスローします。
}
//例外はtry / catchを介してキャッチされます
//「すべての期待値で一時停止」がアクティブな場合にのみ一時停止します
if（total_photos_diff> 200）{
{を試してください
$$（ '＃nonexistent-element'）。hide（）;
} catch（e）{
console.error（e）;
}
}
}
setInterval（function（）{
calcPhotos（t、p）;
}、50）;
10.コールスタックの概要
スクリプトでエラーが発生した場合、例外で一時停止すると、エラーがスローされたコード内のポイントで実行が停止します。ただし、エラーの原因が明らかでない場合はどうなりますか？エラーが発生した原因は何ですか？この情報をどのように発見しますか？
スクリプトの実行を停止すると、ツールインターフェイスの右側にあるパネルに、豊富な有用な情報が表示されます。その中で最も価値のあるものは、おそらくコールスタックです。
呼び出しスタックは、コードが一時停止されたポイントに至るまでの完全な実行パスを示し、エラーの原因となったコードフローの鳥瞰図を提供します。
以下の例では、意図的にエラーをスローしました 増分値（） デバッガーを起動した関数。開発者ツールは、エラーの原因となった完全な呼び出しスタックを表示します。これにより、コードフローをさかのぼって、潜在的な問題を特定できます。
11.参考資料とリソース
上記の例で、JavaScriptのデバッグを少し簡単にするために、自由に使用できるいくつかのメソッドの概要が提供されていることを願っています。
ただし、この記事では、達成できることのほんの一部について概説します。詳細については、開発者ツールの真の力を実際に理解するために、次のリソースを使用することを強くお勧めします。
- Firebug Wiki ：Firebugはオリジナルの「開発者ツール」であり、そのWikiには利用可能なさまざまなAPIとツールに関する豊富な情報があります。
- Chromeデベロッパーツールのドキュメント ：Chrome開発ツールのドキュメントには、ツールを最大限に活用するための豊富な情報が記載されています。最も経験豊富な人でさえ、ここで何かを学ぶでしょう。
- ビデオ：「 Chrome開発ツールがリロードされました 」：Google I / O 2011で撮影された、PaulIrishとPavelFeldmanが、Chrome開発ツールの機能の優れた概要を説明しています。必見！
- Opera DragonflyDebuggerのドキュメント ：Operaを日常的に使用しない場合でも、ドキュメントに記載されている概念はほとんどの開発者ツールに適用できます。
- Chrome開発ツールのチートシート ：Chrome開発ツールを操作するための便利なプリントアウト。
これが好きですか？これらを読んでください！
- 方法 アプリを作成する
- 自由 グラフィティフォント 選択
- イラストレーターチュートリアル ：今日試すべき素晴らしいアイデア！
- を設計するための究極のガイド 最高のロゴ
- 最高の無料 Webフォント デザイナー向け
- 便利で刺激的 チラシテンプレート
- 最高の 3D映画 2013年
- 次のことを発見する 拡張現実
