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

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

使うツール

Chromeのデベロッパーツールを使う。
右クリックで、要素の検証を選ぶと使える。

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

例えば、

var human = ~~

の中身をみたいときは、

console.log(human)

とする。

また、変数が階層構造のようになっている場合、

console.log(human.attributes.position.x);

とすると、xの値を見ることができる。

具体的には、以下のような場合。この値を変数に入れることもできる。

var humanx = human.attributes.position.x;

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

ブラウザを更新するとその場所で動作が止まる。するとバーが表示される。

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

青い色の再生ボタンを押すと最後まで動作する。

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

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

さらに細かい使い方は下記参照。