Chromeのデベロッパーツールを使ったJavascriptのデバッグ


個人的に行ったJavascriptのデバッグのメモです。

使うツール

Chromeのデベロッパーツールを使う。

右クリックで、要素の検証を選ぶと使える。

console.logを使う

console.log()の()の中に、変数を入れると、配置した場所での変数の中身がconsoleに表示される。

スクリーンショット 2015-06-20 17.57.49

例えば、

var human = ~~

の中身をみたいときは、
console.log(human)
とする。

また、変数が階層構造のようになっている場合、
console.log(human.attributes.position.x);
とすると、xの値を見ることができる。

具体的には、以下のような場合。
スクリーンショット 2015-06-20 18.01.32

また、この値を変数に入れることもできる。

var humanx = human.attributes.position.x;

参考:JavaScriptのデバッグ – ブレークポイントの使用 | CodeGrid

ブレークポイントを使って動作を見る

上部のSourceをクリックする。

そして、ブレークしたい行数をクリックすると、行数が青くなる。

ブラウザを更新すると、その場所で動作が止まります。

スクリーンショット 2015-06-20 18.06.38

すると下記のようなバーが表示されます。

一番右のアイコンをクリックすると1つずつ、コードが実行されます。

青い色の再生ボタンを押すと、最後まで動作します。
スクリーンショット 2015-06-20 18.09.27

合わせて変数の中身をみたいとき

Watchというタブをクリックします。

右側の+ボタンを押すと入力フォームが現れますので、みたい変数を入力します。

以下はhumanと入れたときです。値がないので、not availableとなっています。
スクリーンショット 2015-06-20 18.11.41

さらに、細かい使い方などは下記を参照。
参考:Chrome デベロッパーツールでのJavaScriptデバッグ方法 | Web Tips

Javascriptの動作を調べるときに見たサイト

Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 – Build Insider
JavaScriptプログラミング講座【オブジェクトについて(Object)】
JavaScriptプログラミング講座【エレメントについて(HTMLElement)】
JavaScriptプログラミング講座【エレメントについて(HTMLElement)】
JavaScriptで覚えておくとよいデータ構造 – 配列・オブジェクト – いろいろ解析日記
javascriptでdocument.getElementByIdで取得できる対象のドキュメントは? – QA@IT
load( url, data, callback ) – jQuery 日本語リファレンス