多くの人が私に同じ質問をします：
「この$％*！％$！のデビュー方法 JavaScript？」
まず、JavaScript-$％*！％$！ではありません そして、私はそれをどのようにデビューしましたか-今私は教えます。
（
注 ：この記事はおそらく初心者向けです。したがって、厳密に判断しないでください）
それは思われる-しかし、私は何を言うことができますか？ まだ明らかです。 しかし、この質問はうらやましい頻度で私に尋ねられます。 はい、私は何か言いたいことがあります。
具体的な例を挙げて、解決方法を説明します。
ターゲットが見え、障害はありません
JavaScriptがエラーをダンプしましたか？ いいね！ いいえ、これは確かに悪いことですが、彼が何も言わなかった場合よりもずっと良いです（はい、それは起こります！）エラーの場合。
私たちの目標は、一体何が起こったのかを理解することですか？ しかし、最初に、
商業的な中断、叙情的な余談：主要なブラウザーでのデバッグのJavaScriptツール。
デバッガー
主なブラウザとそのデバッグツールは次のとおりです。
これらすべてのデバッグツールでは、ブレークポイントに関心があります。
そして、ここにいくつかの「グッズ」があります-条件付きブレークポイント（「ブレーク」を右クリック）：
つまり、グローバル変数を開始します（たとえば）
allowBreakpointsと "breaks"は、必要なときにのみ機能します。
残念ながら、それはどこでも動作しませんので、私は通常それを使用しません。
フローを「減速」する方法
debuggerキーワード。 コードでこれを見て、自尊心のあるJSデバッガーはJavaScriptフローを停止し、停止場所を示します
以下で安全に使用できます。
Firebugが有効なFirefox
サファリ、 
オープン/有効化されたWebインスペクター/スクリプトパネルを備えたChrome
開発者ツールが開いている/有効になっているInternet Explorer 8- スクリプトデバッガーがインストールされたInternet Explorer <= 7
Dragonflyが開いている/オンのOpera
また、コードに
debuggerを書くことを恐れないでください-どこでもエラーを引き起こしません。
そして、ここに条件付き停止オプションがあります：
if (allowBreakpoints == true )
debugger;
* This source code was highlighted with Source Code Highlighter .
「休憩」を置くことよりもずっと好きです。これは、コードを書いて実際に2箇所ではなく1箇所でデビューする方法です。
警告によるデバッグ（）
これは最も情報が少ないデバッグであり、JavaScriptストリームも停止します。 また、ブラウザに関してモーダルです。 存在すら忘れてください。
ブレークポイント機能
考慮されるオプションはすべて、JavaScriptの流れを抑制します。 これは
悪いです！なんで？ スクリプトが停止した時点で、AJAXリクエストまたはタイムアウトを起動した場合、応答に戻る時間がありませんでした-戻ってこない可能性があります。 同意して、現代のWebプロジェクトでは、この良さで十分です。 したがって、スクリプトの「緊急停止」の時点で、これ以上適切にデバッグすることはできなくなります-ロジックの一部は回復不能に失われます。
したがって、実際には停止を伴うデバッグを避けようとします。
「ブレークポイントを使用してJavaScriptをデバッグするのはまずいですよね？」©Mr. マッキーサウスパーク
ただし 、ブレークポイントはブレークポイントであり、非常に実行中のバグを調査する場合、停止せずに実行することはできません（現在の変数などを監視する必要があります）
適切なデバッグ
要するに、良いデバッグはロギングを通してです。 だから私は基本的に仕事をしています-適切な場所で適切な時間に
console.log(...)起動します。
はい、
console.logについて-私が覚えている限りでは、Firebugで初めてこの方法で世界が見られました。 これは、IE6で機能するという標準でも事実でもありません。 ただし、最新のブラウザでは
console.logまったく同じロギングが導入され
console.log 。 これはメモです。 そして、
console.log(...)コードが実稼働に入ると、警告が発せられ、壊れる可能性があります！ そのため、すべての消防士と同じように、コードで
consoleオブジェクトを再定義する価値があります。
ターゲットのブラウザに
console.logがないが、
Firebug Liteまたは
Blackbirdを試してみたい場合は、それが好きかもしれません;）
例1
JavaScriptがエラーを示しました。 何を理解する必要があります。
デバッガーでエラー時ブレークモードをオンにします。
エラーを再度再現します。 JavaScriptが停止します。 エラーの場所を確認し、監視を行い、問題を正確に判断します。
例2
事例：JavaScriptはエラーを表示しませんでした。 しかし、あなたは彼女が何であるかを知っています（ゴーファーのように）。 はい、これは時々起こります。
事例：いくつかのコードを作成するだけです。 ボタンをクリックするか、AJAXデータをダウンロードした後に何が起こるか見てみましょう。
それはもっと複雑です-どこから始めればよいかを見つける必要があります。
ちょっとした芸術
JavaScriptのエントリポイントを見つけるのは難しいことです。 ここに私がそれをする方法があります：
- 最も重要なことは、開発ツールを理解することです 。 jQuery、ExtJS、Mootools、または独自のフレームワークのいずれであっても、ボタンの作成方法、イベントハンドラーの「ハング」方法、データがAJAXに到達する方法、グリッドに到達する方法、TinyMCE RTEの仕組み、方法、方法を理解する必要があります。方法...問題の理解がない場合、それはうまくいきません！
- デバッガーのInspectを使用します（Inspectがない場合-同じFirebug Liteを使用します）。
- 目的のHTML要素 （ボタンなど） を見つけます
- 意味のあるID （例：id =“ my-super-button”;およびid =“ ext-gen124”は適合しません）に最も近い要素を探します（ボタン自体、またはDIVの可能性があります）上記の4つのレベル）
- この意味のあるID'shnikの エントリをコードで探しています。
- 見つけた。 OK、 コードを注意深く読んで正しい場所を見つけます （ボタンクリックハンドラー、AJAXリクエストなど）
- 適切な場所の
debugger記述しdebugger 。//
if (allowBreakpoints == true )
debugger;
//
debugger;
* This source code was highlighted with Source Code Highlighter .
もちろん、この方法は完全ではありません。 それは間違いを与えることが起こります。 しかし、これは良い方法です。仕事で大いに役立ちます。
つまり、コード内で場所を見つけて、それを配置するということです。 ソースコードを変更したくない（または単に変更できない）場合は、
debuggerキーワードの代わりに、デバッグツールにブレーキポイントを設定でき
debugger 。
例3
同じ場合：コードを作成する必要があります。 ボタンをクリックするか、AJAXデータをダウンロードした後に何が起こるか見てみましょう。 ただし、今回は、説明した理由によりJavaScriptフローを遅くすることはできません。
だから：
- 同じように適切な場所を探しています。
debugger代わりにconsole.log(variable_to_watch)を書き込みconsole.log(variable_to_watch)
ここには興味深いアップグレードがあります。
ケースウノ
variable_to_watchコンソールへの出力以降に変更されたオブジェクト。 そして、私は電話の時の彼の状態を見たいです。
ここでは、
console.log(variable_to_watch)ではなく、
console.dir (variable_to_watch)を使用する必要があります
console.log(variable_to_watch)ケースデュオ
variable_to_watchの現在の値を見るだけでなく、実験する必要もあり
variable_to_watch （たとえば、そのメソッドを呼び出したい場合）：
// obj
if (debugEnabled)
console.log(window.temp_var = obj);
* This source code was highlighted with Source Code Highlighter .
したがって、コンソールに出力が表示されるだけでなく、グローバルリンク
window.temp_varを介してオブジェクトにアクセスできます。
Firebug-> Consoleを開き、メソッド
temp_var.objMethod()を呼び出します。
コンソールなし？ アドレスバーに書き込みます：
javascript:alert(temp_var.objMethod()); void 0; javascript:alert(temp_var.objMethod()); void 0;例4
別の例。 おそらく少し奇妙です。 3d-party-frameworkメソッド（ExtJSなど）を作成したいのですが、問題は-JavaScriptの速度を落とすことができず、ソースコードにアクセスできないことです（奇妙な例ですか？:)
どうする？ 私はこれが好きです：
パッチ
my-ext-patch.jsを使用してファイルを作成し、
ext-all.jsの 後に添付し
ます内部では次のように書きます：
( function () {
var _backup = Ext.form.Form.render; // . -- ;)
Ext.form.Form.render = function (container) { // Wrap'
//
console.log(container);
// :
// console.dir(container);
// console.log(window.t = container);
// debugger;
//
return _backup.apply( this , arguments);
}
})();
* This source code was highlighted with Source Code Highlighter .
倒錯？ おそらく。 しかし、私は好き>>）
エピローグ
これは、
「this $％*！％$！」 JavaScriptをデバッグする方法です。 最初の3つの例に注目することが重要です。
私の経験が誰かを助けることを願っています。