JavaScriptコードをデバッグするにはどうすればよいですか？[閉まっている]
回答:
Firebugは、この目的のための最も人気のあるツールの1つです。
最近のすべてのブラウザには、なんらかの形式のJavaScriptデバッグアプリケーションが組み込まれています。これらの詳細については、関連するテクノロジーのWebページで説明します。JavaScriptのデバッグに関する私の個人的な好みはFirebugです、Firefoxのです。Firebugが他より優れていると言っているのではありません。それはあなたの個人的な好みに依存し、おそらくあなたはとにかくすべてのブラウザであなたのサイトをテストするべきです（私の個人的な最初の選択肢は常にFirebugです）。
Firebugを例にして、以下の高レベルのソリューションのいくつかを取り上げます。
Firefox
Firefoxには独自のJavaScriptデバッグツールが付属していますが、Firebugアドオンをインストールすることをお勧めします。これは、便利な基本バージョンに基づいていくつかの追加機能を提供します。ここではFirebugについてのみ説明します。
Firebugをインストールすると、以下のようにアクセスできます。
まず、要素を右クリックすると、Firebugで要素を検査できます。
これをクリックすると、ブラウザの下部にFirebugペインが開きます。
Firebugにはいくつかの機能がありますが、私たちが興味を持っているのはスクリプトタブです。スクリプトタブをクリックすると、次のウィンドウが開きます。
明らかに、デバッグするにはreloadをクリックする必要があります：
これで、追加することができますブレークポイントをあなたにブレークポイントを追加するJavaScriptコードの部分の左側に行をクリックすることで：
ブレークポイントに到達すると、以下のようになります。
また、ウォッチ変数を追加して、一般的に最新のデバッグツールで期待されるすべてのことを実行できます。
Firebugで提供されるさまざまなオプションの詳細については、Firebug FAQを確認してください。
クロム
Chromeには、組み込みのJavaScriptデバッグオプションもあります。これは、右クリック、要素の検査など、非常によく似た方法で機能します。見ていChromeデベロッパーツールを。Chrome のスタックトレースは通常、Firebugよりも優れています。
インターネットエクスプローラ
.NETで開発しており、Web開発環境を使用してVisual Studioを使用している場合は、ブレークポイントなどを配置してJavaScriptコードを直接デバッグできます。JavaScriptコードは、C＃またはVB.NETコードをデバッグしている場合とまったく同じように見えます。
これがない場合、Internet Explorerは上記のすべてのツールも提供します。面倒なことに、ChromeまたはFirefoxの要素機能を右クリックして検査する代わりに、F12キーを押して開発者ツールにアクセスします。この質問はほとんどのポイントをカバーしています。
- Internet Explorer 8（開発者ツール- F12）。それ以外はInternet Explorerで2番目の割合です
- FirefoxおよびFirebug。ヒットF12して表示します。
- Safari（メニューバーを表示、設定 -> 詳細 -> 現像メニューバーを表示）
- Google Chrome JavaScriptコンソール（F12または（Ctrl+ Shift+ J））。ほとんどのブラウザはSafariと同じですが、Safariの方がIMHOの方が優れています。
- Opera（ツール -> 詳細設定 -> 開発者ツール）
JavaScriptコードには、JavaScriptコードをデバッグするためのデバッガキーワードがあります。デバッガを置く; JavaScriptコードのスニペット。その時点で、JavaScriptコードのデバッグが自動的に開始されます。
例えば：
これがあなたのtest.jsファイルだとしましょう
function func(){
//Some stuff
debugger; //Debugging is automatically started from here
//Some stuff
}
func();- ブラウザーがデバッガーを有効にして開発者オプションでWebページを実行すると、ブラウザーはデバッガーから自動的にデバッグを開始します。ポイント。
- ブラウザーで開発者ウィンドウを開く必要があります。
私は古い良いprintfアプローチ（いつでもうまくいく古代の技術）を使用しています。
魔法に見える%o：
console.log("this is %o, event is %o, host is %s", this, e, location.host);%oクリック可能で詳細に閲覧できる、見栄えよく印刷された JSオブジェクトのコンテンツをダンプします。%s記録のためだけに表示されました。
この：
console.log("%s", new Error().stack);new Error()呼び出しポイント（ファイルへのパスと行番号を含む）までのJavaのようなスタックトレースを提供します !!）。
両方%oとnew Error().stack ChromeとFirefoxで利用できます。
このような強力なツールを使用すると、JSで問題が発生していることを想定し、デバッグ出力を配置します（ラップインを忘れないでください ifデータ量を減らすためステートメントをことを）、想定を確認します。問題を修正するか、新しい仮定を行うか、ビットの問題にデバッグ出力を追加します。
また、スタックトレースを使用する場合：
console.trace();言うように コンソール
ハッキングハッピー！
FirebugとIEデバッガから始めます。
ただし、JavaScriptのデバッガには注意してください。たまに、デバッグしようとしているエラーのいくつかを引き起こすのに十分なだけ環境に影響を及ぼします。
例：
Internet Explorerの場合、それは一般に緩やかな減速であり、一種のメモリリークタイプの取り決めです。30分後、再起動する必要があります。かなり規則正しいようです。
Firebugの場合、おそらく1年以上経過しているため、古いバージョンであった可能性があります。その結果、具体的なことは覚えていませんが、基本的にコードは正しく実行されておらず、しばらくデバッグを試みた後、Firebugを無効にするとコードは正常に機能しました。
がalert(msg);、それらの中に作品のシナリオ「私はちょうどに行くいただきました！を見つけたい」... あらゆる開発者が、あなたがから抜け出すことができない（非常に大きいまたは無限）ループで終わるような場合が発生しました。
開発中に非常に面倒なデバッグオプションが必要な場合は、ブレークアウトできるデバッグオプションを使用することを推奨します。（PS Opera、Safari？、Chrome？すべてのネイティブダイアログで利用可能です）
//global flag
_debug = true;
function debug(msg){
if(_debug){
if(!confirm(msg + '\n\nPress Cancel to stop debugging.')){
_debug = false;
}
}
}もし上記押すとポップアップデバッグの大きなループの中にあなたの自己を得ることができるとEnter/ Okあなたはそれぞれのメッセージを介してジャンプすることができますが、押しEscape/ Cancelあなたがうまく抜け出すことができます。
Internet Explorer 8が登場するまでは、以前はFirebugを使用していました。私はInternet Explorerの大ファンではありませんが、組み込みの開発者ツール（本当に優れたデバッガーが含まれています）で少し時間を費やした後、他のものを使用しても意味がないようです。私はMicrosoftに私の帽子を向ける必要があります。彼らはこのツールで素晴らしい仕事をしました。
YUI Loggerもチェックしてみてください。それを使用するためにあなたがしなければならないすべてはあなたのHTMLにいくつかのタグを含めることです。これは、Firebugに役立つ追加機能であり、多かれ少なかれ必須です。
Visual StudioのJavaScriptデバッガーを使用する以外に、ページに含める独自のシンプルなパネルを作成しました。Visual Studioのイミディエイトウィンドウに似ています。変数の値を変更したり、関数を呼び出したり、変数の値を確認したりできます。テキストフィールドに書かれたコードを評価するだけです。
FireBugとブラウザネイティブの開発者向け拡張機能に加えて、JetBrains WebStorm IDEには、FirefoxとChrome（拡張機能が必要）のリモートデバッグサポートが組み込まれています。
以下もサポートします：
これを無料でテストするオプションは、30トライアルまたは早期アクセスバージョンの使用です。
あなたが使用している場合、Visual Studioのを、ちょうど入れdebugger;デバッグしたいコードの上。実行中、コントロールはその場所で一時停止し、そこから段階的にデバッグできます。
ほとんどの答えと同様に、それは本当に依存します：デバッグで何を達成しようとしていますか？基本的な開発、パフォーマンスの問題の修正？基本的な開発については、これまでの答えはすべて十分すぎるほどです。
特にパフォーマンステストについては、Firebugをお勧めします。時間の面で最も高価な方法をプロファイルできることは、私が取り組んできた多くのプロジェクトにとって非常に貴重です。クライアント側のライブラリがますます堅牢になり、一般にクライアント側の責任が増えるにつれ、このタイプのデバッグとプロファイリングがさらに役立つようになります。
FirebugコンソールAPI：http : //getfirebug.com/console.html
押して、F12 Web開発者をすぐにブラウザを離れることなく、JavaScriptコードをデバッグすることができます。Windowsのすべてのインストールに組み込まれています。
Internet Explorer 11、F12ツールは、このようなブレークポイント、ウォッチとローカル変数の表示、およびメッセージと即時コード実行のためのコンソールとしてのデバッグツールを提供しています。