使用することができる。Toolsを開き(Ctrl+Shift+IかF12キーを押す)、Sourcesパネルを開いてその中のSnippetsタブをクリック。その後、左側の空白欄を右クリックしてメニューを表示し、その中の『New』をクリック。すると新しいsnippetが追加され、真ん中にコード記入欄ができるのでsnippetの名前を『jqueryfy』、コード下記のように記入し保存。}})();jqueryfyの箇所を右クリックしてメニューを表示し、『Run』をクリックする。Snippets¶ChromeのDevTools(開発者ツール)にはSnippetsという、コンソールでデバッグの際に使うスクリプトを保持してくれる機能がある。Snippetshttp://bgrins.github.io/devtools-snippets/Debug¶JavaScriptが敬遠される理由の7割ぐらいは、このデバックのし難くさにかかっていると思う。実機で試してないのもあるけど。原始的なのが、alert()を使う方法です。同様にconfirm()を使うこともできます。C言語のprintfで変数を出力したり、Java言語のSystem.out.println()でインスタンスの中身を出力するのと同じです。alert("Alex");debuggerステートメント¶デベロッパーツール側では手動でブレークポイントを配置したものと認識されます。debugger;console.log,console.warn,console.error,console.info¶いずれも以下のようなC言語で使われるような出力フォーマットをサポートします。結果はコンソール上にテーブルで出力され、オブジェクトの属性でソートすることができます。オブジェクトの中身、JSON(たぶん)、配列が、視覚的に把握しやすくなります。失敗した時だけでなく、成功した時にもコールトレースを確認することができます。非標準の関数ですが、主要なデスクトップブラウザではサポートされています。console.trace();非同期コールは、いかが役に立つかもしれません。console.trace¶オブジェクトのプロパティの一部が変更されることがありますが、誰が犯人か判らないことがよくあります。このような場合Object.observeが役に立ちます。personオブジェクトに対する全ての変更を確認する場合を見てみましょう。console.traceと併用すると、コールトレースも確認できるので、誰が犯人かまで判ります。現在(2015.05:未確認)は、Chromeのみがこの機能をサポートしているようです。{firstName."John"}誰がDOMやHTML要素を変更するのか¶MutationObserverと呼ばれるオブジェクトがあり、これによってDOM要素の監視が可能になります。ドキュメント全体で発生した全ての変更をリストアップしたい場合を考えてみましょう。この場合、ドキュメントは選択されたどのDOM要素にも当てはまります。});Chromeでは、プログラミング以外の解決策も使えます。Eventを使っています。実に簡単なのですが、Windowオブジェクトにonerrorイベントハンドラを追加するだけでクライアント側の処理は完了です。ハンドラは、サーバ上にエラー情報を蓄積するRESTのエンドポイントに対してAjaxリクエストを行うことができます。