Clever Geek Handbook

Javascriptのデバッグ

デバッグロゴ



多くの人が私に同じ質問をします：

「この$％*！％$！のデビュー方法 JavaScript？」



まず、JavaScript-$％*！％$！ではありません そして、私はそれをどのようにデビューしましたか-今私は教えます。



（ 注 ：この記事はおそらく初心者向けです。したがって、厳密に判断しないでください）





それは思われる-しかし、私は何を言うことができますか？ まだ明らかです。 しかし、この質問はうらやましい頻度で私に尋ねられます。 はい、私は何か言いたいことがあります。



具体的な例を挙げて、解決方法を説明します。



ターゲットが見え、障害はありません



JavaScriptがエラーをダンプしましたか？ いいね！ いいえ、これは確かに悪いことですが、彼が何も言わなかった場合よりもずっと良いです（はい、それは起こります！）エラーの場合。



私たちの目標は、一体何が起こったのかを理解することですか？ しかし、最初に、 商業的な中断、叙情的な余談：主要なブラウザーでのデバッグのJavaScriptツール。



デバッガー



主なブラウザとそのデバッグツールは次のとおりです。



これらすべてのデバッグツールでは、ブレークポイントに関心があります。



デバッガーのスクリーションショトト1



そして、ここにいくつかの「グッズ」があります-条件付きブレークポイント（「ブレーク」を右クリック）：



デバッガーのスクリーションシットト2



つまり、グローバル変数を開始します（たとえば） allowBreakpoints



と "breaks"は、必要なときにのみ機能します。

残念ながら、それはどこでも動作しませんので、私は通常それを使用しません。



フローを「減速」する方法



debugger



キーワード。 コードでこれを見て、自尊心のあるJSデバッガーはJavaScriptフローを停止し、停止場所を示します



デバッガーキーワードスクリーンショットト1



以下で安全に使用できます。

また、コードに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のエントリポイントを見つけるのは難しいことです。 ここに私がそれをする方法があります：
  1. 最も重要なことは、開発ツールを理解することです 。 jQuery、ExtJS、Mootools、または独自のフレームワークのいずれであっても、ボタンの作成方法、イベントハンドラーの「ハング」方法、データがAJAXに到達する方法、グリッドに到達する方法、TinyMCE RTEの仕組み、方法、方法を理解する必要があります。方法...問題の理解がない場合、それはうまくいきません！
  2. デバッガーのInspectを使用します（Inspectがない場合-同じFirebug Liteを使用します）。
    1. 目的のHTML要素 （ボタンなど） を見つけます
    2. 意味のあるID （例：id =“ my-super-button”;およびid =“ ext-gen124”は適合しません）に最も近い要素を探します（ボタン自体、またはDIVの可能性があります）上記の4つのレベル）
  3. この意味のあるID'shnikの エントリをコードで探しています。
  4. 見つけた。 OK、 コードを注意深く読んで正しい場所を見つけます （ボタンクリックハンドラー、AJAXリクエストなど）
  5. 適切な場所のdebugger



    記述しdebugger



    。
    //

    if (allowBreakpoints == true )

    debugger;



    //

    debugger;



    * This source code was highlighted with Source Code Highlighter .



もちろん、この方法は完全ではありません。 それは間違いを与えることが起こります。 しかし、これは良い方法です。仕事で大いに役立ちます。



つまり、コード内で場所を見つけて、それを配置するということです。 ソースコードを変更したくない（または単に変更できない）場合は、 debugger



キーワードの代わりに、デバッグツールにブレーキポイントを設定できdebugger



。



例3



同じ場合：コードを作成する必要があります。 ボタンをクリックするか、AJAXデータをダウンロードした後に何が起こるか見てみましょう。 ただし、今回は、説明した理由によりJavaScriptフローを遅くすることはできません。



だから：
  1. 同じように適切な場所を探しています。
  2. 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つの例に注目することが重要です。



私の経験が誰かを助けることを願っています。


More articles:


All Articles