web-dev-qa-db-ja.com

Console.log（）; JavaScriptの方法とデバッグ

わかりましたので、これが皆さんにとって基本的なものではない質問であることを願っています。

私は自分自身をトラブルに巻き込むのに十分なjQueryを知っています。つまり、要素をつかんでそれを使って、対話機能などのために独自の小さな関数を書くことができます。しかし、その後、stackoverflowに質問を投稿して額に自分自身を平手打ちさせる答えを得る前に、何かが期待どおりに進まないので、自分でデバッグしたいので、コードにalert();を挿入するのはうんざりです。このテーマを読むと、console.log();、console.info();などの記述がありますが、これらをデバッグ用の実際のシナリオで使用する方法を説明するリソースは見つかりません。

laymanでこれらの関数を使用する方法を説明できる優れたリソースまたはチュートリアル（本を読むことを恐れない）を知っている人は誰でもしてください。私が見つけているチュートリアルやそのようなものは、高度な方法か表面をざっと見ているだけで、それらの使用方法を示していないようです。 console.log();を挿入でき、firebugまたはelement inspectorの情報をコンソールに出力できることを理解しています。しかし、私の手で焼いた機能が行のどこかで予期しないことをしている場合、ブラウザがjavascriptを解析するときに問題をどのように見つけることができますか？.

これを学ぶことはコードで何が起こっているのかを理解するのに役立つと思うので、どんな助けも大歓迎です。そのため、画面を見つめるのをやめることができます「これがうまくいかないのは、jsfiddle！”

javascriptjquerydebugging
10
Danferth

console.log（）は、渡されたものをすべて取得し、コンソールのログウィンドウに書き込みます。配列を渡すと、配列の内容を調べることができます。オブジェクトを渡すと、オブジェクトの属性/メソッドを調べることができます。文字列を渡すと、文字列が記録されます。基本的には「document.write」ですが、その引数をインテリジェントに分解して他の場所に書き込むことができます。

時折のデバッグ情報を出力するのに役立ちますが、大量のデバッグ出力がある場合は特に役立ちません。

スクリプトの実行を監視するには、代わりにデバッガーを使用します。これにより、コードを1行ずつステップスルーできます。 console.logは、後で検査するために一部の変数の内容を表示する必要があるが、実行を中断したくない場合に使用されます。

9
Marc B

これらの機能を頭に追加するのが好きです。

window.log=function(){if(this.console){console.log(Array.prototype.slice.call(arguments));}};
jQuery.fn.log=function (msg){console.log("%s: %o", msg,this);return this;};

これでログは壊れませんIEインラインでログインできる1か所で有効または無効にできます

$(".classname").log(); //show an array of all elements with classname class
2
Andy Gee

JavaScriptデバッガーの使用方法を学びます。 Venkman（Firefox用）またはWeb Inspector（Chome＆Safariの一部）は、何が起こっているかをデバッグするための優れたツールです。

スクリプトを操作しているときに、ブレークポイントを設定してマシンの状態を調べることができます。コードの一部をステップ実行して、すべてが計画どおりに機能していることを確認するなど。

初心者向けのJavaScriptデバッグに関するWebMonkeyの優れた記事 です。始めるのに最適な場所です。

2
tkone

基本的にconsole.log()を使用すると、何かを検査するたびにalert()をフラッシュする代わりに、選択したjavascriptデバッガーで変数を出力できます。さらに、より複雑なオブジェクトの場合は、要素をalert()のような文字列に変換する代わりに、オブジェクトをさらに検査するツリービュー。

1
jondavidjohn

ブレークポイントと特に条件付きブレークポイントは友達です。

また、サイトのデバッグバージョンで必要に応じて値をチェックし、例外をスローする関数のような小さなアサートを書くことができます（一部の変数がtrueに設定されているか、URLにパラメータがあります）

0
Dima Vidmich